标准答案

  1. 展开运算符 ... 用在函数调用、数组字面量、对象字面量中,把可迭代对象或对象自身可枚举属性展开,例如 fn(...args)、[...list]、{ ...obj }。
  2. 剩余参数也是 ...,但它出现在函数形参位置,用来把剩余实参收集成数组,例如 function fn(first, ...rest) {}。
  3. 解构赋值是从数组或对象中按位置或属性名取值,可以配合默认值、别名和剩余元素,例如 const { id, ...profile } = user。
  4. 对象展开和数组展开都是浅层操作,不是深拷贝。对象展开只复制自身可枚举属性,不复制原型链属性,也不会深拷贝嵌套对象。

题目解析

判断 ... 的含义先看语法位置:在调用和字面量里是展开,在函数形参和解构剩余位置是收集。

解构默认值只在值为 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,导致运行时错误。

作者信息