ES6-数组

参考文章：数组的扩展

一、扩展运算符...

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

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

console.log(...[1, 2, 3])
// 1 2 3

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

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
复制代码

• 该运算符主要用于函数调用。

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42
复制代码

上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。

• 扩展运算符与正常的函数参数可以结合使用，非常灵活。

function f(v, w, x, y, z) { }
const args = [0, 1];
f(-1, ...args, 2, ...[3]);
复制代码

• 扩展运算符后面还可以放置表达式。

const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];
复制代码

• 如果扩展运算符后面是一个空数组，则不产生任何效果。

[...[], 1]
// [1]
复制代码

• 注意，扩展运算符如果放在括号中，JavaScript 引擎就会认为这是函数调用，否则就会报错。

(...[1,2])
// Uncaught SyntaxError: Unexpected number

console.log((...[1,2]))
// Uncaught SyntaxError: Unexpected number
复制代码

上面两种情况都会报错，因为扩展运算符所在的括号不是函数调用，而console.log(...[1, 2])就不会报错，因为这时是函数调用。

• 实现深拷贝

扩展运算符可以实现深拷贝

// 原list改变，新的facadeList不改变。
this.facadeList = [...this.list];
复制代码

序列化和反序列化也可以实现深拷贝

// filesCopy是一个副本，避免被files影响
const filesCopy = JSON.parse(JSON.stringfy(files))
复制代码

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

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

• 下面代码找出数组中第一个小于 0 的成员。

[1, 4, -5, 10].find((n) => n < 0)
// -5
复制代码

• 下面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10
复制代码

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

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2
复制代码

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

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26
复制代码

上面的代码中，find函数接收了第二个参数person对象，回调函数中的this对象指向person对象。

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

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0
复制代码

上面代码中，indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到。

三、Array.from()

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

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

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
复制代码

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

keys()是对键名的遍历

values()是对键值的遍历

entries()是对键值对的遍历

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1
复制代码

五、数组实例的 includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(3, 3);  // false 该方法的第二个参数表示搜索的起始位置，默认为0
复制代码

const authResources = this.getAuthResources() || [];
let passable = false;
if (resourceCode instanceof Array) {
passable = resourceCode.some(rc => authResources.includes(rc));
} else {
passable = authResources.includes(resourceCode);
}
return passable;
复制代码

六、数组实例的 flat()

Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。 flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

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

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
复制代码