展开运算符的应用场景

合并数组

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [...arr1, ...arr2]
console.log(arr3) // [1, 2, 3, 4, 5, 6]

 

替代 apply

const arr = [1, 2, 3]
function func(arg1, arg2, arg3){
    console.log(arg1 + arg2 + arg3) // 6
}
func(...arr)
// 替代 func.apply(null, arr) 用法
​
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
arr1.push(...arr2)
console.log(arr1) // [1, 2, 3, 4, 5, 6]
// 替代 Array.prototype.push.apply(arr1, arr2) 用法

 

解构赋值

const arr1 = [1, 2, 3, 4, 5, 6]
const [el1, el2, ...arr2] = arr1
console.log(el1) // 1
console.log(el2) // 2
console.log(arr2) // [3, 4, 5, 6]
// 展开运算符必须放在最后一位

 

字符串拆分成数组

const str = 'String'
const arr = [...str]
console.log(arr) // ["S", "t", "r", "i", "n", "g"]
​
// 等同于
const str = 'String'
const arr = str.split('')
console.log(arr) // ["S", "t", "r", "i", "n", "g"]

 

伪数组转换成数组

const divs = document.querySelectorAll('div')
const newDivs = [...divs]
console.log(newDivs)
​
var map = new Map([[1,11],[2,22],[3,33]]);
console.log([...map.keys()]); // [1,2,3]

 

浅拷贝

let a = [1, 2, 3]
let b = [...a]
​
let a = {name: 'zhangsan'}
let b = {...a}