3.数组扩展

3.1.扩展运算符

扩展运算符用三个点(...)表示,从字面上理解，它的功能就是把数组扩展开来,具体形式如下：

let arr = [1, 2, 3];console.log(...arr);  //打印结果 1 2 3//等价于console.log(1,2,3);

从上面代码中，我们可以看出...arr展开后的形式是这样的 1,2,3,用逗号隔开的参数序列

在函数调用的时候，可以用这个扩展运算符把数组里面的元素展开，分别传给函数的形参

let arr = [4, 5, 6];function Fn(a, b, c) {    console.log(a);    console.log(b);    console.log(c);    return a + b + c;}result = Fn(...arr);console.log(result);

扩展云算符可以和正常参数结合起来使用，非常的灵活

let arr = [4, 5, 6];function Fn(a, b, c, d, e, f) {    console.log(a);    console.log(b);    console.log(c);    console.log(d, e, f)}Fn(1,...arr, 2, 3);  //注意一一对应关系：1->a;...arr->b,c,d;2->e; 3->f

总结： 掌握扩展运算符在传参应用中的关键是抓住他们的一一对应关系

扩展运算符应用

1.复制数组

如果把一个数组直接赋值给另一个数组，那么会产生引用，相互影响，在es5中，只能通过变通的方式复制数组，但在es6中，我们可以通过扩展运算符来实现数组复制

//直接赋值 产生引用let arr = [1, 2, 3];let arr2 = arr;arr2.push(4);console.log(arr)  // [1, 2, 3, 4]//es5 中复制数组let arr3 = arr.concat();console.log(arr3)//es6中复制数组let arr4 = [...arr];arr4.push(5);console.log("arr4",arr4);  //[1,2,3,5]console.log("arr",arr)   //[1,2,3]  和arr4并不会相互影响

2.合并数组

let arr = [1, 2, 3];let arr2 = [4, 5, 6];console.log([...arr,...arr2])  // [1, 2, 3, 4, 5, 6]

3.和解构赋值结合,用于生成数组

let [a, b, ...rest] = [1, 2, 4, 5, 6, 7]console.log(rest);  //[4, 5, 6, 7]

3.2.Array.from

Array.from可以把类数组转成真正的数组

    
    
     
nodeing_1
    
     
nodeing_2
    
     
nodeing_3
    
     
nodeing_4
    
     
nodeing_5
    
     
nodeing_6
    

上面报错原因是因为aLi是类数组，除了下标外还有其他属性，例如length属性, aLi[length].style.color,这样就会报错

let aLi = document.getElementsByTagName('li')for(let i in Array.from(aLi)){    aLi[i].style.color = "red"}

3.3.Array.of

这个方法可以将一组数值转换成数组

let arr = Array.of(1, 2, 3,4)console.log(arr) // [1,2,3,4]

这个方法的主要应用就是弥补Array的不足，基本上看可以取代Array()和new Array，当Array传入一个参数的时候，表示给数组设置长度，传入的参数大于等于2的时候，才返回数组，因此，参数的不同导致行为的差异

//Array的行为不统一，根据参数的不同返回的结果不一样let arr = Array(4)let arr2 = Array(1, 3)let arr3 = Array(1,3,4,5);console.log(arr, arr2, arr3)      // [empty × 4] 、[1, 3]、 [1, 3, 4, 5]

Array.of不管传入多少参数，返回的都是数组

let arr = Array.of(4)let arr2 = Array.of(1, 3)let arr3 = Array.of(1,3,4,5)console.log(arr, arr2, arr3) // [4]  [1, 3]  [1, 3, 4, 5]

3.4.copyWithin

将数组内部指定位置的元素复制到指定的目标位置

let arr = [1, 2, 3, 4, 5]//第一个参数为目标起始位置 第二个参数为被复制元素的开始位置，第三个参数为被复制元素的结束位置//将下标3到4的元素 复制到下标为1的位置 原来位置的元素被覆盖arr.copyWithin(0, 3, 4)  //[4,2,3,4,5]console.log(arr)

3.5.find和findIndex

find方法用来查找数组中符合条件的第一个元素，接收一个回调函数

let arr = [1, 2, 3, 4, 5]arr.find(function (v,i,a) {    //第一个参数是每个数组元素，第二个参数是对应数组元素到索引，第三个参数是当前的数组    console.log(v,i,a);})

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

findIndex的用法和find类似，返回的是索引位置，而不是具体的值

let arr = [1, 2, 3, 4, 5]    let num = arr.findIndex(function (v,i,a) {        return v > 3    })    console.log(num)  //3

3.6.fill

fill方法用于填充数组

let arr = [1,2,8,8,8]arr.fill(1)console.log("arr",arr)

3.7.entries、keys和values

这几个方法应用在遍历数组中

let arr = [1, 2, 3, 4, 5];//遍历键名for(let index of arr.keys()){    console.log(index)}//遍历值for(let v of arr.values()){    console.log(v)}//遍历键/值对let arr = [1, 2, 3, 4, 5];for(let index of arr.keys()){    console.log(index)}

3.8.includes

includes方法的作用是查看某个数组是否包含给定的值，返回一个布尔值，true表示包含，false表示没有这个值

let arr = [1, 2, 3, 4, 5];console.log(arr.includes(7)) //falseconsole.log(arr.includes(1)) //true

视频教程地址：