剩余参数与展开运算符

剩余 （rest）参数

剩余参数永远是个数组，即使没有值，也是空数组

const add = (x, y, z, ...args) => {
  console.log(x, y, z, args) // 1 2 3 [4,5]
}
add(1, 2, 3, 4, 5)

箭头函数的参数部分即使只有剩余参数，也不能省略圆括号

const add = (...args) => {
  console.log(args)
}
add(1, 2)

箭头函数可以使用剩余参数替代 arguments 获取实际参数

剩余参数的位置：剩余参数只能是最后一个参数，之后不能再有其他参数，否则会报错。

剩余参数不一定非要作为函数参数使用：

• 与数组的解构赋值

// 必须是最后一个
// 这里称作 剩余元素 合适一些
const [num, ...args] = [1, 2, 3, 4]

• 与对象的解构赋值

// 对象作为函数参数时的解构赋值
const func = ({ x, y, ...z }) => {
  console.log(x, y, z) // 1 2 { a: 3, b: 4 }
}
func({ a: 3, x: 1, y: 2, b: 4 })

数组的展开运算符

剩余参数和展开运算符的区别

// 展开运算符
[3,1,2]->3,1,2
// 剩余参数
3,1,2->[3,1,2]

下图三处按顺序分别表示什么？

const add = ([...args1], ...args2) => {
  console.log(...args1)
}

答案

1 剩余元素、2 剩余参数、3 展开运算符

:::

应用

复制数组

// 浅拷贝
const a = [1, 2]
const c = [...a]

合并数组

const a = [1, 2]
const b = [3]
const c = [12, 321]
console.log([1, ...a, ...b, ...c])

实现了 Iterator 接口的对象转为数组

数组，字符串，Set, Map,NodeList，arguments

function func() {
  console.log([...arguments])
}

对象的展开运算符

对象不能直接展开，必须在{}中展开

const apple = {
  color: 'black',
  shape: '圆柱形',
  taste: '甜',
}
console.log({ ...apple })

合并对象

新对象拥有全部属性，相同属性，后者覆盖前者。

const apple = {
  color: 'black',
  shape: '圆柱形',
  taste: '甜',
}
const pen = {
  color: 'red',
  shape: '球形',
  use: 'write',
}
console.log({ ...apple, ...pen })

非对象的展开

如果展开的不是对象，则会自动将其转为对象，再将属性罗列出来

// 自身转换为对象中没有属性 所有返回空对象
console.log({ ...1 }) //{}

如果展开运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象

console.log({ ...'alex' }) // { '0': 'a', '1': 'l', '2': 'e', '3': 'x' }
//  数组在对象中展开
console.log({ ...[1, 2, 3] }) // { '0': 1, '1': 2, '2': 3 }

不会展开对象中的对象属性

const obj = {
  a: {
    b: 2,
  },
  c: 2,
}
const obj2 = { ...obj }
console.log(obj2) // { a: { b: 2 }, c: 2 }

应用

复制对象

// 浅拷贝
const a = { x: 1, y: 2 }
const c = { ...a }

用户参数和默认参数

const logUser = (userParam) => {
  const defaultParam = {
    username: 'zhangsan',
    age: 0,
    sex: 'male',
  }
  const { username, age, sex } = { ...defaultParam, ...userParam }
  console.log(username, age, sex)
}
logUser({
  username: 'zhangsan',
  age: 0,
})