js 扩展运算符|极客笔记

js 扩展运算符

在JavaScript中，扩展运算符（Spread Operator）是一个非常强大和实用的语法特性，它可以将数组、对象或字符串等可迭代对象展开成一个新的数组或对象。在本文中，我们将深入探讨js中的扩展运算符的用法和示例。

数组的展开

首先，让我们看看如何使用扩展运算符来展开数组。

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

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

在上面的示例中，我们首先定义了两个数组 arr1 和 arr2，然后使用扩展运算符将它们展开后合并到一个新的数组 combined 中。通过 console.log() 打印 combined 可以看到新的数组已经包含了两个原数组的所有元素。

除了合并数组，扩展运算符还可以用来复制数组。

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

// 修改原数组不会影响到复制后的数组
original.push(4);
console.log(original); // [1, 2, 3, 4]
console.log(copy); // [1, 2, 3]

在这个示例中，我们使用扩展运算符 ... 复制了原数组 original 并存储在新数组 copy 中。当我们后续修改原数组时，复制后的数组并不会受到影响，这是因为扩展运算符创建了一个新的数组，而不是引用原数组。

对象的展开

除了数组，扩展运算符也可以用于对象的展开。

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

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

上面的代码展示了如何使用扩展运算符合并两个对象并创建一个新的对象。被展开的对象会按照属性的顺序被合并到新的对象中。

需要注意的是，如果两个对象有相同的属性名，则后面的属性会覆盖前面的属性。

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

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

在这个示例中，obj2 中的属性 b 的值会覆盖 obj1 中的属性 b 的值。

字符串的展开

除了数组和对象，扩展运算符还可以用于字符串。

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

在上述代码中，我们将字符串 "hello" 使用扩展运算符展开成了一个字符数组，数组中的每个元素都是原字符串中的一个字符。

函数参数的传递

除了展开数组、对象和字符串，扩展运算符还可以用于函数参数的传递。

const numbers = [1, 2, 3];

const sum = (a, b, c) => a + b + c;

console.log(sum(...numbers)); // 6

在这个示例中，我们定义了一个接受三个参数的求和函数 sum，然后我们使用扩展运算符将数组 numbers 的元素作为参数传递给函数 sum。在执行函数 sum(...numbers) 后，实际上相当于执行 sum(1, 2, 3)，所以最终的结果为 6。

剩余参数（Rest Parameter）

除了展开操作，扩展运算符还有一个很重要的用法就是剩余参数（Rest Parameter）。

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

在上面的示例中，我们使用数组解构和扩展运算符结合起来，将数组中的第一个元素赋给 first，其余的元素赋给 rest。

扩展运算符的嵌套使用

扩展运算符还支持嵌套使用，可以通过嵌套展开复杂的数据结构。

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

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

在上述示例中，我们将三个数组展开并合并成一个新的数组，展开的操作可以一层套一层的进行。