数组的扩展

扩展运算符

扩展运算符，三个点...。将一个数组（其实只要是一个可迭代的对象即可）转为用逗号分隔的参数序列。

const o = {}
console.log(...o); // Uncaught TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function

报错中明显地提示我们了，扩展运算符接收一个可迭代的对象。如果你看过我之前的变量的解构赋值文章，那么很快就能知道哪些是可迭代的对象，甚至我们可以自己实现一个可迭代对象。

举例，Set对象是一个可迭代对象：

const sets = new Set([1,2]);
console.log([...sets]); // [1, 2]

扩展运算符的一些作用：

替代函数的apply()方法

let arr = [1,2,3];
let max1 = Math.max.apply(null, arr); // 3
let max2 = Math.max(...arr); // 3

复制数组（不过需要注意浅拷贝问题）

let arr = [1,2,3];
let arr2 = arr.slice();
let arr3 = [...arr];
arr2[0] = 4;
console.log(arr2, arr); // [4, 2, 3], [1, 2, 3]

arr3[0] = 5;
console.log(arr3, arr); // [5, 2, 3], [1, 2, 3]

Array.from

Array.from()用于将类数组对象或可迭代的对象转成数组。

// 类数组
let obj = {
  0: '0',
  1: '1',
  length: 2
}
console.log(Array.from(obj)); // ['0', '1']

// 可迭代对象
const map = new Map();
map.set(0, '0');
map.set(1, '1');
console.log(Array.from(map)); // [[0, '0'], [1, '1']]

Array.from第二个参数接受一个函数作为参数，作用类似于数组的map()方法。

// 提供一个实用的创建数组的方法
Array.from({length: 3}, (value, index) => index); // [0, 1, 2]

Array.of

Array.of()用于将一组值转换为数组。

Array.of(1,2,3) // [1,2,3]

find, findIndex, findLast, findLastIndex

find()用于找出第一个符合条件的数组成员。
findIndex()功能同find()相同，只不过返回index。
findLast()和findLastIndex()功能同上，只不过从后往前找。

const arr = [1,2,-1,-2];

console.log(arr.find(v => v > 0)); // 1
console.log(arr.findIndex(v => v > 0)); // 0
console.log(arr.findLast(v => v < 0)); // -2
console.log(arr.findLastIndex(v => v < 0)); // 3

fill

fill(value, start?, end?)用于给数组填值。直接修改了原数组

let arr = [1,2,3,4,5];
arr.fill(4)
console.log(arr.slice()); // [4, 4, 4, 4, 4]
arr.fill(6, 1, 4);
console.log(arr); // [4, 6, 6, 6, 4]，从start开始，但不包括end之间范围的内容被替换

entries, keys, values

用于遍历数组，注意：返回的是一个可迭代对象

let arr = [1,2,3];
console.log(arr.keys().next().value); // 0 键名
console.log(arr.values().next().value); // 1 键值
console.log(arr.entries().next().value); //[0, 1] 键值对

includes

indexOf()的替代品，返回一个布尔值，用于判断数组是否包含某个给定值。

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

flat

拉平数组。接收一个参数，表示需要展开几层，如果传的值是Infinity，表示无限展开，最后始终得到一维数组。

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

手写一个flat方法：

Array.prototype.myFlat = function (num) {
    if (num < 1) {
        return this;
    }

    return this.reduce((sum, cur) => {
        return sum.concat(
            Array.isArray(cur) ? cur.myFlat(num - 1) : cur
        );
    }, []);

};
const arr = [1, 2, [3, [4, [5]]]];

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

另外一些可能用到比较少的方法，不再赘述：

copyWithin
flatMap
at

生成数组的方法之间的区别

let arr1 = new Array(3); // [空属性 × 3]
let arr2 = Array(3); // [空属性 × 3]
let arr3 = Array.from({length: 3}); // [undefined, undefined, undefined]

// 浏览器控制台显示[空属性 × 3]，其实就是[,,]，数组里面是空位，连undefined也不是。我们在声明一个数组时，尽量避免数组里面有空位。

原因参考：Array Initializer

【重学前端】ECMAScript6 - 数组的扩展