JavaScript中的展开运算符有什么用？

了解 ES6 扩展运算符，以及这个强大的 JavaScript 功能的一些实际用途！

扩展运算符是 ES6 引入的 JavaScript 的一项功能，让您可以访问可迭代对象的内部。术语“可迭代对象”实际上只是一种数据类型类别的计算机科学术语。具体来说：数组、对象字面量和字符串。

是什么让它们“可迭代”？ 这些 JavaScript 类型可以以某种顺序方式遍历。例如，您可以在数组上使用 for 循环，或者使用对象字面量，您可以在循环中使用 for...。

扩展运算符有效地使您可以访问这些可迭代对象中的“东西”。让我们看一个例子来说明这意味着什么：

const foo = [
  'hello',
  'bonjour',
  'konnichiwa'
];
const bar = [...foo]; // the three dots "..." are the spread operator syntax!

console.log(bar);
// ['hello', 'bonjour', 'konnichiwa'];

变量 bar 得到了 foo 的精确副本！哇…

const foo = [
  <^>'hello',
  'bonjour',
  'konnichiwa'<^>
]
const bar = [...foo]

扩展运算符基本上挖出 foo 数组的内部，并将值扩展到 bar 中的新数组。

现在我们有了一个基本的想法，让我们看看展开运算符可能有用的常见任务。

复制可迭代对象

正如我们之前看到的，扩展运算符是复制可迭代对象的最佳方法之一。有更复杂的方法可以做到这一点，但是扩展运算符的简洁性使它变得非常容易。

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = ...foo; // uh-oh :<

有点偷偷摸摸地骗了你。您必须将其放入 bar 中的一组新括号中！ 😬

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = [...foo]; // woohoo! :>

console.log(bar);
// ['hello', 'bonjour', 'konnichiwa']

使用扩展运算符复制对象字面量与数组没有太大区别。只要记住 BYOB（带上你自己的括号）：

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {...foo};

console.log(bar);
// { english: 'hello', french: 'bonjour', japanese: 'konnichiwa' }

合并可迭代对象

扩展运算符也可用于从其他几个值组合单个值！

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = ['gutentag', 'hello-ey'];
const baz = [...foo, ...bar];

console.log(baz);
// ['hello', 'bonjour', 'konnichiwa', 'gutentag', 'hello-ey']

现在 baz 是 foo 和 bar 的合并值。您还可以将 spreaded 数组放在另一个数组中：

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = [...foo, 'gutentag', 'hello-ey'];

console.log(bar);
// ['hello', 'bonjour', 'konnichiwa', 'gutentag', 'hello-ey']

这就是你训练有素的 JavaScript 直觉可能会认为这看起来很奇怪的地方……但请记住，扩展运算符只是持有“东西”。你把那些“东西”放在哪里取决于你！ 💫

对象字面量如何？它与合并数组非常相似：

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {
  german: 'gutentag',
  canadian: 'hello-ey'
};
const baz = {...foo, ...bar};

console.log(baz);
// { english: 'hello', french: 'bonjour', japanese: 'konnichiwa', german: 'gutentag', canadian: 'hello-ey' }

繁荣！这曾经是 Object.assign() 的任务，但扩展语法使这更加简洁。

当有重复键时会发生什么？

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {
  english: 'howdy',
  german: 'gutentag'
};
const baz = {
  ...foo,
  ...bar,
  canadian: 'hello-ey',
  korean: 'annyeong'
};

console.log(baz);
// { english: 'howdy', french: 'bonjour', japanese: 'konnichiwa', german: 'gutentag', canadian: 'hello-ey', korean: 'annyeong' }

重复的键被覆盖！

请记住，省略号在变量前面而不是在之后： ...myVariable 不是 myVariable...

将参数输入函数

您可能很少遇到这种情况，但您也可以使用扩展运算符将参数输入函数。

const cube = [12, 30, 14];

function calcVolume(width, height, depth) {
  return width * height * depth;
};

calcVolume(12, 30, 14);         // basic
calcVolume.apply(null, cube);   // using "apply"
calcVolume(...cube);          // using "spread operator"

扩展运算符使将一系列参数输入函数变得非常容易。

你说了一些关于弦乐的事

最后，您还可以将扩展运算符与字符串一起使用，因为它们也被视为可迭代对象（它具有 slice 和 length 函数！）

const foo = "jumanji";
const bar = [...foo];

console.log(bar);
// [ "j", "u", "m", "a", "n", "j", "i" ]

除非您开发用于自然语言处理或某种机器学习的软件，否则您可能不需要对字符串使用扩展运算符。我不确定......但它绝对适用于字符串！

结论

扩展运算符是一项要求很高的功能，已经在 C++ 和 Python 等老式语言中提供，现在它就在这里！它使一些常见的编程任务非常容易完成，希望您学会了可以使用它的实用方法！

有关扩展运算符的深入文档，请参阅 MDN。