标签：list fun cto bsp node nts 一个 场景 数组
一,扩展运算符的使用场景
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"]
标签：list fun cto bsp node nts 一个 场景 数组
原文地址：https://www.cnblogs.com/sunxiaopei/p/11918070.html
