巧妙利用ES6扩展运算符，让代码简洁高效起来

前端

2023-11-12 06:31:29

ES6 扩展运算符简介

ES6扩展运算符（...）是ES6中引入的一个语法特性，它允许我们将数组或对象展开成一组单独的元素或属性。这使得我们能够更简洁、高效地编写代码。

ES6 扩展运算符的语法和用法

ES6扩展运算符的语法非常简单，它由三个点（...）组成。我们可以将它用于数组和对象。

数组扩展：将数组展开成一组单独的元素。
对象扩展：将对象展开成一组单独的属性。

ES6 扩展运算符的应用场景

ES6扩展运算符可以应用于各种场景，包括：

合并数组或对象
将数组或对象中的元素或属性复制到另一个数组或对象
从数组或对象中删除元素或属性
创建新的数组或对象

ES6 扩展运算符的优势

使用ES6扩展运算符可以带来许多好处，包括：

代码更简洁
代码更易读
代码更易维护
代码更易扩展

ES6 扩展运算符的示例

为了更好地理解ES6扩展运算符的用法，我们来看几个示例。

合并数组或对象

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

const obj1 = {
  name: 'John',
  age: 30
};
const obj2 = {
  city: 'New York'
};
const mergedObj = {...obj1, ...obj2};
console.log(mergedObj); // {name: "John", age: 30, city: "New York"}

将数组或对象中的元素或属性复制到另一个数组或对象

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // [1, 2, 3]

const obj1 = {
  name: 'John',
  age: 30
};
const obj2 = {...obj1};
console.log(obj2); // {name: "John", age: 30}

从数组或对象中删除元素或属性

const arr1 = [1, 2, 3, 4, 5];
const newArr = arr1.filter(item => item !== 3);
console.log(newArr); // [1, 2, 4, 5]

const obj1 = {
  name: 'John',
  age: 30,
  city: 'New York'
};
const newObj = {...obj1};
delete newObj.city;
console.log(newObj); // {name: "John", age: 30}

创建新的数组或对象

const newArr = [...Array(10).keys()];
console.log(newArr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

const newObj = {...{name: 'John', age: 30}};
console.log(newObj); // {name: "John", age: 30}