ES6学习笔记之数组

1.拓展运算符

含义

拓展运算符是三个点（...），功能是将数组或类数组对象展开成一系列用逗号隔开的值。如下面代码：

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

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

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

let show = (a, b, c) => console.log(a + b + c);

var arr = [1, 2, 3];

//传统写法

show(arr[0], arr[1], arr[2]);   //6

//使用拓展运算符

show(...arr);   //6

注意，只有函数调用时，拓展运算符才可以放在圆括号中，否则会报错。如：

console.log((...arr));　　//报错

替代函数的 apply 方法

由于拓展运算符可以展开数组，所以不再需要 apply 方法。（apply方法就是调用一个对象的一个方法，用另一个对象替换当前对象）

//之前

function f1(x, y, z) {

    console.log(x + y + z);

}

var arr1 = [0, 1, 2];

f1.apply(null, arr1);   //3

//ES6

let f2 = (x, y, z) => {

    console.log(x + y + z);

}

let arr2 = [0, 1, 2];

f2(...arr2);    //3

拓展运算符的应用

复制数组
数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，并不是克隆了一个全新的数组。如下面代码：

const a1 = [1, 2];

const a2 = a1;

a2[0] = 2;

console.log(a1); //[ 2, 2 ] 修改 a2，会直接导致 a1 的变化

解决办法：
ES5只能用变通的方法来复制数组。下面代码中，a1 会返回原数组的克隆，再修改 a2 就不会对 a1 有影响了。

//ES5

//concat() 方法用于连接两个或多个数组。

//该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

const a1 = [1, 2];

const a2 = a1.concat();

a2[0] = 2;

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

ES6中，拓展运算符提供了复制数组的简便写法。

const a1 = [1, 2];

//写法一：

const a2 = [...a1];

//写法二：

const [...a2] = a1;

上面两种写法，a2 都是 a1 的克隆。

合并数组
```
//ES5

const arr1 = [1, 2];

const arr2 = arr1.concat([2, 1]);

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

//ES6

const arr3 = [...arr1, ...arr2];

console.log(arr3);  //[ 1, 2, 1, 2, 2, 1 ]
```
这两种方法都是浅拷贝（浅拷贝就是拷贝了对象的引用，当原对象发生变化的时候，拷贝对象也跟着变化），如果修改了原数组的成员，会同步反映到新数组。
与解构赋值结合
拓展运算符可以与结构赋值结合起来，用于生成数组。如果将拓展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
```
const [first, ...rest] = [1, 2, 3, 4, 5];

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

字符串
拓展运算符还可以将字符串转为真正的数组

let arr = [...'hello'];

console.log(arr);

//[ 'h', 'e', 'l', 'l', 'o' ]

实现了 Iterator 接口的对象
任何定义了遍历器（Iterator）接口的对象，都可以用拓展运算符转为真正的数组
Map 和 Set 解构，Generator 函数
拓展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用拓展运算符，比如 Map 结构。
```
let map = new Map([

    [1, 'one'],

    [2, 'two'],

]);

let arr = [...map.keys()];

console.log(arr);   //[ 1, 2 ]
```
Generator函数运行后，返回一个遍历器对象，因此也可以使用拓展运算符。
```
const go = function* (){

    yield 1;

    yield 2;

    yield 3;

};

let arr = [...go()];

console.log(arr);   //[ 1, 2, 3 ]
```
上面代码中，变量 go 是一个 Generator 函数，执行后返回的是一个遍历器对象，对这个遍历器对象执行拓展运算符，就会将内部遍历得到的值，转为一个数组。

2. Array.from()

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

let arrayLike = {

    '0': 'a',

    '1': 'b',

    length: 2

};

//ES5的写法

var arr1 = [].slice.call(arrayLike);

console.log(arr1);  //[ 'a', 'b' ]

//ES6的写法

let arr2 = Array.from(arrayLike);

console.log(arr2);  //[ 'a', 'b' ]

上面是一个类似数组的对象，Array.from 都可以将它们转为真正的数组。所谓类似数组的对象，本质特征只有一点，即必须有 length 属性。因此，任何有length 属性的对象，都可以通过Array.from 方法转为数组，而此时拓展运算符就无法转换。

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

let arrayLike = {

    '0': 'a',

    '1': 'b',

    '2': 2,

    length: 3

};

let arr1 = Array.from(arrayLike, x => x * x);

let arr2 = Array.from(arrayLike).map(x => x * x);

let arr3 = Array.from([1, 2, 3], x => x * x);

console.log(arr1, arr2, arr3);

//[ NaN, NaN, 4 ] [ NaN, NaN, 4 ] [ 1, 4, 9 ]

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

3. Array.of()

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

let arr1 = Array.of(1, 2, 3);

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

Array(); //[]

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

Array(1, 2); //[1,2]

上面代码中，Array 方法没有参数，一个参数，两个参数时，返回的结果都不一样。只有当参数个数不少于两个时，Array() 才会返回由参数组成的新数组。参数只有一个时，表明指定数组的长度。

Array.of基本上可以用来替代 Array() 或 new Array()，因为不存在参数不同导致的重载。它的行为非常统一。Array.of 方法总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

Array.of 方法可以用以下代码模拟实现。

function ArrayOf (){

    return [].slice.call(arguments);

}

4.数组实例的 copyWithin()

数组实例的 copyWithin() 方法，在当前数组内部，将指定位置的成员复制到其他位置上（会覆盖原有成员），然后返当前数组。

它接受三个参数：

target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
start（可选）：从该位置开始读数据，默认为0.如果为负值，表示从末尾开始计算
end（可选）：到该位置前停止读数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

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

这三个参数都应该是数值，如果不是，会自动转化为数值。上面代码表示将从3号位置直到数组结束的成员（4和5），复制到 0 号位开始的位置，结果覆盖了原来的 1 和 2.

//将 3号位复制到 0号位

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

//-2 表示倒数第二个位置，-1 表示倒数第一个位置

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

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

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

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

这两个方法都可以接受第二个参数，用来绑定回调函数的 this 对象。并且，这两个方法都可以发现 NaN ，弥补了数组的 indexof 方法的不足。

//找出数组中第一个小于 0 的成员

console.log([1, 2, -3, 4, -5].find((n) => n < 0));  //-3

//找出数组中第一个大于 5 的成员位置

console.log([1,3,6,2].findIndex((n) => n>5));   //2

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

function f(v){

    return v > this.age;

}

let person = {name: 'lisi', age : 12};

//find 函数接收了第二个参数 person 对象，回调函数中的 this 对象指向 person 对象

console.log([11, 21, 13, 9].find(f, person));   //21

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

console.log([NaN].indexOf(NaN));    //-1

console.log([NaN].findIndex(y => Object.is(NaN, y)));   //0

6.数组实例的 fill()

fill 方法使用给定值，填充一个数组。fill 方法用于空数组的初始化非常方便，数组中已有的元素，会被全部抹去。fill 方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

//fill 方法

new Array(3).fill(7);   //[ 7, 7, 7 ]   (数组初始化)

console.log([1, 2, 3].fill(2)); //[ 2, 2, 2 ] (数组中已有的元素，会被全部抹去)

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

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

//如果填充的类型为对象，那么被赋值的是同一个内存地址的对象

let p = { age:12 }

let arr1 = new Array(3).fill(p);

console.log(arr1);  //[ { age: 12 }, { age: 12 }, { age: 12 } ]

arr1[0].age = 22;

console.log(arr1);  //[ { age: 22 }, { age: 22 }, { age: 22 } ]

console.log(p); //{ age: 22 }

7. 数组实例的 entries(), keys() 和 values()

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

for (let index of ['a', 'b'].keys()){

    console.log(index);

}

//0

//1

for (let elem of ['a', 'b'].values()){

    console.log(elem);

}

//a

//b

for (let [index, elem] of ['a', 'b'].entries()){

    console.log(index, elem);

}

//0 'a'

//1 'b'

8. 数组实例的 includes()

Array.prototype.includes 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的 includes 方法类似。ES2016 引入该方法。

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

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

console.log([1, 2, 3].includes(3, 1));  //true (从 1 号位置开始搜索 3 )

console.log([1, 2, 3].includes(3, -2)); //true (从倒数第二个位置开始搜索 3 )

console.log([1, 2, 3].includes(3, -7)); //true (倒数的位置大于数组的长度，则会重置为从 0 开始)

9. 数组实例的 flat()，flatMap()

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

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

[1, 2, [3, [4, 5]]].flat(2.8);    //[1, 2, 3, 4, 5]   (flat() 方法的参数写成一个整数，表示想要拉平的层数，默认为 1 )

[1, [2, [3, 4, [5]]]].flat(Infinity);   //[1, 2, 3, 4, 5]   (用Infinity作参数，不管有多少层，都转成一维数组)

[1,2, , 3].flat();  //[1, 2, 3] (原数组有空位， flat() 方法会跳过空位)

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

//相当于[ [1, 2], [2, 4], [3, 6]].flat()

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

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

//相当于 [[[2], [4], [6]]].flat()

[1, 2, 3].flatMap(x => [[x * 2]])   //[ [2], [4], [6] ]

10. 数组的空位

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

Array(3)    //[, , ,]

上面代码中，Array(3) 返回一个具有 3 个空位的数组。

注意，空位不是 undefined，一个位置的值等于 undefined，依然是有值的。空位是没有任何值，in 运算符可以说明这一点。

0 in [undefined, undefined ,undefined]  //true

0 in [, , ,]    //false

上面代码说明，第一个数组的 0 号位置是有值的，第二个数组的 0 号位置没有值。