一、展开运算符
展开运算符是（Spread Operator）是JavaScript ES6新特性中用来处理数组和对象的语法糖。允许一个表达式在某处展开，函数调用时，使用三个点(...)将数组或类数组对象展开成独立的参数列表。
1.基本用法
const arr = [1,2,3]
console.log(...arr) // 1,2,3
2.函数调用
传统方法用apply实现
- 将数组展开成多个参数的形式，其中函数参数和数据元素是一一对应的
function test(a, b) {
return a + b // 3
}
const arr = [1, 2, 3]
test.apply(null, arr)
es6展开运算符实现的效果则简洁明了
function test(a, b) {
return a + b // 3
}
const arr = [1, 2, 3]
test(...arr)
从而可以看出两者的效果是完全一样的
3.合并数组和对象
- 数组合并：将两个数组展开成多个独立的元素，并将他们合并到一个新的数组
- 通常我们用push，unshift,splice来构建一个新的数组
- 用展开运算符可以更简单高效的工作
传统用concat的方法
const arr1 = [1,2,3]
const arr2 = [4,5,6]
const newArr = arr1.concat(arr2)
console.log(newArr) // [1,2,3,4,5,6]
es6的写法
const arr1 = [1,2,3]
const arr2 = [4,5,6]
const newArr = [...arr1, ...arr2]
console.log(newArr) // [1,2,3,4,5,6]
- 对象合并
- 用展开运算符将两个对象展开成多个独立的键值对，并将他们合并到一个新的对象
const obj = {
a: 1,
b: 2
}
const obj2 = {
c: 3,
d: 4
}
const newObj = {...obj, ...obj2}
console.log(newObj) // {a: 1, b:2, c:3, d:4}
4.优点
-
一：更简洁的代码
- 使用展开运算符可以使代码更加简洁，减少不必要的重复。就像上述例子一样，数组的合并，使用展开运算符则是更简洁，代码更容易阅读
-
二：更高的性能
- 展开运算符比传统的方法在性能上更具优势。
-
综上所述，展开运算符是一种非常便利的语法糖，它可以使JavaScript代码更加简洁、更加高效。它可以将数组和对象展开成多个独立的元素，方便函数调用或数组初始化
二、剩余参数
- 允许我们将一个不定数量的参数表示为一个数组
数组求和
- 剩余参数永远是一个数组，即使没有值也是个数组
- 使用箭头函数的时候，即使只有剩余参数也不可以把括号去掉
- 剩余参数只能在最后一个位置写，在其他地方会报错
const test = (...arr) => arr.reduce((pre, cur) => pre + cur, 0)
test(1) // 1
test(1, 2) // 3
test(1, 2, 3) // 6
展开运算符和剩余参数的区别
- 展开运算符一般用于解构数组和对象，而剩余参数一般用于将多个参数收集到一个数组中
