ES6之数组的扩展知识点总结（五）

曾经终败给现在 2022-05-27 00:08 187阅读 0赞

ES6的学习，主要是跟着阮一峰大神的ES6第三版这本书学的，所以我在这里主要是把知识梳理一遍，方便自己的理解记忆以及日后的再学习使用，如果想要了解更多的建议到[http://es6.ruanyifeng.com/\#docs/array][http_es6.ruanyifeng.com_docs_array]看详细版的

扩展运算符（spread)：是三个点（...）

扩展运算符的作用：

将一个数组转为用逗号分隔的参数序列。

任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组。

扩展运算符还可以将字符串转为真正的数组。

var arr = [1,2,3,4,3,2,3];
     var newArr = [];
     newArr.push(...arr);
     console.log(newArr);

上面的实例，使用扩展运算符，将数组变为一个参数序列

let str = "Donna";
        console.log([...str]);//["D","o","n","n","a"]
    const set = new Set([1,2,3,4,3,2,4,56]);
    console.log([...set]);//[1,2,3,4,56]
    const map = new Map([["a",12],["boo",true],[123,345]]);
    console.log([...map]);//[["a",12],["boo",true],[123,345]]

上面的实例，将字符串和Map数据结构和Set数据结构转为数组。

扩展运算符的应用：

替代函数的apply()

const arr = [1,2,3];
    function sum(x,y,z){
        console.log(x+y+z);
    }
    sum.apply(null,arr);//6 ES5的做法
    sum(...arr);//6 ES6使用扩展运算符将数组转为参数序列

求一个数组最大元素的做法

const arr = [1,2,3,45,23,34];
    console.log(Math.max.apply(null,arr));//45
    console.log(Math.max(...arr));//45

上面的两个实例显示：由于扩展运算符可以展开数组，将数组转为函数的参数，所以不再需要apply()方法

克隆数组

const arr1 = [1,2,3];
    const arr2 = arr1.concat();//链接一个空数组，避免直接赋值，arr1和arr2之间相互影响
    
    const arr3 = [...arr1];//Es6用扩展运算符直接复制
    const [...arr4] = arr1;//这两种方法都可以达到我们想要的效果

解构赋值

const arr1 = [1,2,3];
    const str = "aa";
    const [x,y,z] = [5,...arr1];
    console.log(x);
    console.log(z);
    
    const [...rest] = [1,2];
    console.log(rest);//[1,2]
        const [leo,...donna] = [1,2,3];
        console.log(donna);//[2,3]
    const [...le,don] = []1,23,4;//报错：Uncaught SyntaxError: Rest element must be last element

从上面的例子中说明， 扩展运算符可以与解构赋值结合起来，用于生成数组。同时从最后一个报错来看：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

Array.from方法：用于将两类对象转为真正的数组：1、类似数组的对象2、可遍历的对象（字符串、数组、类数组、Map、Set...）

let likeArr = {
        "0":123,
        "1":true,
        "2":"lalal",
        length:3
    }
    const arr = Array.from(likeArr);
    console.log(arr);//[123, true, "lalal"]

聊聊什么是类数组吧：我们把符合以下条件的对象称为类数组

1、具有length属性

2、按照索引方式存储数据

3、不具有数组的push，pop等方法

常见的类数组有arguments，NodeList

只要部署了Iterator接口的数据结构（可遍历对象），Array都能将其转为数组。

const set = new Set([2,3,4,5,23]);
    const arr = Array.from(set);
    console.log(arr);//[2,3,4,5,23]

注意：如果参数是一个真正的数组，Array.from会返回一个一模一样的新数组。

如果参数是一个真正的数组，`Array.from`会返回一个一模一样的新数组。

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

let likeArr = {
            "0":123,
            "1":true,
            "2":"lalal",
            length:3
        }
        const arr = Array.from(likeArr,function(x){
            return x*x;
        });
        console.log(arr);//[15129, 1, NaN]

Array.of()方法：用于将一组值，转为数组。它总是返回参数值组成的数组。如果没有参数就返回一个空数组。这个方法的主要目的是为了弥补数组构造函数Array()的不足，因为参数个数的不同，会导致Array()的行为有差异

const arr1  = Array.of();
    const arr2 = Array.of(1);
    const arr3  = Array.of(1,2,3);
    const arr4  = Array();
    const arr5  = Array(3);
    const arr6  = Array(1,2,3);
    console.log(arr1);//[]
    console.log(arr2);//[1]
    console.log(arr3);//[1, 2, 3]
    console.log(arr4);//[]
    console.log(arr5);//[,,]
    console.log(arr6);//[1, 2, 3]

从上面的实例中我们可以发现：

Array()方法没有参数、一个参数、多个参数时，返回结果都不一样。因为只有当参数个数不少于2个时，Array()才会返回有参数组成的新数组。参数个数只有一个时，实际上是指定数组的长度

Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载，它的行为非常统一。

copyWithin方法：在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接收三个参数

target（必需）：从该位置开始替换数据。如果为负值，表示倒数。

start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。

end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

这三个参数都应该是数值，如果不是，会自动转为数值。

const arr = [1,2,3,4,2];
    arr.copyWithin(0,2,4);
    console.log(arr);//[3, 4, 3, 4, 2]

const arr = [1,2,3,4,2];
    arr.copyWithin(-1,-2,4);
    console.log(arr);// [1, 2, 3, 4, 4]

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

const arr = [1,2,3,4,2];
     const a = arr.find(function(x){
        return x<3;
    });
    
    console.log(a);//1

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

const arr = [1,2,3,4,2];
     const a = arr.findIndex(function(x){
        return x<3;
    });
    
    console.log(a);//0

这两个方法都可以接受第二参数，用来绑定回调函数的this对象

另外。这两个方法都可以发现NaN,弥补了数组的indexof方法的不足。

indexof方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到

const arr = [1,2,3,4,2,NaN];
     const a = arr.findIndex(function(x){
        return Object.is(NaN,x);
    });
     const b = arr.indexOf(NaN);
    console.log(a);//5
    console.log(b);//-1

fill()：使用给定值，填充一个数组，如果只有一个参数，那么数组中已有的元素，会被全部替换成这个参数，当然，fill方法还可以接收第二个和第三个参数，用于指定填充的起始位置和结束位置

const arr = [1,2,3,4,2,NaN];
    arr.fill(2);
    console.log(arr);//[2,2,2,2,2,2]
        arr.fill(4,2,5);
        console.log(arr);//[2, 2, 4, 4, 4, 2]

注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

const arr = [1,2];
    arr.fill({"donna":111});
    console.log(arr);[{"donna":999},{"donna":999}]
    arr[0].donna = 999;
    console.log(arr);//[{"donna":999},{"donna":999}]

keys()、values()、entries()

ES6提供的三个新方法，用于遍历数组，他们都返回一个遍历器对象，可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历，values()是对键值的遍历，entries()是对键值对的遍历。

includes()方法：返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似，该方法的第二个参数表示搜索的起始位置，默认为0，如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如数组的长度为3，但是第二个参数为-4），则会重置从0开始。

const arr = [1,2,3,4];
    console.log(arr.includes(3,1));//true
        console.log(arr.includes(2,-5));//true

没有该方法之前，我们通常使用数组的indexOf方法，检查是否包含某个值。

没有该方法之前，我们通常使用数组的`indexOf`方法，检查是否包含某个值。

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

includes()方法就没事

const arr = [1,2,3,4,NaN];
    console.log(arr.includes(NaN,1));//true

另外，Map和Set数据结构有一个has方法，需要注意与includes区分。

Map结构的has方法，是用来查找键名的

Set结构的has方法，是用来查找键值的。