5.JavaScript 扩展 vs 剩余 运算符及其示例

当涉及到 JavaScript 中的数据结构时，扩展和剩余运算符是最常用的运算符之一。通过示例了解这些运算符。

ES6 为开发人员引入了两个方便的运算符，称为 扩展​ 和 剩余​。有趣的是，这两个运算符使用相同的语法…（是的，三个点），但提供了完全相反的结果。

本节将通过示例和用例向您介绍 JavaScript 中的扩展和剩余运算符。

好了，我们开始吧 🚀

扩展运算符

​扩展​ 运算符扩展（扩展）可迭代对象的各个元素，如字符串或数组。它还可以方便地扩展对象并将其可枚举属性复制到新对象。

扩展运算符有很多用例。让我们通过示例来学习它们：

克隆对象和数组

您可以使用扩展运算符克隆对象或数组以创建它们的副本。

让我们以这个​ employee ​对象为例，

const employee = { 
    'name': 'Bob',
    'address': 'California',
    'age': 23
}

使用扩展运算符创建此对象的副本：

const clonedEmployee = {...employee}

console.log(clonedEmployee); // {name: 'Bob', address: 'California', age: 23}

employee === clonedEmployee; // false

它创建​ employee ​对象的克隆。但是，克隆的对象与实际的​ employee ​对象不同。

同样，对于数组：

const numbers = [1, 2, 3]

const cloned = [...numbers];

console.log(cloned); // [1, 2, 3]

numbers === cloned; // false

组合两个对象

我们可以使用 扩展​ 运算符组合两个对象并创建一个新的合并对象。请注意，扩展运算符执行 浅合并​。这意味着第一个对象的公共属性将被第二个对象的值覆盖。

让我们把​ employee ​和​ salary ​作为两个目标。

const employee = {
    'id': "001",
    'name': 'Bob',
    'address': 'California',
    'age': 23
}

const salary = {
    'id': "001",
    "amount": "200K",
    "currency": "USD"
}

现在，让我们通过使用 扩展​ 运算符合并这两个对象来创建一个组合对象

const merged = {...employee, ...salary};

console.log(merged);

输出将是一个新的合并对象。另外，请注意，由于 浅合并​，id​ 属性不会在合并对象中重复两次。

{
    "id": "001",
    "name": "Bob",
    "address": "California",
    "age": 23,
    "amount": "200K",
    "currency": "USD"
}

向对象添加新属性

您可以使用 扩展​ 运算符向对象添加新属性。它使用附加属性创建一个新对象，其中实际对象保持不变。

const employee = { 
    'name': 'Bob',
    'address': 'California',
    'age': 23
}

const empWithDept = {...employee, 'dept': 'Finance'};

console.log(empWithDept); // {name: 'Bob', address: 'California', age: 23, dept: 'Finance'}
console.log(employee); // {name: 'Bob', address: 'California', age: 23}

在上面的示例中，我们向员工对象添加了一个新的属性​ dept ​及其值。此外，请注意员工对象保持不变。

更新对象的属性

与添加新属性类似，您还可以更新现有对象属性的值。同样，原始对象保持不变，并通过更新创建一个新对象。

const employee = { 
    'name': 'Bob',
    'address': 'California',
    'age': 23
}

const updatedEmp = {...employee, 'age': '25'};

console.log(updatedEmp); // {name: 'Bob', address: 'California', age: '25'}
console.log(employee); // {name: 'Bob', address: 'California', age: 23}

这里我们更新了 employee ​对象的 age ​属性。

创建数组文字

您可以在 JavaScript 中使用数组文字创建数组，如下所示：

const someArray = [1, 2, 3, 4];

因为 扩展​ 运算符帮助我们扩展数组元素；我们可以使用它在初始化数组时将另一个数组中的元素插入数组中。

const someArray = [1, 2, 3, 4];

const array = [...someArray, 5, 6, 7];
console.log(array); // [1, 2, 3, 4, 5, 6, 7]

连接数组

我们使用扩展运算符组合两个对象，我们也可以连接一个或多个数组

const thingsIHate = ['🥕', '🥒', '🍆'];
const thingsILove = ['🍕', '🍗', '🍝'];

const myFoodHabit = [...thingsIHate, ...thingsILove];
console.log(myFoodHabit); // ['🥕', '🥒', '🍆', '🍕', '🍗', '🍝']

如上例所示，我们连接了两个数组以创建一个新数组。原始数组保持不变。

扩展字符串的字符

扩展运算符可以帮助我们扩展字符串的字符并将它们捆绑在一个数组中。这是一个例子：

const punchLine = 'We love Showwcase';

const extractedChars = [...punchLine];
console.log(extractedChars);

输出

['W', 'e', ' ', 'l', 'o', 'v', 'e', ' ', 'S', 'h', 'o', 'w', 'w', 'c', 'a', 's', 'e']

此功能对于 就地​ 扩展字符串以创建字符数组非常方便。

let smileys = ['😀', ...'😂🙃', '🙂', '🤣'];
console.log(smileys); // ['😀', '😂', '🙃', '🙂', '🤣']

剩余运算符（参数)

确切地说，我们应该将其称为 剩余参数​ 。剩余参数在使用相同语法时与扩展运算符相反，…（三个点）

剩余参数有助于在扩展运算符扩展它们时将元素收集在一起。剩余参数的主要用法来自将函数参数的其余部分一起收集到一个数组中。

function myFunc(x, y, ...rest) {
	console.log(rest);
}

myFunc('a', 'b', 'c', 'd', 'e'); // ['c', 'd', 'e']

请注意，您可以在函数参数中使用剩余参数时为其命名。

使用剩余运算符合并剩余对象

当您使用解构从对象中提取键值时，您可以使用 剩余 ​运算符合并对象的剩余部分。

在下面的代码片段中，我们解构​ employee ​对象并提取​ address ​属性的值。同时，我们使用​ 剩余 ​运算符将剩余的对象合并为一个新对象。

const employee = { 
    'name': 'Bob',
    'address': 'California',
    'age': 23
}

const {address, ...rest} = employee;

console.log(address); // California
console.log(rest); // {name: 'Bob', age: 23}

‍