一、扩展运算符
扩展运算符是三个点...。它好比rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3])
// 1 2 3
扩展运算符可以与函数参数结合使用，较为灵活：
function f(v, w, x, y, z) { }
const args = [0, 1]
f(-1, ...args, 2, ...[3])
扩展运算符后面还可以写表达式：
const arr = [
...(x > 0 ? ['a'] : [])
'b'
]
下面介绍扩展运算符的几种用法
1. 替代apply方法
由于扩展运算符可以展开数组，所以就不需要apply方法了，我们可以直接将数组当做参数传入函数中，比如：
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
2. 复制数组
当然，这里也只是复制了数组的指针而非真正的复制。
// ES5写法
var a = [1,2,3]
var b = a.concat()
// ES6写法
var a = [1,2,3]
var b = [...a]
// 也可以这么写，利用了解构赋值
vat [...b] = a
3. 合并数组
同样，这里也是浅拷贝。
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
4. 与解构赋值结合使用
扩展运算符可以与解构赋值结合起来，用于生成数组。
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
const [first, ...rest] = [];
first // undefined
rest // []
const [first, ...rest] = ["foo"];
first // "foo"
rest // []
值得注意的是，扩展运算符必须放在参数的最后一位，否则会报错，这里我把它也理解为rest，即扩展运算符已经代表剩下的部分了，如果后面再有参数，也没法再复制了，会造成不完全解构。
5. 字符串的转换
扩展运算符可以把字符串转为真正的数组，以前在使用python的时候，我们可以通过list()轻易的将一个字符串转为数组，但是在JavaScript中就比较困难了
a = 'string'
b = []
for (let i in a) {
b.push(a[i])
}
console.log(b) // ["s", "t", "r", "i", "n", "g"]
但是如果使用扩展运算符就会变得非常简单
a = [...'string']
console.log(a) // ["s", "t", "r", "i", "n", "g"]
这种写法还有一个非常棒的地方就是能够正确识别四个字节的Unicode字符。
'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3
6. 部署了Iterator接口的对象的转换
任何定义了遍历器（Iterator）接口的对象），都可以用扩展运算符转为真正的数组。
Number.prototype[Symbol.iterator] = function*() {
let i = 0;
let num = this.valueOf();
while (i < num) {
yield i++;
}
}
console.log([...5]) // [0, 1, 2, 3, 4]
上面代码中，先定义了Number对象的遍历器接口，扩展运算符将5自动转成Number实例以后，就会调用这个接口，就会返回自定义的结果。
对于没有部署Iterator接口的对象，扩展运算符无法将其转换为数组，而是会报错。
二、Array.from()
1. 数组的生成和转换
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构Set和Map）。
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']
总的来说只要是部署Iterator接口的对象，都可以被Array.from()转为真正的数组，前面提到扩展运算符也有相同的作用，那么两者的区别在哪里呢：区别在于扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。
obj = {
'0':'name',
'1':'age',
'3':'tel',
'length':5
}
[...obj] // Uncaught TypeError: object is not iterable
Array.from(obj) // ["name", "age", undefined, "tel", undefined]
我们可以用该方法生成长度固定的数组：
Array.from({ length: 3 }) // [ undefined, undefined, undefined ]
2. Array.from()的回调函数
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]
比如，我们可以通过该方法将数组中的undefined转为0:
Array.from([1,2,3,undefined,5], item => item || 0) // [1, 2, 3, 0, 5]
如果map函数里面用到了this关键字，还可以传入Array.from的第三个参数，用来绑定this。
三、Array.of()
Array.of方法用于将一组值，转换为数组。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。比如：
arr = new Array(3) // [empty × 3]
Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
四、find()和findIndex()
数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。类似于filter，只不过是filter会把所有符合条件的值都找出来，而find只找到第一个
[1, 4, -5, 10].find((n) => n < 0) // -5
[1, 4, -5, 10].filter((n) => n < 0) // [-5]
find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。
function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); // 26
五、copyWithin()
数组实例的copyWithin()方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三个参数：
- target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
- start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
- end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
六、fill()方法
fill方法使用给定值，填充一个数组。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
该方法可以用来初始化数组，比如：
let arr = new Array(3).fill('jack')
console.log(arr) // ["jack", "jack", "jack"]
当然我们亦可以通过其他方法初始化数组，比如：
let arr = Array.from({length:3}, () => 'jack')
console.log(arr) // ["jack", "jack", "jack"]
fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
七、includes()方法
Array.prototype.includes 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。
虽然我们可以使用indexOf来判断一个数组中是否含有某一元素，但是indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符===进行判断，这会导致对NaN的误判。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
八、flat(), flatMap()
数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。该方法可以接受1个参数表示需要拉平的层数，默认为1：
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
[1, 2, [3, [4, 5]]].flat(Infinity) // 表示将多维数组变成一位数组
// [1, 2, 3, 4, 5]
我们可以用该方法去除数组中的空项：
[1,2,,4,[5,6]].flat(0) // [1,2,4,[5,6]]
flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
该方法只能拉平一层。flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。
九、数组的空位
空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点。
0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false
ES5 对空位的处理，已经很不一致了，大多数情况下会忽略空位。
-
forEach(),filter(),reduce(),every()和some()都会跳过空位。 -
map()会跳过空位，但会保留这个值 -
join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。
// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1
// filter方法
['a',,'b'].filter(x => true) // ['a','b']
// every方法
[,'a'].every(x => x==='a') // true
// reduce方法
[1,,2].reduce((x,y) => x+y) // 3
// some方法
[,'a'].some(x => x !== 'a') // false
// map方法
[,'a'].map(x => 1) // [,1]
// join方法
[,'a',undefined,null].join('#') // "#a##"
// toString方法
[,'a',undefined,null].toString() // ",a,,"
ES6 则是明确将空位转为undefined。
网友评论