ES6学习笔记之数组的扩展

太过爱你忘了你带给我的痛 2023-08-17 17:43 112阅读 0赞

# ✏️1. 扩展运算符 #

扩展运算符（spread）是三个点（`...`）,将一个数组转为用逗号分隔的参数序列。

*  普通用法

console.log(...[1,2,3]);//1 2 3

*  数组拷贝(普通类型深拷贝,复杂类型浅拷贝)

const arr1 = [1, 2, 3, 4, 5];
    const arr2 = [...arr1];
    arr2[0] = 666;
    console.log('arr2:', arr2);//[666,2,3,4,5]
    console.log('arr1:', arr1);//[1,2,3,4,5]

*  分割数组(解构赋值)

const arr1=[1,'2','3','4'];
    const [,...arr2]=arr1;
    console.log('arr2 :', arr2);//arr2 : ["2", "3", "4"]

*  合并数组

let arr1=[1,2,3],
    arr2=[4,5,6];
    let arr3=[...arr1,...arr2];//[1,2,3,4,5,6]

*  传递参数

function add(x,y) {
        return x+y;
    }
    const arr=[1,2];
    console.log(add(...arr));//3

*  替代函数的 apply 方法

// ES5 的写法
    function f(x, y, z) {
      // ...
    }
    var args = [0, 1, 2];
    f.apply(null, args);
    
    // ES6的写法
    function f(x, y, z) {
      // ...
    }
    let args = [0, 1, 2];
    f(...args);

// ES5 的写法
    Math.max.apply(null, [14, 3, 77])//77
    
    // ES6 的写法
    Math.max(...[14, 3, 77])//77
    
    // 等价于
    Math.max(14, 3, 77);//77

*  字符串转数组

[..."abcdefg"];//[a,b,c,d,e,f,g]

--------------------

# ✏️2. 扩展的实例方法 #

## 1.Array.from ##

> 将类数组转换为数组 (①带有length属性的,②可遍历)

### 转换自定义对象 ###

let arrayLike = {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    };
    
    // ES5的写法
    var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
    
    // ES6的写法
    let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

### 字符串转数组 ###

Array.from('hello')

### Set转数组 ###

let set=new Set(['name','age']);
        console.log(Array.from(set));//["name", "age"]

> Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
    // 等同于
    Array.from(arrayLike).map(x => x * x);
    
    Array.from([1, 2, 3], (x) => x * x)

## 2.Array.fill() ##

fill方法使用给定值，填充一个数组。

{
        // 1参数
        const arr1 = [1, 2, 3, 4, 5];
        let arr2 = [...arr1].fill(3);
    
        // 三参数:用6从下标0开始填充直到下标3之前
        console.log(arr2);//333333
        console.log([...arr1].fill(6, 0, 3))//66645
    
        const arr3 = [];
        console.log(arr3.fill(0, 0, 10));//[]
    
        // 初始化数组
        let arr=new Array(5).fill(0);
        console.log(arr);//[0,0,0,0,0]
    }

## 3.Array.find(),Array.findIndex ##

> 数组实例的find方法，用于找出第一个**符合条件**的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

> 数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

*  查找数组中第一个大于5的成员

let arr=[1,3,4,2,8,4,8];
    let res=arr.find(v=>{
        return v>5;
    })
    let resIndex=arr.findIndex(v=>{
        return v>5;
    })
    console.log(res,resIndex);//8 4

*  find,findIndex方法的回调有三个参数,依次为当前值,当前的位置,原数组

let res=[1,2,3,4,5].find((v,i,arr)=>{
        return arr[i]===v;
    })
    console.log(res);//1

## 4.Array.includes() 和 Array.indexOf() ##

> Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES2016 引入了该方法。

[1, 2, 3].includes(2)     // true
    [1, 2, 3].includes(4)     // false

> 该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

[1, 2, 3].includes(3, 3);  // false
    [1, 2, 3].includes(3, -1); // true

> 在此之前用indexOf判断是否包含目标值,indexOf方法有两个缺点，1.不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。2.它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

[NaN].indexOf(NaN)//-1
    [NaN].includes(NaN)//true

## 5.Array.flat() ##

> 数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组展开，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

[1,2,[3,4],5,[6]].flat();
    // [1, 2, 3, 4, 5, 6]