ES6新增的扩展运算符8种用法[前端JavaScript]
摘自：https://zhuanlan.zhihu.com/p/608906375?utm_id=0
扩展运算符（...）是ES6新增的，作用是将可迭代对象展开到其单独的元素中，可以简化代码。
可迭代对象：任何能用for of 循环进行遍历的对象，如数组、字符串、Set、Map、DOM节点等。
1.合并操作
①合并数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr1=['zhihu','JavaScript',1,2,3]
let arr2=['diveng',2023]
let arr=[...arr1,...arr2]
console.log(arr)
// [ "zhihu", "JavaScript", 1, 2, 3, "diveng", 2023 ]
</script>
</body>
</html>②合并对象
<script>
const obj1={
name:'frontend',
age:{
value:1,
}
}
const obj2={
name:'diveng',
age:{
value:18,
},
time:2023
}
const res={...obj1,...obj2}
console.log(res)
// { name: "diveng", age: {value:18}, time: 2023 }
</script>Tips:合并对象时，会存在一个覆盖的情况。当一个键已经存在时，它会被具有相同键的最后一个对象给替换。
2.拷贝数组对象
使用扩展运算符拷贝数组是ES6的常规操作。
深拷贝是指拷贝对象的具体内容，而内存地址是自主分配的，拷贝结束之后俩个对象虽然存的值是一样的，但是内存地址不一样，俩个对象页互相不影响，互不干涉。
浅拷贝是指对内存地址的复制，让目标对象指针和源对象指向同一片内存空间。
①扩展运算符对1维数组的拷贝是深拷贝
const number=[2020,2021,2022,2023,2024]
const copyNumber=[...number]
console.log(copyNumber)
// [ 2020, 2021, 2022, 2023, 2024 ]
copyNumber.unshift('diveng')
console.log(copyNumber)//[ "diveng", 2020, 2021, 2022, 2023, 2024 ]
console.log(number)//[ 2020, 2021, 2022, 2023, 2024 ]②扩展运算符对2维数组的拷贝时仅对第一层实现深拷贝
const number = [2020, [2021,2022, 2023], 2024]
const copyNumber = [...number]
console.log(copyNumber)//
// [2020, [2021,2022, 2023], 2024]
copyNumber[1][0]='diveng'
copyNumber[2]=2025
console.log(number)//[2020, ['diveng',2022, 2023], 2024]
console.log(copyNumber)//[2020, ['diveng',2022, 2023], 2025]③扩展运算符只对对象第一层实现深拷贝
const obj = {
name: 'diveng',
age: {
value: 1,
},
year:2024
}
const copyObj={...obj}
console.log(copyObj)
//{ name: "diveng", age: {value: 1}, year: 2024 }
copyObj.age.value=2
copyObj.year=2025
console.log(obj)//{ name: "diveng", age: {value: 2}, year: 2024 }
console.log(copyObj)//{ name: "diveng", age: {value: 2}, year: 2025 }3.参数传递
①求数组的最大最小值，非常好用
const arr=[2024,2,3,66,100]
const min=Math.min(...arr)
const max=Math.max(...arr)
结果分别为2，2024
②扩展运算符为函数传递参数
const sum=(num1+num2)=>num1+num2
cosole.log(sum(...[2024,2]))
cosole.log(sum(...[2024,-2000,999]))
结果分别为2026，24
Tips：在第二个结果，传入3个参数，函数只接受前2个，故答案为24。
4.数组去重
配合set实现数组去重
var arr = [2023,'diveng',2023, 1024, -9, -9, 2023, 1024, 2, 3, 2, 3, 6, 8,8,8,-8,'diveng','diveng']
var set1= [...new Set(arr)]
//可以直接写出var set1= new Set(arr)
//console.log(set1)
//方法1
var newArr=Array.from(set1)
console.log(newArr)
var arr = [2023,'diveng',2023, 1024, -9, -9, 2023, 1024, 2, 3, 2, 3, 6, 8,8,8,-8,'diveng','diveng']
var set1= [...new Set(arr)]
//可以直接写成var set1= new Set(arr)
//console.log(set1)
//方法2
var newArr= [...set1]
console.log(newArr)5.字符串转字符数组
const name='diveng'
const strarr=[...name]
console.log(strarr)
//['d','i','v','e','n','g']
//进行简单的字符串截取
strarr.lenght=2
console.log(strarr.join(""));//‘di’6.解构变量
①结构数组
const [courrent,...future]=[2024,2025,2026,2027,2028,2029,2030]
console.log(courrent) //2024
console.log(future) //[ 2025, 2026, 2027, 2028, 2029, 2030 ]②解构对象
const info = { name: 'diveng', skill: "JS", hobby: "code" }
const { name, ...others } = info
console.log(name) //'diveng'
console.log(others) //{ skill: "JS", hobby: "code" }7.打印日志
可以使用扩展运算符打印可迭代对象的每一项
const word=['diveng',2024,2,6,888]
console.log(...word)
//'diveng' 2024 2 6 8888.用扩展运算符将NodeList转数组
NodeList对象是节点的集合，通常由属性（比如Node.childNodes）和方法(比如document.querySelectorAll)返回的
NodeList不同于数组，没有数组的所有方法：find、map、filter等，但是可以用forEach()来迭代。
const nodelist = document.querySelectorAll('div'); //nodelist是类似数组的对象
const array = [...nodelist]
浙公网安备 33010602011771号