ES6 —（数组扩展）

1、扩展运算符

  扩展运算符（...）将一个数组转为用逗号分隔的参数序列。扩展运算符后面可以放置表达式，也可以是一个空数组，若是空数组，则不产生任何效果。

const arr = [
                ...(x > 0 ? ['a'] : []),
                'b'
            ];
[...[], 1]   // [1]

用途
  （1）用于函数调用。并且，扩展运算符与正常的函数参数可以结合使用。

function f(a,b,c,d,e) {}
var arg1 = [1,2,3,4,5];
f( ...arg1);  // 相当于 f(1, 2, 3, 4, 5);
var arg2 = [3,4];
f(1, 2, ...arg2, 5); // 相当于 f(1, 2, 3, 4, 5);

  （2）替代数组的 apply 方法。
  由于扩展运算符可以展开数组，所以不需要 apply 方法，将数组转为函数的参数了。

function f(x, y, z){}
var args = [1, 2, 3];
f.apply(null, args); // ES5 的写法
f(...args);  // ES6 的写法
--------------------------------------------
// 将 arr2 数组添加到 arr1 数组的尾部
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2); // ES5 的写法
arr1.push(...arr2); // ES6 的写法

  （3）合并数组

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = arr1.concat(arr1, arr2); // ES5 的写法
var arr4 = [...arr1, ...arr2];  // ES6 的写法

  （4）与解构赋值结合，并且扩展运算符只能放在参数的最后一位，否则会报错。

const [first, ...rest] = [1, 2, 3]; // first => 1, rest => [ 2, 3]
const [first, ...rest] = []; // first => undefined, rest => []
const [...rest, first] = [1, 2, 3]; // 报错， 

  （5）函数的返回值，js的函数只能有一个返回值，如果需要返回多个值，只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。
  （6）字符串，扩展运算符可将字符串转为真正的数组。并且能正确识别 32 位的 Unicode 字符。

[...'hello'] => ['h', 'e', 'l', 'l', 'o']
'x\uD83D\uDE80y'.length // 4, 错误未正确识别出 32 位的 Unicode 字符
[...'x\uD83D\uDE80y'].length // 3， 正确识别出了 32 位的 Unicode 字符

  （7）实现了 Iterator 接口的对象，都可以用扩展运算符转为真正的数组。如 Map 和 Set 结构， Generator 函数。

2、Arry.from()

   Arry.from() 方法将：类似数组的对象（所谓类似数组对象，本质特征只有一点，即必须有 length 属性），可遍历对象（实现了 Iterator 接口的对象），转为真正的数组。返回一个数组。
   Arry.from() 方法还可以接受第二个参数，作用类似于数组的 map 方法，用于对每个元素进行处理，将处理后的值放入返回的数组。

Arry.form('hello') => ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b']);
Array.from(namesSet) => ['a', 'b']
let arr = {
            '0': 'a',
            '1': 'b',
            length: 3
          } 
var arr1 = [].slice.call(arr);  // ES5 ['a', 'b']
var arr2 = Array.from(arr);    //ES6 ['a', 'b',undefined]

可以看出，slice 忽略空属性，而 Array.from() 将空属性保存为 undefined ，使原对象的长度不变。

3、Array.of()

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

Array()  => []
Array(3) => [ , , ,]    // Array参数少于2时， 参数表示数组长度
Array(3,2,1) => [3, 2, 1]  // Array参数不少于2时，返回有参数组成的新数组
--------------------------------------------------------
Array.of(3)  => [3]
Array.of(3).length => 1  
Array.oc(3,2,1) => [3, 2, 1]

4、数组实例的 copyWithin()

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

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数：
- target （必需）：从该位置开始替换数据
- start （可选）：从该位置开始读取数据，默认为0，如果负值，表示倒数（从后往前）
- end （可选）：到该位置前停止读取数据，默认为数组长度，如果为负值，表示倒数（从后往前）

[0, 1, 2, 3, 4, 5].copyWithin(2,3,4) => [0, 1, 3, 3, 4, 5]

5、数组实例的 find() 、findeIndex()

  数组实例的 find() 方法，用于找到第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员一次执行该回调函数，直到找到第一个返回值为 true 的成员，然后返回该成员。
  数组实例的 findIndex() 方法的用法与 find 类似，返回第一个符合条件数组成员的位置，如果所有成员都不符合条件，则返回 -1。
  以上两个方法都可以接受第二个参数，用于绑定回调函数的 this 对象。
  这两个方法都可以发现 NaN ，弥补了 indexOf() 方法的不足。

[NaN].findIndex(y => Object.is(NaN, y))  => 0

6、数组实例的 fill()

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

7、数组实例的 enteries() keys() 和 vauels

  ES6 提供这三个新方法用于遍历数组，他们都返回一个遍历器对象，可以用于 for...of 循环进行遍历。
- keys() 是对键值名遍历
- values() 是对键值遍历
- entries() 是对键值对遍历

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

8、数组实例的 includes()

  Array.prototype.includes() 该方法返回一个布尔值，表示某个数组是否包含给定的值与字符串的 indcludes() 方法类型。能识别 NaN。
  该方法的第二个参数表示搜索的起始位置，默认为 0 ，如果第二个参数为负数，则表示倒数位置（从后往前）。

9、数组的空位

  数组的空位指，数组的某一个位置没有任何值。
注意：一个位置的值等于 undefined,该位置依然有值。 空位是没有任何值。

0 in [undefined] => true
0 in [ , , ,] => false 

ES5 对空位的处理，很多情况下会忽略空位。
- forEach() filter() every() 和 some() 都会跳过空位。
- map() 会跳过空位，但会保留这个值。
- join() 和 toString() 会将空位视为 undefined， 而 undefined 和 null 会被处理成空字符串。
ES6 则是明确将空位转为 undefined。
   如 Array.from()、 扩展运算符（...、） enteries()、 keys() 、 vauels() 、find() 和 findIndex() 将空位转为 undefined。
   copyWithin() 会将空位一起拷贝。
   fill() 会将空位视为正常的数组位置。
   for...of 循环也会遍历空位。

10、将函数参数转化为数组（不是ES6知识）

方法一：
var args = Array.prototype.slice.call(arguments);
方法二：
var args = [].slice.call(arguments, 0);
方法三：
var args = [];
for(var i = 0; i < arguments.length; i++){
    args.push(arguments[i]);
    或 args[i] = arguments[i];
}

阮一峰：ECMAScript 6入门