剩余参数与展开运算符
大约 2 分钟约 701 字...
剩余 (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,
})