JavaScript 中 Spread 与数组的 6 个用例

以下是在 JavaScript 中使用 Spread 运算符和数组的 6 种方法。你可以使用它来合并或克隆数组，或者用它将可迭代对象转换为数组。

// Merge Array
[...array1, ...array2]

// Clone Array
[...array]

// Sting → Array
[...'string']

// Set  → Array
[...new Set([1,2,3])]

// Node List → Array
[...nodeList]

// Arguments → Array
[...arguments]

了解传播

MDN：扩展语法允许在需要零个或多个参数（对于函数调用）或元素（对于数组文字）的位置扩展可迭代对象（例如数组表达式或字符串），或者在需要零个或多个键值对（对于对象文字）的位置扩展对象表达式。

一目了然吧😂 我花了很长时间才理解Spread的含义。所以，我试着用两个对我有帮助的比喻来解释一下。希望也能帮到你🤞

传播就像俄罗斯套娃

扩展语法会将你的数组展开为多个元素。想象一下，你的数组就像那些俄罗斯套娃。当你对它调用扩展语法时，它会将嵌套的俄罗斯套娃取出，并将其拆分成独立的部分。

图片来源：维基百科

传播就像橡皮擦

如果俄罗斯套娃的类比没有帮助，并且 Spread 对你来说仍然很混乱，在这种情况下，只需将...语法想象成一个橡皮擦，删除数组的括号 😂

[
  ...[1, 2, 3] // 👈 The dots erases the brackets
]

/*  Becoming this: */
[
  1, 2, 3 // 👈 "Erased"
]

数组操作

Spread 语法的最大优点是可以用于数组操作👏

1. 使用 Spread 合并数组

假设我们有 2 个数组。

const array1 = [1, 2, 3];

const array2 = [4, 5, 6];

让我们看看当我们尝试不使用扩展语法来合并数组时会发生什么。

const attemptToMerge = [array1, array];

attemptToMerge;
// [ [1, 2, 3],  [4, 5, 6] ] 👈 😱

👆 当您尝试合并一个不使用扩展语法的数组时，您最终会得到一个嵌套或多维数组。

因此，让我们使用 Spread 语法来“擦除”括号。

const mergedArray = [
  ...array1,
  ...array2
];

mergedArray;
// [ 1, 2, 3, 4, 5, 6 ]

2. 克隆阵列

在 JavaScript 中克隆数组并非那么简单。所以，我们来看看两种方法——错误的方法和正确的方法。

错误克隆阵列

在 JavaScript 中，数组是引用类型，因此你不能直接使用来创建数组的新副本=。让我们看看如果尝试这样做会发生什么问题。

const original = ['zero', 'one'];
const newArray = original;

original; // ['zero', 'one']
newArray; // ['zero', 'one']

👆到目前为止一切看起来都很好，但是让我们看看如果我们改变元素会发生什么。

newArray[1] = '💩';

newArray;
// ['zero', '💩']

original;
// ['zero', '💩']  👈 😱 Our original array is affected

哦，哎呀😱 改变newArray将会改变原始数组👎

将引用视为地址。当我们使用复制数组时=，我们只是复制了地址，并没有复制底层数组，而这正是我们想要的。为此，我们需要将数组复制到新的地址。这样，当我们对新数组进行更改时，就不会影响原始数组——因为它们位于不同的地址。

克隆阵列的正确方法

const original = ['zero', 'one'];
const newArray = [...original];

original; // ['zero', 'one']
newArray; // ['zero', 'one']

所以如果我们操作正确，original即使更改了，数组也不会受到影响newArray。好吧，我们来试试吧💪

newArray[1] = '💩';

newArray;
// ['zero', '💩']

original;
// ['zero', 'one']  ✅ original array is NOT affected

可迭代对象到数组

使用 Spread，将不同的数据类型转换为数组从未如此简单👏

3. 字符串转数组

当我们展开 a 时string，它将返回一个包含单个子字符串的数组。

const string = 'hi';

const array = [...string];

array;
// [ 'h' , 'i' ]

4.设置为数组

让我们创建一个新set对象：

const set = new Set([1, 2, 3]);

set;
// Set(3) {1, 2, 3}

使用 Spread，我们可以将其转换set为数组：

const array = [...set];

array;
// [1, 2, 3]

5. 节点列表转数组

让我们创建一个节点列表：

const nodeList = document.querySelectorAll('p');

nodeList;
// [p, p, p]

现在我们可以使用 Spread 将节点列表转换为数组：

const array = [...nodeList];

array;

6. 数组参数

在我们开始之前，让我们花点时间来了解一下arguments对象是什么。

MDN：arguments 是一个可在函数内部访问的类似数组的对象，它包含传递给该函数的参数的值。

👆 注意这里的键array-like——它看起来像一个数组，但实际上不是（哦，JS，你总是把事情搞得这么有趣，好让我们理解你😅）。将参数对象转换为数组的好处是，我们可以访问所有很棒的数组方法（例如map，，，filter）find。👍

function names() {
  arguments;
  // Arguments(4)['samantha', 'sam']

  arguments.map(name => `hi ${name}`);
  // ❌ TypeError: arguments.map is not a function
}

names('samantha', 'sam');

好吧，让我们将参数转换为数组，以便我们可以对其应用数组方法🙌

function names() {
  const argumentsArray = [...arguments];

  argumentsArray.map(name => `hi ${name}`);
  // ✅ ['hi samantha', 'hi sam']
}

names('samantha', 'sam');

社区意见

@harmleprinze：考虑到 Split 需要分隔符和限制，它将提供更多选项
@mohammed_mamoun_98：如果你合并两个数组而不展开，它们会变成二维数组，但 flat 会让它变成一维数组，我想这样会更有效。你可以试试。
@bukazoltan： andmin()因此max()扩展它也可以解决这个问题......它为我省去了很多麻烦。

array = [1, 2, 3, 4, 5];
var minimum = Math.min(...array);
var maximum = Math.max(...array);

资源

感谢阅读❤
打个招呼！Instagram | Twitter | SamanthaMing.com

文章来源：https://dev.to/samanthaming/6-use-cases-of-spread-with-array-in-javascript-2n53