• 扩展运算符

1.扩展运算符的使用方法

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

//函数调用
var arr = [1, 2, 3];
function getArr(arr) {
    return [...arr];
}
console.log(getArr(arr)); //[1, 2, 3]

function sum(num1, num2, num3) {
    return num1 + num2 + num3;
}
console.log(sum(1, 2, 3)); //6
console.log(sum(...arr)); //6

//如果扩展运算符后面是一个空数组，则不产生任何效果。
console.log(...[], 1); //1

//扩展运算符后面还可以放置表达式。
let x = 1;
console.log(...(x > 0 ? ["a"] : [])); //a

2.扩展运算符的应用
（1）复制数组

//复制数组
const a1 = [1, 2];
const a2 = a1; //数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。
a2[0] = 2;
console.log(a1); //[2, 2];

//es5
const b1 = [1, 2];
const b2 = b1.concat();
b2[0] = 2;
console.log(b1); //[1, 2];

//es6
const c1 = [1, 2];
const c2 = [...c1]; //写法一
//const [...c2] = c1; //写法二
c2[0] = 2;
console.log(c1); //[1, 2];

（2）合并数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
//es5
console.log(arr1.concat(arr2)); //[1, 2, 3, 4, 5, 6]
//es6
console.log([...arr1, ...arr2]); //[1, 2, 3, 4, 5, 6]

//以上打印的是用两种不同方法合并而成的新数组，但是它们的成员都是对原数组成员的引用，这就是浅拷贝。如果修改了原数组的成员，会同步反映到新数组。
arr1.push(77);
arr2.push(88)
console.log(arr1.concat(arr2)); //[1, 2, 3, 77, 4, 5, 6, 88]
console.log([...arr1, ...arr2]); //[1, 2, 3, 77, 4, 5, 6, 88]

（3）与解构赋值结合

const list = [1, 2, 3, 4, 5];
// const a = list[0], rest = list.slice(1); //es5
const [a, ...rest] = list;
console.log(a); //1
console.log(rest); //[2, 3, 4, 5]

（4）字符串

console.log([..."hello"]); //["h", "e", "l", "l", "o"]

• Array.from()

Array.from方法用于将类数组对象和可遍历对象转为真正的数组。

let arrayLike = {
    "0": "ciel",
    "1": "frank",
    length: 2
};
//es5
var arr1 = [].slice.call(arrayLike);
console.log("arr1", arr1); //["ciel", "frank"]
var arr2 = Array.prototype.slice.call(arrayLike);
console.log("arr2", arr2); //["ciel", "frank"]

//es6
let arr3 = Array.from(arrayLike);
console.log("arr3", arr3); //["ciel", "frank"]

• Array.of()

Array.of方法用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

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

console.log(Array.of()); //[]
console.log(Array.of(undefined)); //[undefined]
console.log(Array.of(3)); //[3]
console.log(Array.of(1, 2, 3)); //[1, 2, 3]

• 数组实例的 copyWithin()

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

copyWithin()方法接受三个参数：
1.target（必需）：从该位置开始替换数据。如果为负值，表示倒数。2.start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
3.end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

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

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

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

var aaa = [1, 2, 3, 4, 5].find(function(value, index, array) {
    return value > 2
});
console.log(aaa); //3

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

var aaa = [1, 2, 3, 4, 5].findIndex(function(value, index, array) {
    return value > 2
});
console.log(aaa); //2

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

function getAge(age) {
    return age > this.age;
}
let person = {
    name: "ciel",
    age: 10
};
console.log([10, 20, 30].find(getAge, person)); //20

• 数组实例的 fill()

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

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

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

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

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

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

entries()，keys()和values()用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for(let index of ["a", "b"].keys()) {
    console.log(index);
}
//0
//1

for(let item of ["a", "b"].values()) {
    console.log(item);
}
//a
//b

for(let [index, item] of ["a", "b"].entries()) {
    console.log(index, item);
}
//0 "a"
//1 "b"

• 数组实例的 includes()

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

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

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

console.log([1, 2, 3].includes(2, 2)); //false
console.log([1, 2, 3].includes(3, -1)); //true

• 数组实例的 flat()，flatMap()

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

console.log([1, 2, [3, 4], 5].flat()); //[1, 2, 3, 4, 5]
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].flat(Infinity)); //[1, 2, 3, 4, 5]

如果原数组有空位，flat()方法会跳过空位。

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

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

console.log([1, 2, 3].flatMap((x) => [x, x * 2])); //[1, 2, 2, 4, 3, 6]
//flatMap()只能展开一层数组。
console.log([1, 2, 3].flatMap((x) => [x, [x * 2]])); //[1, [2], 2, [4], 3, [6]]

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

arr.flatMap(function callback(currentValue[, index[, array]]) {
  // ...
}[, thisArg])

• 数组的空位

数组的空位，指数组的某一个位置没有任何值。ES5 对空位的处理很不一致，大多数情况下会忽略空位。ES6 则是明确将空位转为undefined。由于空位的处理规则非常不统一，所以建议避免出现空位。

参考资料：阮一峰老师的 ECMAScript 6 入门教程