ES6 数组相关
一、扩展运算符 …
- 用于函数调用
将一个数组变为参数序列；可与正常的函数参数结合使用；扩展运算符后面也可以放表达式；如果扩展运算符后面是空数组，不产生任何结果。只有函数调用时，扩展运算符才可以放到圆括号里。
const array1 = [];
const array2 = [];
const arr = [1, 2, 3];function push(array, ...items) {array.push(...items);console.log(...(items + '1')); // 1, 2, 3 1
}push(array1, ...arr); // 1 , 2 , 3 1
push(array2, ...[]); // 1 --> 这个1是拼接的1console.log(array1); // [1, 2, 3]
console.log(array2); // []
- 代替
apply方法
apply 方法的第二个参数把数组转换为函数的时候，有了扩展运算符，可以代替 apply 这个作用
function f(x, y, z) {// ...
}// ES5 的写法
var args = [0, 1, 2];
f.apply(null, args);
// apply 第一个参数是 THIS 指向
// 第二个参数传递的是一个数组// ES6 的写法
let args = [0, 1, 2];
f(...args);
- 复制数组
数组是复合数据类型，直接复制只是复制了数组的地址，没有重新创建一个数组。扩展运算符可以提供复制数组的简便方法。如果数组成员是对象，只能复制对象的引用，如果修改了新数组成员，会同步反映到原数组(浅拷贝)
const a1 = [1, 2];
const a2 = a1; // 这里只是复制了a1的地址a2[0] = 2;
console.log(a1); [2, 2];// ES5
var a1 = a1.concat();
a2[0] = 2;
console.log(a1); // [2, 2]// ES6扩展运算符方法
const a2 = [...a1]; // 写法一
const [...a2] = a1; // 写法二
- 合并数组
提供了数组合并的新写法
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];// ES5 的数组合并
arr1.concat(arr2, arr3);
console.log(arr1); // ['a', 'b', 'c', 'd', 'e']// ES6 的数组合并
const result = [...arr1, ...arr2, ...arr3];
console.log(result); // ['a', 'b', 'c', 'd', 'e']
- 结合解构赋值
扩展运算符可以与解构赋值结合生成数组，只能把扩展运算符放在最后，否则会报错
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest); // [2, 3, 4, 5]const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错
- 将字符串转为数组
console.log([...'hello']); // ["h", "e", "l", "l", "o"]
- 将 定义了Iterator 接口的对象转换为数组
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];let arrayLike = {'0': 'a','1': 'b','2': 'c',length: 3
};
// 没有部署Iterator接口的类似数组的对象
