1. 扩展运算符
好比「rest」参数的逆运算，「将一个数组转为以逗号分隔的参数序列」。
let arr1 = [1, 2, 3, 4];
let arr2 = [1, [2, 3], 4];
console.log(...arr1) // 1 2 3 4
console.log(...arr2) // 1 [2, 3] 4
注意只是「解刨」了一层
常常用于函数调用中。
function push(arr, ...numbers) {
arr.push(...numbers);
}
替代函数的apply方法
function f(x, y, z) {
// ...
}
var args = [1, 2, 3];
// ES5
f.apply(null, args);
// ES6
f(...args)
扩展运算符的应用
（1）复制数组
数组是复合数据类型，直接复制的话，只是复制了「指向底层数据结构的指针」，而不是完全克隆一个全新的数组。
let a = [1, 2];
let b = a;
b[0] = 2;
a; // [2, 2]
上面的代码，b不是a的克隆，只是a和b都指向同一份数据的地址。修改b，会导致a的变化。
ES5中用下列方式实现。
// ES5
let a = [1, 2];
let b = a.contact();
b[0] = 2;
a; // [1, 2]
ES6运用扩展运算符
let a = [1, 2, 3];
let b = [...a];
（2）合并数组
let a = [1, 2, 3];
let b = [3, 4, 5]
// ES5
a.concat(b);
// ES6
[...a, ...b]
（3）与解构赋值结合
let list = [1, 2, 3, 4, 5];
// ES5
a = list[0]; rest = list.slice(1);
// ES6
[a, ...rest] = list;
（4）字符串
将「字符串」转为数组。
let string = 'hello';
[...string]; // ['h', 'e', 'l', 'l', 'o'];
（5）实现了 Iterator 接口的对象
任何定义了遍历器（Iterator）接口的对象（参阅 Iterator 一章），都可以用扩展运算符转为真正的数组。
2. Array.from()
此方法可以把这两类对象转化为真正的数组，分别是「类似数组的对象」和「可遍历的对象」。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5
let arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
return p.textContent.length > 100;
});
「注：类似数组的对象，本质只有一个，就是具有「length」属性，任何具有「length」属性的对象，都可以用Array.from转换为真正的数组」
let a = {length: 2};
Array.from(a); // [undefined, undefined];
该方法的「第二个参数」，类似于「map」方法，用于处理每个元素，将处理后的元素返回数组。
let a = [1, 2, 3];
Array.from(a, (x) => x * x); // [1, 4, 9]
Array.from(a).map(x => x * x); // [1, 4, 9]
3. Array.of()
将「一组值」转化为「数组」。
Array.of(3, 11, 8) // [3,11,8]
4. 数组实例的copyWithin()方法
在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会「修改当前数组」。
// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
第一个参数是「从该位置开始替换数据」。
5. 数组实例的find()和findIndex()方法
find方法是找到「第一个符合条件的值」，返回「这个值」，find的参数是条件函数。
[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
「条件函数」可以接受三个参数，分别是：「当前的值」，「当前位置」，「原数组」。
findIndex()方法返回第一个符合条件的元素的「位置」。
6. 数组实例的fill()方法
将给定值「填充」到数组中。
new Array(3).fill(7); // [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2); // ['a', 7, 'c']
fill()也可以接受第二个参数和第三个参数，分别表示：「填充的起始位置」，「填充的结束位置」。
7. 数组实例的flat()和flatMap()方法
数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
但是这样只会「拉平」一层。如果想要「拉平」多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
flatMap()方法，相当于「对数组中每个元素执行一次函数，然后flat()」。该方法返回一个新数组，不改变原数组
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
10. 数组的空位
数组的空位指，数组的某一个位置没有任何值。「注意，空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点。」
0 in [undefined, undefined, undefined]; // true
0 in [ , , ]; // false
- 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」，也就是说不会忽略空位。
entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。
// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]
// keys()
[...[,'a'].keys()] // [0,1]
// values()
[...[,'a'].values()] // [undefined,"a"]
// find()
[,'a'].find(x => true) // undefined
// findIndex()
[,'a'].findIndex(x => true) // 0
网友评论