JS中【扩展运算符】相关知识点

JavaScript 中的扩展运算符（Spread Operator）是由三个点 ... 组成的。它是一种用于展开可迭代对象（如数组、字符串）或对象本身的强大工具。扩展运算符可以简化数组和对象的操作，如拷贝、合并、函数调用等。以下是扩展运算符的详细知识点讲解。

1. 数组中的扩展运算符

1.1 展开数组

扩展运算符可以将数组（或类数组）中的元素展开为独立的值。这在构建新数组时特别有用。利用这一点可以快将类数组转换成数组。

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

1.2 数组合并

扩展运算符可以用于合并多个数组，非常简洁易用。

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

1.3 数组拷贝

使用扩展运算符可以创建数组的浅拷贝。拷贝后的数组与原数组是独立的修改互不影响。

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

1.4 函数调用中的扩展运算符

扩展运算符可以将数组元素作为独立的参数传递给函数。

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

2. 对象中的扩展运算符

2.1 展开对象

扩展运算符可以将对象的所有属性展开为独立的键值对。这在构建新对象时非常有用。

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

2.2 对象合并

扩展运算符可以合并多个对象。若有相同的属性名，后面的对象会覆盖前面的。

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

2.3 对象拷贝

扩展运算符也可以用来浅拷贝对象，创建一个与原对象内容相同但不同引用的新对象。

const original = { a: 1, b: 2 };
const copy = { ...original };
copy.c = 3;
console.log(original); // { a: 1, b: 2 }
console.log(copy);     // { a: 1, b: 2, c: 3 }

3. 字符串中的扩展运算符

3.1 展开字符串

扩展运算符可以将字符串展开为单个字符组成的数组。

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

4. 扩展运算符与剩余参数的区别

虽然扩展运算符 ... 和剩余参数（Rest Parameters）使用相同的语法，但它们的作用是不同的。扩展运算符用于展开一个可迭代对象，而剩余参数用于将多个参数收集到一个数组中。

扩展运算符示例：

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

剩余参数示例：

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // 6

总结

扩展运算符是 JavaScript 中的一个非常灵活和强大的工具，它可以简化数组、对象的操作，并且在函数调用和字符串处理等场景中也很有用。掌握扩展运算符可以让你的代码更加简洁和高效。