ES6新增字符串和数组方法

缺乏、安全感 2023-06-08 06:17 38阅读 0赞

## ES6新增字符串方法 ##

**includes()：** 查找参数字符串是否存在 , 返回布尔值。  
**startsWith()：** 判断参数字符串是否在原字符串的头部，返回布尔值。  
**endsWith()：** 判断参数字符串是否在原字符串的尾部，返回布尔值。

以上三个方法都可以接受两个参数，第一个参数是查询的字符串，第二个是开始查询的位置(索引)。

let string = "apple,banana,orange";
    string.includes("banana");     // true
    string.startsWith("apple");    // true
    string.endsWith("apple");      // false
    string.startsWith("banana",6)  // true

**repeat()：** 字符串重复指定次数返回新的字符串。

(1)参数是整数
    console.log("Hello,".repeat(2));  // "Hello,Hello,"
    
    (2)参数是小数，向下取整
    console.log("Hello,".repeat(3.2));  // "Hello,Hello,Hello,"
    
    (3)参数是 0 至 -1 之间的小数，会进行取整运算，0 至 -1 之间的小数取整得到 -0 ，等同于 repeat 零次
    console.log("Hello,".repeat(-0.5));  // "" 
    
    (4)参数是 NaN，等同于 repeat 零次
    console.log("Hello,".repeat(NaN));  // "" 
    
    (5)参数是负数或者 Infinity ，会报错:
    console.log("Hello,".repeat(-1));  
    // RangeError: Invalid count value
    
    console.log("Hello,".repeat(Infinity));  
    // RangeError: Invalid count value
    
    (6)传入的参数是字符串，则会先将字符串转化为数字
    console.log("Hello,".repeat("hh")); // ""
    console.log("Hello,".repeat("2"));  // "Hello,Hello,"

**padStart()：** 用参数字符串从头部（左侧）补全原字符串，返回新的字符串。  
**padEnd()：** 用参数字符串从尾部（右侧）补全原字符串，返回新的字符串。

以上两个方法接受两个参数，第一个参数是补全之后字符串的最小长度，第二个参数是用来补全的字符串。

如果没有指定第二个参数，默认用空格填充:

console.log("h".padStart(5,"o"));  // "ooooh"
    console.log("h".padEnd(5,"o"));    // "hoooo"
    console.log("h".padStart(5));      // "    h"

如果指定的长度小于或者等于原字符串的长度，则返回原字符串:

console.log("hello".padStart(5,"A"));  // "hello"

如果原字符串加上补全字符串长度大于指定长度，则截去超出位数的补全字符串:

console.log("hello".padEnd(10,",world!"));  // "hello,world"

常用于补全位数：

console.log("123".padStart(10,"0"));  // "0000000123"

## ES6新增数组方法 ##

**Array.of():** 将参数中所有值作为元素形成数组 , 即定义数组。

// 将参数中所有值作为元素形成数组
    console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
     
    // 参数值可为不同类型
    console.log(Array.of(1, '2', true)); // [1, '2', true]
     
    // 参数为空时返回空数组
    console.log(Array.of()); // []

**Array.from():** 将类数组对象或转化为数组。

// 参数为数组,返回与原数组一样的数组
    console.log(Array.from([1, 2])); // [1, 2]
     
    // 参数含空位
    console.log(Array.from([1, , 3])); // [1, undefined, 3]

![举例介绍Array.from的参数][Array.from]

**find():** 查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。

let arr = Array.of(1, 2, 3, 4);
    console.log(arr.find(item => item > 2)); // 3
     
    // 数组空位处理为 undefined
    console.log([, 1].find(n => true)); // undefined

**findIndex():** 查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。

let arr = Array.of(1, 2, 1, 3);
    console.log(arr.findIndex(item => item = 1)); // 0
     
    // 数组空位处理为 undefined
    console.log([, 1].findIndex(n => true)); //0
    
    // 参数1：回调函数
    // 参数2(可选)：指定回调函数中的 this 值

**fill():** 填充替换数组 , 含头不含尾

let arr = Array.of(1, 2, 3, 4);
    console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]
    // 参数1：用来填充的值
    // 参数2：被填充的起始索引
    // 参数3(可选)：被填充的结束索引，默认为数组末尾

**copyWithin():** 将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。

// 参数1：被修改的起始索引
    // 参数2：被用来覆盖的数据的起始索引
    // 参数3(可选)：被用来覆盖的数据的结束索引，默认为数组末尾
    
    console.log([1, 2, 3, 4].copyWithin(0,2,4)); // [3, 4, 3, 4]
    console.log([1, 2, ,4].copyWithin(0, 2, 4)); // [, 4, , 4]
     
    // 参数1为负数表示倒数
    console.log([1, 2, 3, 4].copyWithin(-2, 0)); // [1, 2, 1, 2]

**keys():** 遍历键名 , 只能在循环里使用,因为返回的是迭代器

for(let key of ['a', 'b'].keys()){
        console.log(key);
    }
    // 0
    // 1
     
    // 数组含空位
    console.log([...[,'a'].keys()]); // [0, 1]

**values():** 遍历键值 , 只能在循环里使用,因为返回的是迭代器

for(let value of ['a', 'b'].values()){
        console.log(value);
    }
    // "a"
    // "b"
     
    // 数组含空位
    console.log([...[,'a'].values()]); // [undefined, "a"]

**includes():** 数组是否包含指定值。

// 参数1：包含的指定值
    [1, 2, 3].includes(1);    // true
     
    // 参数2：可选，搜索的起始索引，默认为0
    [1, 2, 3].includes(1, 2); // false
     
    // NaN 的包含判断
    [1, NaN, 3].includes(NaN); // true

**flat():** 嵌套数组转一维数组

console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
     
    // 指定转换的嵌套层数
    console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
     
    // 不管嵌套多少层
    console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]

[Array.from]: /images/20230531/3bc57ddb880d4fa2ba878732348f3ceb.png