JavaScript 扩展运算符

在 JavaScript 中，扩展运算符是一个很常用的工具，它可以在一些操作中使代码更加简洁易懂。

什么是扩展运算符？

扩展运算符是三个连续的点符号 ...。在 JavaScript 中，扩展运算符可以应用于以下操作：

1. 数组/对象合并
2. 函数调用参数传递
3. 数组/对象解构赋值
4. 字符串转换为数组

数组/对象合并

扩展运算符可以将两个数组/对象合并成一个新的数组/对象。它的使用方法为：将要合并的数组/对象放在扩展运算符后面。

合并数组

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

合并对象

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // {a: 1, b: 2, c: 3, d: 4}

函数调用参数传递

扩展运算符也可以使用在函数调用参数中，它可以将数组/对象转换为多个单独的参数。

数组传参

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

对象传参

function foo({ x = 0, y = 0 }) {
  console.log(x, y);
}
const obj = { x: 1, y: 2 };
foo({ ...obj }); // 1 2

数组/对象解构赋值

扩展运算符可以将数组/对象中的值赋值给多个变量。

数组解构赋值

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

对象解构赋值

const obj = { x: 1, y: 2 };
const { x, ...rest } = obj;
console.log(x); // 1
console.log(rest); // { y: 2 }

字符串转换为数组

扩展运算符可以将字符串转换为数组。

const str = "hello";
const arr = [...str];
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

总结

在 JavaScript 中，扩展运算符是一个很实用的工具，它可以使代码更加简洁易懂。扩展运算符在数组/对象合并、函数调用参数传递、数组/对象解构赋值以及字符串转换为数组等操作中都可以应用。在实际开发中，合理运用扩展运算符可以提高代码的效率和可读性。