标准答案
- 展开运算符 ... 用在函数调用、数组字面量、对象字面量中,把可迭代对象或对象自身可枚举属性展开,例如 fn(...args)、[...list]、{ ...obj }。
- 剩余参数也是 ...,但它出现在函数形参位置,用来把剩余实参收集成数组,例如 function fn(first, ...rest) {}。
- 解构赋值是从数组或对象中按位置或属性名取值,可以配合默认值、别名和剩余元素,例如 const { id, ...profile } = user。
- 对象展开和数组展开都是浅层操作,不是深拷贝。对象展开只复制自身可枚举属性,不复制原型链属性,也不会深拷贝嵌套对象。
题目解析
判断 ... 的含义先看语法位置:在调用和字面量里是展开,在函数形参和解构剩余位置是收集。
解构默认值只在值为 undefined 时生效,不会在 null 时生效。嵌套解构前要确认上层对象存在,否则会抛运行时错误。
对象剩余属性常用于去掉敏感字段或拆分 props。要注意它仍然是浅拷贝,嵌套对象引用会被共享。
代码示例
下面示例展示展开、剩余参数、数组解构和对象解构的常见组合。
JavaScript
const numbers = [1, 2, 3]
Math.max(...numbers) // 3
function pickFirst(first, ...rest) {
return { first, rest }
}
const [head, ...tail] = numbers
const user = {
id: 1,
name: 'Alice',
password: 'secret',
profile: { city: 'Hangzhou' }
}
const { password, ...publicUser } = user
const copiedUser = {
...publicUser,
profile: { ...publicUser.profile }
}常见误区
- 把展开运算符当成深拷贝。
- 混淆剩余参数和 arguments。
- 解构嵌套对象时没有处理 undefined,导致运行时错误。