ES6中新增了许多数组的方法以及数组的新特性
目录
扩展运算符
扩展运算符是三个点,它好比rest参数的逆运算,作用是将一个数组转为用逗号分隔的参数序列。
console.log(...[1,2,3]);
//该运算符主要用于函数调用
function push(arr,...item){
arr.push(...item);
console.log(arr);
}
push([],1,2,3,4,5,6);
//扩展运算符后面还可以放置表达式
let x = 1;
let x = 0;
const arr = [
...(x > 0 ? ['a'] : []),
'b',
];
console.log(arr);
//如果扩展运算符后面是一个空数组,则不产生任何效果
const arr = [...[],1];
扩展运算符可以代替函数的apply方法
//由于扩展运算符可以展开数组,所以不需要apply方法,将数组转为函数的参数了
function f(x,y,z){
console.log(x,y,z);
}
let args = [0,1,2];
f(...args);
扩展运算符的作用
1.复制数组
//扩展运算符提供了复制数组的方便写法,但是,是浅拷贝,并不是深拷贝
const arr1 = [1,2,3];
const arr2 = [...arr1];
cosnole.log(arr1) //[1,2,3]
console.log(arr2) //[1,2,3];
arr1[0] = 2;
console.log(arr2) //[2,2,3]
2.合并数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3) //[1,2,3,4,5,6];
//但是合并数组也是浅拷贝,当原数组值变化的话,合并数组的值也会发生变化
arr[0] = 2;
console.log(arr3) //[2,2,3,4,5,6]
3.与解构赋值结合
let arr = [1,2,3,4];
let [a,...arr2] = arr;
console.log(a) //1
console.log(arr2) //[2,3,4]
4.字符串:扩展运算符可以将字符串转为真正的数组,并且可以正常识别四个字节的Unicode字符
const str = 'x\uD83D\uDE80y'
console.log(str.length); //4
const arrStr = [...str];
console.log(arrStr.length); //3
5.实现了Iterator接口的对象:任何Iterator接口的对象,都可以用扩展运算符转为真正的数组,对于那些没有部署Iterator接口的类似数组的对象,扩展运算符就无法将其转为真正的数组。
let nodeList = document.querySelectorAll("*");
console.log(nodeList);
let arrList = [...nodeList];
console.log(arrList);
let arrayLike = {
"0" : 'a',
'1' : 'b',
length : 2,
}
let arr = [...arrayLike];
console.log(arr); //报错 arrayLike is not iterable 这个对象不是迭代的,没有Iterator接口
6.Map 和Set 结构,Generator函数:扩展运算符内部调用的是数据结构的Iterator接口,因此只要有Iterator接口的对象,都可以使用扩展运算符,Generator函数运行后,返回一个遍历器对象,因此也可以使用扩展运算符。
let map = new Map([
[1,'one'],
[2,'two'],
[3,'three'],
]);
console.log(map.keys(),map.values());
let arr = [...map.keys(),...map.values()];
console.log(arr);
const go = function*(){
yield 1;
yield 2;
yield 3;
};
const arr = [...go()];
console.log(arr);
console.log(go());