JavaScript中的substring方法和fill方法,使用详细(fill方法获取一天24小时)

news2024/12/23 2:43:26

简介:JavaScript中的数组方法,可以帮助我们操作数组中的元素,以及对数组进行排序和过滤等操作;最近有用到substring和fill方法,这里来记录一下。

一. substring 方法:

substring 方法用于从一个字符串中提取指定位置的子字符串。它接受两个参数,即起始索引和结束索引(可选)。返回的子字符串包括起始索引处的字符,但不包括结束索引处的字符。

语法:

string.substring(startIndex, endIndex)

参数:

- startIndex :要提取子字符串的起始索引。

- endIndex (可选):要提取子字符串的结束索引(不包含在内)。

示例:

const str = "Hello, World!";

const subStr1 = str.substring(7); 
// 从索引7开始提取子字符串 console.log(subStr1); 
// 输出 "World!" 

const subStr2 = str.substring(0, 5); 
// 从索引0到4(不包含5)提取子字符串 console.log(subStr2); 
// 输出 "Hello"

上述示例展示了如何使用 substring 方法从一个字符串中提取子字符串。第一个示例从索引7开始提取子字符串,而第二个示例从索引0到4(不包含5)提取子字符串。

二. fill 方法:

1、fill 方法用于将数组中的所有元素替换为指定的值。它接受三个参数,即要填充的值、起始索引(可选)和结束索引(可选)。

语法:

array.fill(value, startIndex, endIndex)

参数:

- value :要填充到数组中的值。

- startIndex (可选):要开始填充的起始索引,默认为0。

- endIndex (可选):要结束填充的结束索引(不包含在内),默认为数组的长度。

示例:

const array = [1, 2, 3, 4, 5]; 
array.fill(0); 
// 将数组中的所有元素替换为0 console.log(array); 
// 输出 [0, 0, 0, 0, 0] 

const array2 = [1, 2, 3, 4, 5]; 
array2.fill(0, 1, 3); 
// 将索引1到2(不包含2)的元素替换为0 console.log(array2); 
// 输出 [1, 0, 0, 4, 5]

上述示例展示了如何使用 fill 方法将数组中的元素替换为指定的值。第一个示例将数组中的所有元素替换为0,而第二个示例将索引1到2(不包含2)的元素替换为0。

2、这边使用fill方法来举个应用实例,使用数组的fill和forEach方法,来获取一天的24小时

function getDayHour() {

    let timeArray = new Array(24).fill("");
    timeArray.forEach((item, index) => {
        timeArray[index] = (index < 10 ? '0' + index : index) + ':00'
    });
    return timeArray;

}
let hourList = getDayHour();
console.log(hourList);

控制台输出:

 在vue中的应用:

//定义数据
data() {
    return {
      hourList: ""
    };
},

//定义方法
methods: {
    defineDayTime() {
      this.hourList = new Array(24).fill("");
      this.hourList.forEach((item, index) => {
        this.hourList[index] = (index < 10 ? "0" + index : index) + ":00"
      })
    },
},

//调用
created() {
    this.defineDayTime();
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/722043.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2. PS基本操作

因为网页美工大部分效果图都是利用PS ( Photoshop )来做的,所以以后我们大部分切图工作都是在PS里面完成 ●文件—>打开&#xff1a;可以打开我们要测量的图片 ●CtrlR : 可以打开标尺&#xff0c;或者视图—>标尺 ●右击标尺&#xff0c;把里面的单位改为像素 ●Ctrl加号…

linux上docker容器运行web应用简单介绍(二)

相关文章&#xff1a; linux docker安装及报错处理_做测试的喵酱的博客-CSDN博客 一、mac 安装及使用docker_docker mac_做测试的喵酱的博客-CSDN博客 Docker 容器使用 | 菜鸟教程 linux应用docker基本使用&#xff08;一&#xff09;_做测试的喵酱的博客-CSDN博客 一、 …

【设计模式】第十七章:状态模式详解及应用案例

系列文章 【设计模式】七大设计原则 【设计模式】第一章&#xff1a;单例模式 【设计模式】第二章&#xff1a;工厂模式 【设计模式】第三章&#xff1a;建造者模式 【设计模式】第四章&#xff1a;原型模式 【设计模式】第五章&#xff1a;适配器模式 【设计模式】第六章&…

ChatGPT+MidJourney 3分钟生成你的动画故事

chatgpt是真的火了&#xff0c;chatgpt产生了一个划时代的意义——自chatgpt起&#xff0c;AI是真的要落地了。 chatgpt能做的事情太多了&#xff0c;多到最初开发模型的程序员自己&#xff0c;也没法说得清楚chatgpt都能做啥&#xff0c;似乎只要你能想得到&#xff0c;它都有…

Linux内核代码中常用的数据结构

Linux内核代码中广泛使用了数据结构和算法&#xff0c;其中最常用的两个是链表和红黑树。 链表 Linux内核代码大量使用了链表这种数据结构。链表是在解决数组不能动态扩展这个缺陷而产生的一种数据结构。链表所包含的元素可以动态创建并插入和删除。 链表的每个元素都是离散…

系统移植 kernel 移植 配置网卡IP NFS网络文件系统移植 7.4

给fs4412移植内核 Kernel&#xff08;内核&#xff09;是操作系统的核心组件&#xff0c;它负责管理计算机硬件和软件资源&#xff0c;提供对底层硬件的访问和控制&#xff0c;以及为应用程序提供运行环境。内核是操作系统的最底层&#xff0c;负责处理系统的各种任务和功能&a…

第二步:STM32F407ZGT6资源介绍

1.1 STM32F407ZGT6资源描述 内核&#xff1a; 32位 高性能ARM Cortex-M4处理器 时钟&#xff1a;高达168M,实际还可以超屏一点点 支持FPU&#xff08;浮点运算&#xff09;和DSP指令 IO口&#xff1a; STM32F407ZGT6: 144引脚 114个IO 大部分IO口都耐5V(模拟通道除外) …

Spring Security OAuth2.0(3):Spring Security简单入门

文章目录 前言一、Spring Security 介绍二、创建工程三、认证1. 认证页面2. 安全配置 四、授权 前言 Spring Security 快速入门。 本章代码已分享至Gitee&#xff1a;https://gitee.com/lengcz/security-spring-security 一、Spring Security 介绍 \qquad Spring Secutiry 是…

vue3中的setup方法

一、vue2中的定义变量和方法的写法 在介绍v3的setup之前&#xff0c;我们先来看看在v2中是如何定义变量和方法的 <template><h2>姓名&#xff1a;{{name}}</h2><h2>年龄&#xff1a;{{age}}</h2><button click"sayHello">说话…

openEuler Linux 光驱开启自动挂载

openEuler Linux 光驱开启自动挂载 创建光驱挂载目录 mkdir -p /mnt/cdrom 手动挂载光驱 但是系统重启后挂载失效 mount /dev/cdrom /mnt/cdrom取消光驱挂载 umount /mnt/cdrom光驱开机自动挂载 临时挂载光驱 mount /dev/cdrom /mnt/cdrom编写配置文件/etc/fstab vi /etc/fst…

【Distributed】分布式监控系统zabbix应用

文章目录 前言一、Zabbix基本概述1. Zabbix 的概念2. Zabbix 的工作原理3. Zabbix 6.0 新特性3.1 Zabbix 可以实现高可用3.2 Zabbix 新增监控系统 4. Zabbix 的构成5. Zabbix 的功能组件5.1 数据库5.2 Web 界面5.3 Zabbix Agent5.4 Zabbix Proxy5.5 Java Gateway 6. Zabbix 和 …

【macOS 系列】如何设置macos的软件、app随系统启动

如何设置app随系统启动 有些app可以在内部实现&#xff0c;如果没有&#xff0c;则需要在系统-偏好设置-用户与群组&#xff0c;切换到登录项&#xff0c;然后在下方可以添加或删除开机启动项。

[管理与领导-6]:新任管理第1课:管理转身--从技术业务走向管理,角色的转变

目录 第1章 管理从转变角色开始 1.1 什么是角色 1.2 角色定位 1.3 技术型与管理型人才差别&#xff1a;六大转变 1.4 不同角色的人能力要求 第2章 管理从定位角色迈步&#xff1a;管理者的四位 2.1 定位 2.1.1 辅助者 2.1.2 教练&#xff1a;以身作则&#xff0c;带领…

【数据结构与算法】树和二叉树课后习题

题目 题目1 知一棵树边的集合为 < I , M > , < I , N > , < E , I > , < B , E > , < B , D > , < A , B > , < G , J > , < G , K > , < C , G > , < C , F > , < H , L > , < C , H > , < A …

财务凭证替代退出类型不正确几个问题汇总

财务凭证替代退出类型不正确几个问题汇总 以上资料均来自网络&#xff0c;纯粹个人工作记录&#xff0c;如有意见请联系删除。 1、两种类型含义 c_exit_param_class. 传参数 代表完全凭证替代 c_exit_param_none. 不传参数 代表行项目替代 exits-name ‘ZFI27’. " …

wpf中DialogResult.Yes方法报错

原因&#xff1a;在WPF里DialogResult没有Yes或No的枚举取值了 所以应该这样写 private void Button_Click(object sender, RoutedEventArgs e) {   if (MessageBox.Show ("要退出程序吗?", "退出程序",MessageBoxButton.YesNo ) MessageBoxResult.Y…

MySQL数据库概述

文章目录 SQL语言的特点SQL的组成部分数据库基本概念数据库性质数据库系统数据库系统的组成部分数据库发展简史 SQL语言的特点 &#xff08;1&#xff09;功能一体化 &#xff08;2&#xff09;高度非过程化 &#xff08;3&#xff09;面向集合的操作方式 &#xff08;4&am…

企业利用bi商业智能工具有哪些改变呢?以瓴羊QuickBI为例

当下的趋势是数字化已经成为一股不可抗拒的力量&#xff0c;推动着全球各国社会经济的发展。在数字经济中&#xff0c;数据是核心基础&#xff0c;包括数据的收集、整合、分析和应用等各个方面。为了充分挖掘数据的价值&#xff0c;各种相关技术近年来得到了迅猛发展。在这些技…

MFC管理系统

文章目录 登录设置登录界面登录用户判断 界面设计嵌入对话框 添加列表添加员工添加按钮 完成添加员工删除员工修改员工信息修改 完成修改员工保存数据打开时显示读取内容全部代码 登录 设置登录界面 初始化窗口实列 添加控件变量 登录用户判断 void CLoginDlg::OnBnClickedB…

C语言程序环境和预处理

本章主要以图片和文字的形式给大家讲解 程序的翻译环境和程序的执行环境 在ANSI C的任何一种实现中&#xff0c;存在两个不同的环境。 第1种是翻译环境&#xff0c;在这个环境中源代码被转换为可执行的机器指令。 第2种是执行环境&#xff0c;它用于实际执行代码 2. 详解编译…