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

谁践踏了优雅 2023-10-13 11:54 15阅读 0赞

#### 简介：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);

**控制台输出：**

![7cf7256e464c406da1ba94941fe988bd.png][]

**在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用于操作数组，函数参数都是包含开头，不包含结尾。**

[7cf7256e464c406da1ba94941fe988bd.png]: https://img-blog.csdnimg.cn/7cf7256e464c406da1ba94941fe988bd.png