JavaScript 扩展运算符

JavaScript 扩展运算符 (…)

JavaScript 中的扩展运算符将数组扩展（解包）为其各个元素。

*它既可用于数组，也可用于对象，在数组中它的使用情况如下：

**1- 构建数组：**

在这里我们可以用它来扩展一个数组元素并在另一个数组中使用它（例如）。

const arr = [5, 6, 7];

// without the spread operator 😐

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator 😃

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

如您所见，扩展运算符使事情变得简单得多。

如果您再次想要扩展数组的各个元素，请使用扩展运算符：

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

另一个例子可以更好地理解：

const foods = ['chicken', 'meat', 'rice'];

const Newfoods = [...foods, 'pizza '];
console.log(Newfoods); // ['chicken', 'meat', 'rice', 'pizza ']

请记住，这里我们正在创建一个全新的数组，我们不会改变（变异）食物数组，看：

console.log(foods); // ['chicken', 'meat', 'rice']

展开运算符与解构类似，但不同之处在于展开运算符不会创建新变量，因此我们只能在用逗号分隔的值的地方使用它。

**扩展运算符与数组结合使用的两个有用用例：**

const arrOriginal = [1, 2, 3, 4, 5];

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

const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'F'];

const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // ['A', 'B', 'C', 'D', 'E', 'F']

扩展运算符不仅适用于数组，还适用于所有可迭代对象，例如：数组、字符串、映射和集合（大多数内置数据结构），但不包括（对象）。

在字符串上：原始字符串上的每个字母 = 一个单独的元素，例如：

const str = 'spongeBob';

const letters = [...str, 'squarePants'];
console.log(letters); // ['s', 'p', 'o', 'n', 'g', 'e', 'B', 'o', 'b', 'squarePants']

但是请记住，除了我们在顶部指定的两种情况（即“构建数组”和“传递参数”）之外，我们仍然不想使用扩展运算符，因为例如，如果我们想使用一些用逗号分隔的值通过模板文字创建字符串，它将不起作用并且会给我们一个错误，因为它不是一个需要用逗号分隔多个值的地方：

console.log(`spelling sponge bob's name: ${...str}`);  // Expression expected

**2- 将参数传递给函数**

function orderDrink(drink1, drink2) {
  console.log(`Your Ordered drinks are ${drink1} and ${drink2}`);
}


const drinks = ['water', 'juice'];

orderDrink(...drinks);


// if you did it without the Spread Operator, it would be like this
orderDrink(drinks[0], drinks[1]);

使用扩展运算符：

从 ES2018 开始，Spread 运算符实际上也适用于对象，即使对象不是可迭代的，例如：

const restaurant = {
  name: 'spongeBob restaurant',
  location: 'Bikini bottom',
  chef: 'spongeBob',
};

// adding new properties

const restaurantNew = { ...restaurant, netWorth: 'billions' };

// making a copy

const restaurantCopy = { ...restaurant };

在第一个中，我们创建了一个具有与餐厅对象相同属性的新对象，但我们添加了另一个属性，即 netWorth 属性。

在第二个中，我们复制了餐厅对象，请注意，对复制对象的更改不会影响原始对象，反之亦然。

CLIS.CC

JavaScript 扩展运算符

JavaScript 扩展运算符 (…)