返回

用ES6展开运算符(扩展运算符)来简化你的代码

前端

在ES6中,我们有了一个新的运算符--展开运算符,它可以使我们的代码的数量有一定的减少,有时候甚至有很有用的作用,我们来举几个常用的例子,同时通过例子来了解展开运算符的使用。

1. 合并数组

展开运算符可以用来合并数组。例如:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];

console.log(arr3); // [1, 2, 3, 4, 5, 6]

2. 传递参数

展开运算符可以用来将数组作为参数传递给函数。例如:

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3)); // 6

3. 创建新对象

展开运算符可以用来创建新对象。例如:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };

console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }

4. 复制对象

展开运算符可以用来复制对象。例如:

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };

console.log(obj2); // { a: 1, b: 2 }

5. 解构赋值

展开运算符可以用来进行解构赋值。例如:

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

6. 扩展运算符的其他用法

展开运算符还可以用来做一些其他事情,例如:

  • 创建一个新的数组,其中包含数组的所有元素,但不包括最后一个元素。例如:
const arr = [1, 2, 3];
const newArr = [...arr.slice(0, arr.length - 1)];

console.log(newArr); // [1, 2]
  • 创建一个新的对象,其中包含对象的所有属性,但不包括最后一个属性。例如:
const obj = { a: 1, b: 2, c: 3 };
const newObj = { ...obj };
delete newObj.c;

console.log(newObj); // { a: 1, b: 2 }

展开运算符是一个非常强大的工具,可以用来做很多事情。如果你想了解更多关于展开运算符的用法,你可以参考MDN的文档。