返回

揭秘JavaScript十种拷贝数组的妙招

前端

JavaScript中数组拷贝的十种妙招

在JavaScript中，数组是经常需要被操作的对象之一，有时候我们需要将数组中的元素拷贝到另一个数组中，可以使用下面十种方法：

  1. 使用slice()方法
const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.slice();
console.log(copiedArray); // 输出：[1, 2, 3, 4, 5]

slice()方法返回一个新数组，该数组包含从start索引到end索引(不包含end索引)的元素。如果不指定start和end索引，则返回一个包含原始数组所有元素的新数组。

  1. 使用concat()方法
const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.concat();
console.log(copiedArray); // 输出：[1, 2, 3, 4, 5]

concat()方法返回一个新数组，该数组包含第一个数组的所有元素，然后是第二个数组的所有元素，依此类推。如果只传入一个数组，则返回一个包含该数组所有元素的新数组。

  1. 使用扩展运算符（...）
const originalArray = [1, 2, 3, 4, 5];
const copiedArray = [...originalArray];
console.log(copiedArray); // 输出：[1, 2, 3, 4, 5]

扩展运算符（...）可以将数组展开为一个列表。这使得我们可以轻松地将数组中的元素拷贝到另一个数组中。

  1. 使用Array.from()方法
const originalArray = [1, 2, 3, 4, 5];
const copiedArray = Array.from(originalArray);
console.log(copiedArray); // 输出：[1, 2, 3, 4, 5]

Array.from()方法可以将一个类数组对象转换为一个数组。我们可以使用这个方法将数组中的元素拷贝到另一个数组中。

  1. 使用map()方法
const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.map((element) => element);
console.log(copiedArray); // 输出：[1, 2, 3, 4, 5]

map()方法可以将数组中的每个元素都应用一个函数，并返回一个新数组。我们可以使用这个方法将数组中的元素拷贝到另一个数组中。

  1. 使用reduce()方法
const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.reduce((accumulator, currentValue) => {
  accumulator.push(currentValue);
  return accumulator;
}, []);
console.log(copiedArray); // 输出：[1, 2, 3, 4, 5]

reduce()方法可以将数组中的所有元素累积为一个单一的值。我们可以使用这个方法将数组中的元素拷贝到另一个数组中。

  1. 使用filter()方法
const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.filter((element) => true);
console.log(copiedArray); // 输出：[1, 2, 3, 4, 5]

filter()方法可以将数组中的元素过滤掉，只留下满足特定条件的元素。我们可以使用这个方法将数组中的元素拷贝到另一个数组中。

  1. 使用JSON.parse()和JSON.stringify()方法
const originalArray = [1, 2, 3, 4, 5];
const copiedArray = JSON.parse(JSON.stringify(originalArray));
console.log(copiedArray); // 输出：[1, 2, 3, 4, 5]

JSON.parse()和JSON.stringify()方法可以将数组转换为JSON字符串，然后将JSON字符串转换为数组。我们可以使用这个方法将数组中的元素拷贝到另一个数组中。

  1. 使用for循环
const originalArray = [1, 2, 3, 4, 5];
const copiedArray = [];
for (let i = 0; i < originalArray.length; i++) {
  copiedArray.push(originalArray[i]);
}
console.log(copiedArray); // 输出：[1, 2, 3, 4, 5]

for循环可以遍历数组中的每个元素，并将它们添加到另一个数组中。我们可以使用这个方法将数组中的元素拷贝到另一个数组中。

  1. 使用forEach()方法
const originalArray = [1, 2, 3, 4, 5];
const copiedArray = [];
originalArray.forEach((element) => {
  copiedArray.push(element);
});
console.log(copiedArray); // 输出：[1, 2, 3, 4, 5]

forEach()方法可以遍历数组中的每个元素，并执行一个回调函数。我们可以使用这个方法将数组中的元素拷贝到另一个数组中。

这十种方法都可以用来拷贝数组，每种方法都有其独特的优势和适用场景。在实际开发中，我们可以根据需要选择合适的方法来拷贝数组。