JavaScript 扩展运算符

JavaScript 扩展运算符 (...)

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

*它可与数组和对象一起使用，在数组中，它的使用时间为：

1。 构建数组
2. 将参数传递给函数

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']

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

扩展运算符与数组的两个有用用例：

1.创建数组的副本：

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

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

2.合并两个或多个数组：

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- 将参数传递给函数

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]

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

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

• 在第一个中，我们创建了一个与餐馆对象具有相同属性的新对象，但我们添加了另一个属性，即 netWorth 属性。
• 在第二个中，我们复制了餐厅对象，请注意，对复制对象的更改不会影响原始对象，反之亦然。

希望您能理解这里的所有内容，如果您有任何疑问，请随时在评论部分提问，感谢您的阅读？

以上是JavaScript 扩展运算符的详细内容。更多信息请关注PHP中文网其他相关文章！