剩余参数与展开运算符

Frank
  • 前端进阶
  • ES6
  • 剩余参数
  • 展开运算符
大约 3 分钟约 1032 字...

剩余参数

剩余参数是什么

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

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)
  1. 箭头函数可以使用剩余参数替代 arguments 获取实际参数

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

与解构赋值结合使用

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

  • 与数组的解构赋值
// 必须是最后一个
// 这里称作 剩余元素 合适一些
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]
  1. 合并数组
const a = [1, 2]
const b = [3]
const c = [12, 321]
console.log([1, ...a, ...b, ...c])
  1. 字符串转为数组

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

console.log([...'alex'])
  1. 常见的类数组转化为数组
  • arguments
function func() {
  console.log([...arguments])
}
  • NodeList
console.log([...document.querySelectAll('p')], push)

对象的展开运算符

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

  1. 展开对象
    对象不能直接展开,必须在{}中展开
    对象的展开:把属性罗列出来,用顿号分隔,放到一个{}中,构成新对象
const apple = {
  color: 'black',
  shape: '圆柱形',
  taste: '甜',
}
console.log({ ...apple })
  1. 合并对象
    新对象拥有全部属性,相同属性,后者覆盖前者。
const apple = {
  color: 'black',
  shape: '圆柱形',
  taste: '甜',
}
const pen = {
  color: 'red',
  shape: '球形',
  use: 'write',
}
console.log({ ...apple, ...pen })

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

  1. 空对象的展开
    如果展开一个空对象,则没有任何效果
console.log({ ...{}, ...{ a: 1 } }) //{ a: 1 }
  1. 非对象的展开
  • 如果展开的不是对象,则会自动将其转为对象,再将属性罗列出来
// 自身转换为对象中没有属性 所有返回空对象
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 }
  1. 不会展开对象中的对象属性
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 }
  1. 用户参数和默认参数
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,
})
上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1