es6 扩展运算符(...)使用场景

Posted 2020-11-22 sunxiaopei

一,扩展运算符的使用场景

1.复制数组

 let arr1=[1,2];
 let arr2=[...arr1];
 arr2[0]=44;
 console.log(arr2,"arr2");[44,2]
 console.log(arr1,"arr1") //[1,2]　  //如果用es5 则用let arr2=arr1.concat()　

为何不直接用let arr2=arr1? 因为如果是这样 改变arr2的值 则arr2和arr1都为[44,2] 这为浅拷贝

为了让我们解决疑惑 下面稍微介绍一下深拷贝和浅拷贝

浅拷贝：将原数组或者原对象的引用赋给新对象，新数组，新对象／数组只是原对象的一个引用

深拷贝：创建一个新的对象或者是数组 把原对象或者是原数组的值拷贝过来  从而新数组/新对象的值改变对原数组/对象没有影响

2.合并数组

 let arr1=[1,2];
 let arr2=[3,4];
 let arr3=[...arr1,...arr2];
 console.log(arr3,"arr3")//[55, 2, 3, 4] //如果用es5 则let arr3=arr1.concat(arr2)

3.与解构赋值结合使用 把扩展运算符放最后一位 否则报错

const [first, ...rest] = [1, 2, 3, 4, 5];
console.log("first",first) //1
console.log("rest",rest)  //[2,3,4,5]

4.任何定义了遍历器（Iterator）接口的对象 都可以用扩展运算符转化为真正的数组

首先要了解一下 那些原生是具有遍历器接口

1.Array 

 let arr=[1,2]
 console.log("Array->[]:",[...arr]) //Array->[]: [1, 2]

2.String

 console.log("String->[]:",[..."123"])//Array->[]: "1", "2", "3"]

3.函数的arguments对象

 function getArr(a,b){
    console.log("arguments->[]:",[...arguments]) //arguments->[]: [1, 2]
  }
 getArr(1,2)

4.NodeList对象

let nodeList = document.querySelectorAll(‘div‘);
let array = [...nodeList];

 

5.Set

let set=new Set([1,2])
console.log(‘Set->[]:‘,[...set]); //Set->[]:[1, 2, 3]　

6.Map

 let map=new Map([[0,1],[1,2]])
 console.log("Map->[]:",[...map.keys()])//Map->[]:[0,1]

二，扩展运算符转为数组和Array.from 的区别

Array.from转化为数组：具有遍历器（Iterator）接口的对象 和类数组（具有length属性）

1.类数组转化

 let likeArr={
      0:1,
      1:2,
      length:2
 }
console.log("likeArr->[]:",Array.from(likeArr))   //likeArr->[]: [1, 2]

2.具有遍历器（Iterator）接口的对象  简单举一个字符串的例子

console.log(Array.from("12"))   // ["1", "2"]