剩余参数与展开运算符

剩余参数

剩余参数是什么

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

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

剩余参数的注意事项

1. 箭头函数的剩余参数

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

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

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

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

与解构赋值结合使用

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

• 与数组的解构赋值

// 必须是最后一个
// 这里称作 剩余元素 合适一些
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 })

数组的展开运算符

数组的展开运算符的基本用法

eg:求数组中的最小值

// Math.min()要求参数必须是“罗列出来”，而不能是数组，所以要展开
console.log(Math.min(...[1, 2, 3, 44445, 0.1]))

区分剩余参数和展开运算符

// 剩余参数
const add = (a, ...args) => {
  console.log(args)
  // 展开运算符
  console.log(1, ...args)
}
add(1, 23, 4, 5)

根本区别：

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

test:下图中标注的三处代码，分别表示什么？

区分剩余参数和展开运算符test

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

数组展开运算符的应用

1. 复制数组

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

2. 合并数组

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

3. 字符串转为数组

字符串可以按照数组的形式展开

console.log([...'alex'])

4. 常见的类数组转化为数组

• arguments

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

• NodeList

console.log([...document.querySelectAll('p')], push)

对象的展开运算符

对象展开运算符的基本用法

1. 展开对象
   对象不能直接展开，必须在{}中展开
   对象的展开：把属性罗列出来，用顿号分隔，放到一个{}中，构成新对象

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

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

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

对象的展开运算符的注意事项

1. 空对象的展开
   如果展开一个空对象，则没有任何效果

console.log({ ...{}, ...{ a: 1 } }) //{ a: 1 }

2. 非对象的展开

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

// 自身转换为对象中没有属性 所有返回空对象
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 }

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

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

对象展开运算符的应用

1. 复制对象

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

2. 用户参数和默认参数

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,
})