JavaScript中的substring方法和fill方法，使用详细（fill方法获取一天24小时）

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

一、substring方法

1、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();
},

补充：substring用于操作字符串，fill用于操作数组，函数参数都是包含开头，不包含结尾。