📋前言

在 ES6（ECMAScript 2015）中，新增了扩展语法（Spread Syntax）运算符 …，也称作展开运算符。这个运算符可以让我们更方便地操作数组、对象和函数参数等多种数据类型。

🎯扩展运算符用法

扩展语法运算符 … 有多种用法，包括：
1️⃣数组的展开：将一个数组“打散”为单个元素。

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

// 数组解构赋值
const arr = [1, 2, 3];
const [a, ...rest] = arr; // a = 1, rest = [2, 3]
console.log(arr);

2️⃣数组的合并：将多个数组合并成一个新的数组。

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

3️⃣对象的展开：将一个对象“打散”为单个属性。

const obj = {a: 1, b: 2};
console.log({...obj}); // {a: 1, b: 2}

// 对象解构赋值
const obj = {a: 1, b: 2, c: 3};
const {a, ...rest} = obj; // a = 1, rest = {b: 2, c: 3}
console.log(obj);

4️⃣函数参数的传递：将一个数组或对象作为参数传递给函数。

function myFunc(a, b, c) {
  console.log(a, b, c);
}
const arr = [1, 2, 3];
myFunc(...arr); // 1 2 3

5️⃣补充：在标签模板中，… 通常用于将模板字符串中所有的表达式值作为一个数组传递给函数的第二个参数。例如：

function myTag(strings, ...values) {
  console.log(strings);
  console.log(values);
}

const name = '张三';
const age = 18;

myTag`我叫${name}，今年${age}岁。`;

在上面的例子中，模板字符串中含有两个表达式 ${name} 和 ${age}，… 将其作为一个数组 [name, age] 传递给了 myTag 函数的第二个参数 values，以方便我们对它们进行处理。

🎯扩展运算符的优点

使用扩展运算符 … 可以让代码更简洁、更易读、更易维护。例如，当我们需要在数组中添加元素时，传统的写法可能是这样的：

const arr = [1, 2, 3];
arr.push(4);
arr.push(5);
console.log(arr); // [1, 2, 3, 4, 5]

而使用扩展运算符的写法则可以更加简洁：

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

同样，在函数调用时，使用扩展运算符可以让代码更加简洁明了：

function myFunc(a, b, c) {
  console.log(a, b, c);
}

const arr = [1, 2, 3];
myFunc(...arr); // 1 2 3

📝最后

扩展语法运算符 … 是 ES6 中一个非常实用的功能，它可以帮助我们更方便地操作数组、对象和函数参数等多种数据类型。在 JavaScript 开发中，我们经常会遇到需要“打散”数组、合并多个数组、传递数组或对象参数等问题，这时使用扩展运算符就可以让代码更加简洁、易读、易维护，提高开发效率。