ES6 扩展运算符详解
在 JavaScript 开发中,扩展运算符(...)是个神器,它能将可迭代对象(如数组、对象)拆解成单个元素。下面结合实战场景,聊聊它在对象和数组里的常见用法。
对象操作
1. 展开与合并
最直接的用法是把一个对象的属性'摊开'放进另一个对象里。如果两个对象有相同键名,后面的会覆盖前面的。
let user = { name: '小明', age: 28 }
let userInfo = { ...user, description: 'info' }
// 结果:{name: "小明", age: 28, description: "info"}
也可以把多个对象合并在一起:
let user = { name: '小明', age: 28 }
let info = { description: 'info' }
let userInfo = { ...user, ...info }
// 结果:{name: "小明", age: 28, description: "info"}
提示:这里其实也可以用
Object.assign()实现,但扩展运算符写法更简洁,且不易混淆源对象和目标对象。
2. 解构与过滤
利用扩展运算符配合解构赋值,可以方便地分离出部分属性,剩下的放入新变量。
let userInfo = { name: '小明', age: 28, description: 'info' }
let { name, ...other } = userInfo
// name: "小明"
// other: {age: 28, description: "info"}
3. 注意事项:浅拷贝
需要特别留意的是,扩展运算符对对象只做浅拷贝。如果对象里有嵌套对象,修改子属性会影响原对象。遇到深层结构时,需配合深拷贝方案使用。
数组操作
1. 插入与拼接
想在数组中间插入元素?用扩展运算符比 splice 更直观。
let arr = [, , ]
newArr = [, ...arr, ]

