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

拓展运算符的应用

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

   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 的克隆。

2. 合并数组
   

   //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 ]

   这两种方法都是浅拷贝（浅拷贝就是拷贝了对象的引用，当原对象发生变化的时候，拷贝对象也跟着变化），如果修改了原数组的成员，会同步反映到新数组。

3. 与解构赋值结合
   拓展运算符可以与结构赋值结合起来，用于生成数组。如果将拓展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

   const [first, ...rest] = [1, 2, 3, 4, 5];
   console.log(rest);  //[ 2, 3, 4, 5 ]

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

   let arr = [...'hello'];
   console.log(arr);
   //[ 'h', 'e', 'l', 'l', 'o' ]

5. 实现了 Iterator 接口的对象
   任何定义了遍历器（Iterator）接口的对象，都可以用拓展运算符转为真正的数组
6. 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 号位置没有值。