用三个点(...
)表示,它如同rest参数的逆运算,将数组转为用逗号分隔的参数序列。扩展就是将一个集合分成一个个的。
console.log(...[1, 2, 3]); // 1, 2, 3
可以用于函数调用
扩展运算符后还可以放置表达式
...(x > 0 ? ['a'] : [])
如果扩展运算符后是一个空数组,则不产生任何效果
[...[], 1] // [1]
可以替代数组的apply方法
扩展运算符的应用
ES5中使用concat方法
const arr1 = ['a', 'b'];
arr1.concat(['c']); // ['a', 'b', 'c']
ES6的合并数组
[...[1, 2, 3], ...[4, 5]]; // [1, 2, 3, 4, 5]
用来生成数组
// ES5
a = list[0]; rest = list.slice(1);
// ES6
[a, ...rest] = list;
如果用于数组赋值,只能将其放在参数的最后一位,否则会报错。
const [...first, last] = [1, 2, 3, 4, 5]; // 报错
函数只能返回一个值,如果要返回多个值,可以使用扩展运算符
将字符串转为真正的数组
[...'hello'] // ['h', 'e', 'l', 'l', 'o']
任何Iterator接口的对象都可以用扩展运算符转为真正的数组。
扩展运算符内部调用的是数据结构的Iterator接口,因此只要具有Iterator接口的对
象,都可以使用扩展运算符。
将类似数组的对象、可遍历对象转为真正的数组
只要是部署了Iterator接口的数据结构,Array.from都能转为数组。
Array.from('he');
// ['h', 'e']
类似数组的对象本质就是有length属性
Array.from还可以接受第二个参数,作用类似map方法,用来对每个元素进行处理,将处理的值放入返回的数组中。
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * X);
另一个应用,将字符串转为数组,返回字符串长度。
Array.from({length: 2}, () => 'jack');
// ['jack', 'jack']
// 通过length可以确定第二个参数的运行次数
将一组值转为数组
Array.of(3, 22, 3); // [3, 22, 3]
Array()的不足
Array() // []
Array(3) // [, , , ]
Array(3, 11, 8) // [3, 11, 8]
Array.of总是返回参数值组成的数组,如果没有参数就返回一个空数组。
Array.of方法可以用代码模拟
function ArrayOf() {
return [].slice.call(arguments);
}
会在当前数组内部将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组,也就是说,使用这个方法会修改当前的数组。
3个参数
[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]
表示从下标为3的位置开始复制到数组末尾的数据,在下标为0的位置开始换数据。
对于没有copyWithin
方法可以使用以下代码
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]
find方法用于找出第一个符合条件的数组成员,参数是一个回调数,所有成员都会依次执行该回调函数,直到找出第一个返回值为true
的成员,然后返回该成员。如果没有符合的,返回undefined。
[1, 2, -5, 10].find((value, index, arr) => {
return value > 0
})
// -5
上面的代码找出小于0的成员。
回调函数可以接受3个参数,依次是当前的值、当前的index以及原数组。
findIndex返回第一个符合条件的数组成员的位置,如果都不符合,返回-1。
第一个参数是回调函数,第二个参数可选,绑定this对象。
给定值填充一个数组。
['a', 'b', 'c'].fill(7); // [7, 7, 7]
特别适合空数组的初始化。
还可以接受第二个和第三个参数,用来指定填充的起始位置和结束位置。
['a', 'b', 'c'].fill(7, 1, 2);
// ['a', 7, 'c']
上面的代码表示,fill方法从1号位开始向原数组填充7,到2号位之前结束。
用来遍历数组,可用于for…of循环遍历。
分别是遍历键值对、键、值
for(let index of ['a', 'b'].keys()) {
// code
}
方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串中的includes类似。
2个参数
[1, 2, 3].includes(3, 3); // false
indexOf缺点
NaN和自身都不相等。
代替模拟代码
const contains = (() => {
Array.prototype.includes ? (arr, value) => arr.includes(value) : (arr, value) => arr.some(el => el === value);
})
Map结构中的has方法是用来查找键名的
Set结构中的has方法用来查找值的
Array当参数为一个值是,则代表生成length为该值的空数组。
Array(3); // [, , ,]
在ES5中对空位处理很不一致
在ES6中明确规定空位转为undefined
Array.from方法会将数组的空位转为undefined。
扩展运算符也会转为undefined
copyWithin方法会连空位一起复制
fill方法会将空位视为正常的数组位置
for…of 循环也会遍历空位
entries()、keys()、values()、find()和findIndex()会将空位转为undefined