ECMAScript 6（11）——数组的扩展

ゝ一纸荒年。 2022-06-16 09:24 180阅读 0赞

### 0、一句话总结 ###

1.  可以将一个有Iterator接口的数据类型（arraylike）转为真正的数组；
2.  将变量作为数组成员，返回一个新数组；
3.  把数组内某些位置元素，复制在数组内的某些位置；
4.  用某个值填充满整个数组；
5.  遍历数组的key、value和key + value；
6.  以函数为筛选条件，找到数组中第一个符合条件的元素；
7.  告诉你数组中有没有某个元素；

### 1、Array扩展方法 ###

以下方法只能通过Array这个全局对象来访问，而不能通过例如以下几个方法来调用

Array.prototype.from;    //undefined
    [].from;    //undefined
    var a = [1];
    a.from;    //undefined
    var a = new Array();
    a.from;    //undefined
    var a = [];
    a.__proto__.from;    //undefined

正确方法是：

typeof Array.from;    //"function"

#### 1.1、基于已有对象创建数组 ####

> Array.from(arrayLike\[, mapFn\[, thisArg\]\])

效果是从一个类似数组或可迭代对象创建一个数组的实例；

参数1：被用于转换为数组的对象；不能  
参数2：可选，处理函数，将数组的每个元素通过本函数处理后再返回。如果没有return内容，数组该位置元素的值将是undefined（而不是跳过这个元素）；  
参数3：参数2函数里this指向的目标，默认是window对象；

> arrayLike

简单来说（不涉及极端和特殊情况），几种常见类型会如下处理：

*  1. undefined和null会抛出TypeError；
 *  2. number会返回一个空数组；
 *  3. boolean类型返回空数组；
 *  4. 字符串会以单个字符为单位分拆为数组，例如”ab”变为\[“a”, “b”\]；
 *  5. 数组还是数组（是一个新的数组，但是浅复制，而不是深度复制，即按引用传递的元素保持不变）；
 *  6. 类似数组的对象，会被转为数组，比如`Array.from({'0':"1",length:2})`输出`["1", undefined]`，注意，必须有length属性才成立。其他情况会返回空数组；
 *  7. 函数返回空数组（无论函数有没有返回值）；
 *  8. NodeList转为数组，如代码：
 *      var list = document.querySelectorAll(".a");
        console.log(Object.prototype.toString.call(list)); //[object NodeList]
        console.log(Object.prototype.toString.call(Array.from(list))); //[object Array]
 *  9. 其他有Iterator接口的类型。
 *      在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、Set和Map结构。
    
    所谓类似数组的对象，本质特征只有一点，即必须有length属性。  
    因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。  
    但转换后，填充的时候就需要看key了，key符合才会被填充到对应位置；如果该位置key为空，那么值就是undefined。
    
    更多内容等写了Iterator相关的内容后再回来补吧（如果我能想起来……）
    
    > mapFn
 *  可选
 *  处理函数，有点类似数组的map，有两个参数，分别是item（数组当前元素）和index（从0开始），没有第三个参数；
 *  返回值将作为当前索引的值填充到数组中；
 *  没有return的话当前位置为undefined；
 *  > thisArg
 *  可选
 *  mapFn里，this指向的目标
 *  如果你有一个可以转换为数组的数据结构，比如NodeList，又想使用数组的各种api，那么就可以通过这个方法将该数据结构先转为数组，就可以方便的调用数组的各种API了。
    
    #### 1.2、生成数组 ####
    
    > Array.of(element0\[, element1\[, …\[, elementN\]\]\])
    
    说明：
    
    生成一个新数组，然后将参数依次添加到该数组中，返回该数组。
    
    如代码：
    
        Array.of(1);    //[1]
        Array.of("a", "c", "b");    //["a", "c", "b"]
        Array.of();    //[]
    
    注意：
    
    假如某个参数是一个按引用传递类型，那么将按引用传递给新数组（而不是创建一个全新的按引用传递对象）。如：
    
        var a = {};
        var b = Array.of(a)
        b;  //[{}]
        b[0] === a;   //true
    
    与new Array的区别：
    
        new Array()；    //[]
        new Array(1);    //[undefined]
        new Array(2);    //[undefined, undefined]
        new Array(1, 2);    //[1, 2]
        new Array("1");    //["1"]
    
    也就是说，new Array假如参数为1个，并且参数类型为number，比如该参数为n时，他的效果是生成一个length为n，然后每个位置值都为undefined的数组。
    
    而Array.of()无论参数是什么，是几个，都会将参数依次添加到一个新数组中并返回该数组；
    
    ### 2、数组实例的扩展方法 ###
    
    与1中不同，这里的方法不能直接通过Array.copyWithin来访问，而是需要通过prototype来访问。例如：
    
        Array.copyWithin;    //undefined
        typeof Array.prototype.copyWithin;    //"function"
    
    #### 2.1、数组元素在数组内复制 ####
    
    > arr.copyWithin(target)  
    > arr.copyWithin(target, start)  
    > arr.copyWithin(target, start, end)
    
    简单来说，这个api是这么做事的：
    
    为了方便理解，以\[1, 2, 3, 4, 5\].copyWithin(a, b, c)为例
    
    1.  准备复制调用这个方法的数组，即\[1,2,3,4,5\]
    2.  找到参数2，该参数决定了从数组哪个索引位置开始复制（包含该位置），默认值为0。比如b=2, c默认时，复制的数组内容就是\[3,4,5\]
    3.  找到参数3，该参数决定了从数组哪个索引位置结束复制（但不包含该索引位置）。默认值为数组的长度。上面数组中，c默认为5。假如b=1，c=2，那么复制数组内容就是\[1\]
    4.  参数2和参数3如果是负数，则从末尾开始数，例如-1则表示数组最后一个元素的索引，注意参数2包含，参数3不包含该位置
    5.  通过参数2和参数3，从数组中找到了要被复制的部分。然后现在要决定将数组复制在哪里。
    6.  查看参数1，确定将数组从哪个索引位置开始替换，默认值为0。替换对应位置的数组元素。
    7.  不会超出数组原有长度
    8.  返回被修改后的数组
    
      
    流程解释：
    
    > a=1,b,c默认值。于是b=0,c=5，复制内容为\[1,2,3,4,5\]，从下标1开始替换。于是数组变为\[1,1,2,3,4\]。注意，不会超出
    
        [1, 2, 3, 4, 5].copyWithin(1);    //[1, 1, 2, 3, 4]
    
      
    
    
    > a=1,b=3,c默认。于是c=5，复制内容为\]4,5\]。从下标1开始替换，于是数组变为\[1,4,5,4,5\]
    
        [1, 2, 3, 4, 5].copyWithin(1,3);    //[1, 4, 5, 4, 5]
    
      
    
    
    > a=1,b=2,c=-2。于是c=3，复制内容为\[3\]。从下标1开始替换，于是数组变为\[1,3,3,4,5\]
    
        [1, 2, 3, 4, 5].copyWithin(1,2,-2);    //[1, 3, 3, 4, 5]
    
    #### 2.2、数组的填充 ####
    
    > arr.fill(value)  
    > arr.fill(value, start)  
    > arr.fill(value, start, end)
    
    效果是将数组用数值填充。
    
    参数1表示用于填充的值；  
    参数2表示填充的起始索引（含）；  
    参数3表示填充的末尾索引（不含）；  
    如果数组原位置有值，会覆盖原位置的值。
    
        new Array(3).fill(3);    //[3,3,3]，填充
        [1,2].fill(3);    //[3,3]，会覆写
        [0, 0, 0].fill(1, 1);    //[0,1,1]，可以设置起始填充位置
        [0, 0, 0].fill(1, 0, 1);    //[1,0,0]，也可以设置终止填充位置
    
    如果按引用传递类型的话，填充的时候是同一个值。
    
        var a = {};
        var arr = new Array(3).fill(a);
        arr;    //[{}, {}, {}]
        arr[0] === arr[1];    //true
    
    #### 2.3、数组的遍历 ####
    
    > arr.keys()  
    > arr.values()  
    > arr.entries()
    
    用于遍历数组，分别可以取index，value和index + value。
    
    **注意：chrome、IE、火狐（至少53.0版本）不支持arr.values()，而edge支持**
    
    用法是通过for…of方法来使用，比较类似for…in方法。
    
    如示例代码：
    
        var arr = ["a", "b", "c"];
        for (let key of arr.keys()) {
            console.log(key);
        }
        //0
        //1
        //2
    
        //注意兼容性问题
        var arr = ["a", "b", "c"];
        for (let val of arr.values()) {
            console.log(val);
        }
        //"a"
        //"b"
        //"c"
    
        var arr = ["a", "b", "c"];
        
        //let kv又可以写成let [key, val]这种形式
        for (let kv of arr.entries()) {
            console.log(kv);
        }
        //[0, "a"]
        //[1, "b"]
        //[2, "c"]
    
    另外，以上方法返回的是一个Iterator（遍历器/迭代器）对象，可以通过该对象来遍历整个数组。具体来说请看以下示例代码：
    
        var arr = ["a", "b", "c"];
        var obj = arr.entries();    //obj通过next方法来遍历，此时obj指向该数组的起始位置（数组的第一个元素之前）
        var first = obj.next();
        //first:{done:false, value:[0,"a]}
        //此时first是obj遍历到第一个对象后的结果，obj对象已经迭代到第一个元素
        
        var second = obj.next();
        //second:{done:false, value:[1,"b"]}
        var third = obj.next();
        //third:{done:false, value:[2,"c"]}
        
        var end = obj.next();
        //end:{done:true, value:undefined}
        //此时遍历结束，因此done为true，并且value为undefined
    
    另外，这个遍历器对象，只有next方法，而next方法会更新他自身状态。
    
    也只有通过next方法返回的值（而非遍历器对象），才能获知当前是否遍历结束，以及遍历到当前目标的值是什么。
    
    #### 2.4、找到元素和元素的索引 ####
    
    > arr.find(callback\[, thisArg\])
    
    通过回调函数，查找到符合条件的第一个元素，并返回。
    
    参数1是一个函数，这个函数会遍历整个数组。它有三个参数，分别是：当前元素，当前元素的索引，整个数组。有些类似arr.forEach，当返回值为true的时候，筛选成功，终止其后继续执行的代码。
    
    参数2是回调函数中this指向的对象，参考其他此类api理解即可。
    
    示例代码。
    
        var a = {
            num: 1
        }
        var b = {
            num: 2
        }
        var c = {
            num: 3
        }
        var arr = [a, b, c];
        var result = arr.find(function (item, index, array) { 
            console.log(item.num, index);   //会依次输出1 0和2 1
            if (item.num > 1) {
                return true;
            } else {
                return false;
            }
        })
        console.log(result);    //{num: 2}
        console.log(b === result);  //true，说明不是创建一个全新的元素并返回
    
    > arr.findIndex(callback\[, thisArg\])
    
    和arr.find几乎一样，唯一区别是返回的是索引，而非数组元素。
    
    将上面代码修改为如下后，返回值为1
    
        .....
        var result = arr.find(function (item, index, array) {
            ...
        })
        console.log(result);    //1
    
    类似：
    
        ...
        [a, b, c].indexOf(b);    //1
    
    但相对来说，find和findIndex，扩展性更强（因为可以用回调函数），并且支持对NaN的查找（因为逻辑可以自己写）。
    
    #### 2.5、查看数组是否包含 ####
    
    > arr.includes(searchElement)  
    > arr.includes(searchElement, fromIndex)
    
    2.4的方法，是通过作为参数的函数的返回值，来返回你需要的元素、或元素的索引，比较类似arr.indexOf()。
    
    而这个更加类似indexOf()，这个方法直接传你要查找的元素，他只告诉你有、或没有。
    
    indexOf()当有的时候返回非负整数，没有的时候返回-1。
    
    使用这个方法需要注意以下几点：
    
    1.  可以判断NaN是否包含（indexOf()不行）；
    2.  永远记住按引用传递类型，查看的是引用的对象是否一致。例如：`[{}].includes({}); //false`；
    3.  虽然兼容性对于现代浏览器还可以，但小心某些低版本的现代浏览器不支持；
    
    #### 2.6、数组的空位 ####
    
    具体去查看[阮一峰的博客][Link 1]吧。
    
    总而言之，良好的代码习惯是不要写类似
    
        var arr = [,,];
        //或
        var arr = new Array(10);
    
    这样的声明代码。而是写
    
        var arr = [undefined, undefined, undefined];
        //或
        var arr = new Array(10);
        arr.fill(undefined);
    
    可以避免很多莫名其妙出现的bug。

[Link 1]: http://es6.ruanyifeng.com/#docs/array#数组的空位