展开运算符(Spread Operator)

展开运算符(Spread Operator)是ES6中引入的一种语法,使用三个连续的点(...)表示。它可以在多种场合下使用,主要用途是“展开”数组或对象中的元素或属性。

使用展开运算符的几种常见情景:

  1. 在函数调用时展开数组元素:
function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 相当于执行 sum(1, 2, 3),输出6
  1. 在数组字面量中合并多个数组:
const fruits = ['apple', 'banana'];
const moreFruits = ['orange', 'grape'];
const allFruits = [...fruits, ...moreFruits];
console.log(allFruits); // 输出 ['apple', 'banana', 'orange', 'grape']
  1. 复制数组:
const arr = [1, 2, 3];
const arrCopy = [...arr]; // 创建arr的一个浅拷贝
  1. 在对象字面量中合并对象:
const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // 输出 { foo: 'baz', x: 42, y: 13 }

请注意,在合并对象时,如果有重复的键,则后面展开的对象属性会覆盖前面的。

  1. 复制对象:
const obj = { name: 'John', age: 30 };
const objCopy = { ...obj }; // 创建obj的一个浅拷贝
  1. 使用展开运算符代替apply方法:
const numbers = [9, 3, 2];
const maxNum = Math.max.apply(null, numbers); // 之前的写法
const maxNumNew = Math.max(...numbers); // 使用展开运算符的写法
console.log(maxNumNew); // 输出9,同样获得数组中的最大值

当使用展开运算符时有几点需要注意:

  • 展开运算符拷贝的是数组或对象的元素或属性的引用,这意味着如果数组或对象中的元素是对象或数组,那么展开的是这些元素的引用,而不是它们的实际深拷贝。
  • 展开对象时,只有对象自己的可枚举属性会被展开,不包括从原型链继承来的属性。

展开运算符大大简化了某些操作,并使代码更整洁和易读。

你可能感兴趣的:(前端,javascript,开发语言,ecmascript)