ES10 的 Array.copyWithin() 方法使用技巧-JavaScript中文网-JavaScript教程资源分享门户

在 ES10 中，Array.copyWithin() 方法被引入到 JavaScript 中，这个方法可以让你在一个数组中复制并粘贴元素。这个方法能让你在不创建新数组的情况下在数组内部重新排列元素顺序。本文将介绍 Array.copyWithin() 方法的基本语法、参数、示例及其使用技巧。

基本语法

Array.copyWithin() 方法遵循下面的语法：

array.copyWithin(target, start[, end])

其中：

target：是一个索引，在该索引处开始复制元素。
start：是一个索引，从该索引处复制元素。
end：是一个索引，该索引处的元素不会被复制。默认为数组的末尾。

参数说明

在 Array.copyWithin() 方法中，start 参数和 end 参数都是可选的。如果不指定 end，默认为整个数组。如果 start 为负数，则表示从数组末尾开始计数。如果 target 为负数，则表示从数组末尾开始计数并移动到的位置。

例子

下面是一个简单的示例，其中有一个数组并且我们使用 Array.copyWithin() 方法复制了几个元素：

const colors = ["red", "green", "blue", "yellow", "black"];

colors.copyWithin(1, 3, 4);

console.log(colors);

在此示例中，我们复制了从索引 3 开始的元素，并将它们复制到索引 1 的位置。因此，数组中的元素将变为：

["red", "yellow", "blue", "yellow", "black"]

使用技巧

Array.copyWithin() 方法的使用非常灵活，并且非常适合在需要将数组中的元素重新排列时使用。下面是几个使用技巧：

通过重叠部分进行复制

如果你指定的 target 值和 start 值有重叠，那么，源数组中的值将被复制到目标位置，覆盖当前位置的值。看下面的例子：

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

numbers.copyWithin(1, 0, 3);

console.log(numbers);

在此示例中，我们将复制整个数组中的前三个元素并将它们复制到数组的第二个位置。这将使数组中的元素变为：

[1, 1, 2, 3, 5]

不影响原数组的复制

Array.copyWithin() 方法不会修改原数组，如果你不想改变源数组，可以将它复制到另一个数组中，然后对该数组执行更改，而不会影响原数组：

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

const numbersCopy = [...numbers];

numbersCopy.copyWithin(1, 0, 3);

console.log(numbersCopy); // [1, 1, 2, 3, 5]
console.log(numbers);     // [1, 2, 3, 4, 5]

在这个示例中，我们使用了扩展运算符来复制原始数组到 numbersCopy 数组中，并用该数组执行更改，而源数组保持原样。

从结尾复制

当从结尾复制时，您可以将负整数作为索引传递给 start 和 target，这使得 Array.copyWithin() 方法非常强大。例如：

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

numbers.copyWithin(-3, -1);

console.log(numbers); // [1, 2, 4, 5, 5]

在此示例中，我们将倒数第二个元素复制到了最后一个元素的位置。如上所述，如果 target 是负数，则表示从数组末尾开始计数并移动到的位置。

结论

Array.copyWithin() 方法是一个灵活而强大的工具，可以使您的 JavaScript 代码更高效。通过使用 Array.copyWithin() 方法，您可以在不创建新数组的情况下重新排列数组中的元素，这就是它的优点。但每个方法都有其使用场景，您应该在确定是否要使用它之前慎重考虑。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67194b7dad1e889fe230a951