ES6中Array数组方法

Array.from()

Array.from() 方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）对象

    let arrayLike = {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    }

    let arr = Array.from(arrayLike);
    console.log(arr); // ["a", "b", "c"]

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

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

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

    let arr = Array.from([1, 2, 3], (x) => x * x);
    console.log(arr);//[1, 4, 9]

Array.from()可以将各种值转为真正的数组，并且还提供map功能。这实际上意味着，只要有一个原始的数据结构，你就可以先对它的值进行处理，然后转成规范的数组结构，进而就可以使用数量众多的数组方法。

    let arr = Array.from({ length: 2 }, () => '暂无数据');
    console.log(arr);//["暂无数据", "暂无数据"]

如果map函数里用到了this关键字，还可以传入Array.from()的第三个参数，用来绑定this

Array.of()

Array.of()方法用于将一组值，转换为数组

    let arr1 = Array.of(1, 2, 3);
    let arr2 = Array.of('a', 'b', 'c');

    console.log(arr1);//[1, 2, 3]
    console.log(arr2);//["a", "b", "c"]

数组实例的copyWithin()

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

可接受三个参数

• target（必须）：从该位置开始替换数组，如果为负值，表示倒数。
• start（可选）：从该位置开始读取数据，默认为0，如果为负值，表示倒数
• end（可选）：到该位置前停止读取数据，默认等于数组长度，如果为负值，表示倒数
  三个参数都应该是数值，如果不是，会自动转为数值

    let arr = [1, 2, 3, 4, 5];
    arr.copyWithin(0, 3);
    //表示将从三号位知道数组结束的成员（4和5），赋值到从0号位开始的位置，所以覆盖掉了1和2
    console.log(arr); //[4, 5, 3, 4, 5]

更多🌰

    //将三号位复制到0位
    console.log(['a', 'b', 'c', 'd', 'e'].copyWithin(0, 3, 4)); //["d", "b", "c", "d", "e"]
    // -2相当于3号位，-1相当于四号位
    console.log([1, 2, 3, 4, 5].copyWithin(0, -2, -1)); //[4, 2, 3, 4, 5]

数组实例的find()和findIndex()

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

    //找出第一个小于0的成员
    let negative = [1, 2, 4, -1, 7].find((x) => x < 0);
    console.log(negative); //-1

举个🌰

    //可接受三个参数，依次为当前的值，当前的位置，原数组
    let num = [1, 7, 10, 16].find(function(value, index, arr) {
        return value > 10;
    })
    console.log(num); // 16

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

    //可接受三个参数，依次为当前的值，当前的位置，原数组
    let num = [1, 7, 10, 16].findIndex(function(value, index, arr) {
        return value > 10;
    })
    console.log(num); // 3

    function f(v) {
        return v > this.age
    }
    let person = { name: "Mr", age: 22 };
    console.log([10, 20, 25, 30].find(f, person)); // 25

这两个方法都可以发现NaN，弥补数组的indexOf方法的不足

    console.log([NaN].indexOf(NaN)); // -1
    //Object.is()是ES6新增的用来比较两个值是否严格相等的方法，与===的行为基本一致。
    console.log([NaN].findIndex(y => Object.is(NaN, y))); // 0

数组实例的fill()

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

    console.log(['a', 'b', 'c'].fill(1)); //[1, 1, 1]

    console.log(new Array(3).fill('a')); //["a", "a", "a"]

fill方法用于空数组的初始化非常方便。数组中已有元素会被全部抹去

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置

    console.log([1, 2, 3, 4].fill('a', 0, 2));//["a", "a", 3, 4]

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

    let arr = new Array(3).fill({ name: 'Mr Wang' });
    arr[0].name = "Mr Li";
    console.log(arr); //[{name: "Mr Li"},{name: "Mr Li"},{name: "Mr Li"}]

    let arr2 = new Array(3).fill([]);
    arr2[0].push('1');
    console.log(arr2);// [["1"],["1"],["1"]]

数组实例的entries()、keys()和values()

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

    for (const iterator of['a', 'b', 'c'].keys()) {
        console.log(iterator);
        // 0
        // 1
        // 2
    }

    for (const iterator of['a', 'b', 'c'].values()) {
        console.log(iterator);
        // a
        // b
        // c
    }

    for (const iterator of['a', 'b', 'c'].entries()) {
        console.log(iterator);
        // [0, "a"]
        // [1, "b"]
        // [2, "c"]
    }

数组实例的includes()

这个方法返回一个布尔值，表示某个数组是否包含给定值

console.log([1, 2, 3].includes(1)); //true
console.log(['a', 'c', 'd'].includes('d')); //true
console.log([1, 2, 3, 4].includes(5)); //false
console.log(['a', 1, NaN].includes(NaN)); //true

该方法的第二个参数表示搜索的其实位置，默认为0。如果第二个参数为负数，则表示倒数位置，如果这个值大于数组长度，则会重置为0开始

数组实例的flat(),flatMap()

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”。该方法返回一个新数组，对原数组没有任何影响

    console.log([1, 2, ['a', 'c']].flat()); // [1, 2, "a", "c"]

flat()默认只会拉平一层，如果想要拉平多层嵌套数组，可以将flat的方法的参数写成一个整数，表示想要拉平的层数，默认为1

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

如果不管有多少层嵌套，都要转成一堆数组，可以用Infinity关键字作为参数

console.log([1, [2, [3, [4, 5, ['a']]]]].flat(Infinity)); // [1, 2, 3, 4, 5, "a"]

• 需要注意的是，如果原数组中有空位，flat()方法会跳过空位

flatMap()方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map())，然后对返回值组成的数组执行flat()方法，该方法返回一个新数组，不改变原数组。

console.log([1, 2, 3].flatMap((x) => [x, x * x]));//[1, 1, 2, 4, 3, 9]

• flatMap()只能展开一层数组

    console.log([1, 2, 3].flatMap((x) => [
        [x, x * x]
    ])); //[[1, 1], [2, 4], [3, 9]]
  

flatMap()方法的参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员，当前数组成员位置（从0开始），原数组。而flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this

数组的空位

数组的空位值就是数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位

console.log(Array(3)); // [, , ,]

注意。空位不是undefined，一个位置的值等于undefined，依然是有值的，空位是指没有任何值。
由于数组的众多方法对空位的处理规则非常不统一，所以建议避免出现空位