ES6之数组的扩展

扩展运算符

扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

btw：rest是ES6中代替arguments的，代表函数的参数。如果扩展运算符是把数组转为用逗号分隔的参数序列，那rest就是把函数参数从序列转变为数组。

（1，2，3）=======》 [1, 2, 3]

• 扩展运算符多用于函数的参数
• 扩展运算符还可以用于表达式

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

• 替代apply方法
  当我们的函数的参数需要为数组的时候（嫌麻烦，懒得把数组变成序列的时候），通常会变相使用apply来达到目的（apply的第一个参数是this所在环境，第二个参数必须为参数组成的数组），这个时候第一个参数设置为null，再把参数放在第二个参数位置即可。但有了扩展运算符，直接…arr，就不用麻烦使用apply了。
• 通过扩展运算符对数组进行合并和浅拷贝

// 合并数组ES5的 写法
1.Array.prototype.push.apply(arr1, arr2);
2.arr1.concat(arr2);
// ES6 的写法
1.arr1.push(...arr2);
2.[...arr1, ...arr2];
3.object.asign([], arr1, arr2) -------------->见ES6之对象的扩展

数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。

// 拷贝数组ES5的 写法
1.const a2 = arrayObj.concat();
2.arrayObj.slice(start, [end])；
//ES6的写法
1.a2 = [...a1]

• 扩展运算符和结构赋值
  扩展运算符只能放在参数的最后一位，否则会报错。
• 扩展运算符用于字符串

[...'hello']
// [ "h", "e", "l", "l", "o" ]

• 任何有实现了 Iterator 接口的对象都能通过扩展运算符转化为数组
  包括NodeList对象，Set对象，Map对象，Generator函数，但是某些类数组对象不可以，比如没有iterator接口的类数组。

Array.from（）

该函数能够把不具有iterator接口的类数组对象转化为真正的数组，同时也可以将有该接口的对象转为数组，同上。

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

不过要注意一点，转化条件是此类数组对象必须要哟length。

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]

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

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

如果map函数里面用到了this关键字，还可以传入Array.from的第三个参数，用来绑定this。

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

如下所示，单反是满足iterator接口的对象的或者有length属性的类数组对象条件的任意原始数据接口，可以用Array.from（）对其转为数组，再使用第二个参数类map函数作用效果来对其进行修改。

Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']

---

Array.of()

Array.of（）和Array（）作用类似，但是有少许不同，前者的参数不论是什么，不论多少个，就会将其转为数组的值；而后者如果只有一个参数，并且为数字n，则会生成一个n个成员的空数组；

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(undefined) // [undefined]
Array.of(3).length // 1
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

Array.of()的模拟

function ArrayOf(){
  return [].slice.call(arguments);
}

---

copyWithin（）

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

注意如果只有end一个参数，那么代表把end后面所有的往前覆盖，但是如果是（start，end1，end2），那就只会把end1，end2之间的值往前覆盖，包括end1不包括end2。

两种写法

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

---

find 和 findindex

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

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

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

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

这两个方法都可以发现NaN，弥补了数组的indexOf方法的不足，indexOf方法无法识别数组的NaN成员

---

fill

fill方法使用给定值，填充一个数组，第二个和第三个参数，用于指定填充的起始位置和结束位置。如果只有一个参数，那么数组所有的值都会被替换为这个参数的值，但是有第二第三个参数则可以指定替换某些值。

arr.fill(value, start, end)

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

let arr = new Array(3).fill({name: "Mike"});
arr[0].name = "Ben";
arr
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

let arr = new Array(3).fill([]);
arr[0].push(5);
arr
// [[5], [5], [5]]

---

entries()，keys()和values()

---

includes（）

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，字符的includes方法类似，第一个参数表示查询的值，第二个参数表示开始查询的位置

indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

---

数组的空位

数组的空位表示，数组某一项没有任何值，比如Array（n）构造出的数组都是只包含空位的数组

Array(3);
[ , , ,]

空位不等于undefined，undefined也是有值的，只不过为undefined罢了，但是空值数组里面的都是无值的。[undefined, undefined, undefined] != [ , , ]

下列代码用in运算符证明 undefined有值，空位无值。注意一点in是循环数组的key，而不是值，而数组的key就是隐形的序列，所以[undefined, undefined, undefined]相当于[0：undefined,1： undefined, 2：undefined]，而undefined属于有值的，所以in操作符的返回值为true。

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

• ES5中大部分会忽略空位
  • forEach(), filter(), reduce(), every() 和some()都会跳过空位。
  • map()会跳过空位，但会保留这个值
  • join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1

• ES6 则是明确将空位转为undefined。

Array.from(['a',,'b'])
// [ "a", undefined, "b" ]