JavaScriptES6数组的扩展运算符详解

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());

主页传送门