作者：Yazeed Bzadough

译者：allen

JavaScript 有很多方法可以做任何事情，现在我们研究数组。

1.扩展运算符(浅拷贝)

自从 ES6 发布以来，这一直是最受欢迎的方法。这是一个简短的语法，你会发现它在使用像 React 和 Redux 这样的库时非常有用。

numbers = [1, 2, 3];

numbersCopy = [...numbers];

注意：这不能安全地复制多维数组。数组/对象值通过引用而不是按值复制。

这可以

numbersCopy.push(4);

console.log(numbers, numbersCopy);

// [1, 2, 3] and [1, 2, 3, 4]

// numbers is left alone

这不可以

nestedNumbers = [[1], [2]];

numbersCopy = [...nestedNumbers];

numbersCopy[0].push(300);

console.log(nestedNumbers, numbersCopy);

// [[1, 300], [2]]

// [[1, 300], [2]]

// They've both been changed because they share references

2.for 循环(浅拷贝)

由于我们的圈子中流行的函数式编程，使得这种方法最不受欢迎

numbers = [1, 2, 3];

numbersCopy = [];

for (i = 0; i < numbers.length; i++) {

numbersCopy[i] = numbers[i];

}

注意：这不能安全地复制多维数组。由于你使用的是=运算符，因此它将通过引用而不是值来分配对象/数组。

这可以

numbersCopy.push(4);

console.log(numbers, numbersCopy);

// [1, 2, 3] and [1, 2, 3, 4]

// numbers is left alone

这不可以

nestedNumbers = [[1], [2]];

numbersCopy = [];

for (i = 0; i < nestedNumbers.length; i++) {

numbersCopy[i] = nestedNumbers[i];

}

numbersCopy[0].push(300);

console.log(nestedNumbers, numbersCopy);

// [[1, 300], [2]]

// [[1, 300], [2]]

// They've both been changed because they share references

3.while 循环(浅拷贝)

同 for 循环一样，不纯的、命令式的, blah, blah, blah... 但有效！

numbers = [1, 2, 3];

numbersCopy = [];

i = -1;

while (++i < numbers.length) {

numbersCopy[i] = numbers[i];

}

注意：这也通过引用而不是按值分配对象/数组。

这可以

numbersCopy.push(4);

console.log(numbers, numbersCopy);

// [1, 2, 3] and [1, 2, 3, 4]

// numbers is left alone

这不可以

    nestedNumbers = [[1], [2]];

numbersCopy = [];

i = -1;

while (++i < nestedNumbers.length) {

numbersCopy[i] = nestedNumbers[i];

}

numbersCopy[0].push(300);

console.log(nestedNumbers, numbersCopy);

// [[1, 300], [2]]

// [[1, 300], [2]]

// They've both been changed because they share references

4.Array.map (浅拷贝)

回到现代领域，我们将找到 map 函数，基于数学，map 是将一组转换为另一种类型的集合，同时保留结构的概念。

这意味着 Array.map 每次都返回一个长度相同的数组。

要使列表中数字加倍，可以使用 map 带加倍函数

numbers = [1, 2, 3];

double = (x) => x * 2;

numbers.map(double);

什么是克隆

没错，这篇文章是关于克隆数组的。要复制数组，只需返回 map 调用中的元素即可。

numbers = [1, 2, 3];

numbersCopy = numbers.map((x) => x);

如果你想更数学一点，(x)=> x 被称为身份。它返回给出的任何参数。

map(identity) 复制一个列表

identity = (x) => x;

numbers.map(identity);

// [1, 2, 3]

注意：这也通过引用而不是按值分配对象/数组。

5.Array.filter (浅拷贝)

此函数返回一个数组，就像 map 一样，但它不能保证长度相同。

如果你要过滤偶数数字怎么办？

[1, 2, 3].filter((x) => x % 2 === 0)

// [2]

输入数组长度为3，但结果长度为1。

如果 filter 始终返回 true，就会重复

numbers = [1, 2, 3];

numbersCopy = numbers.filter(() => true);

每个元素都通过测试，因此返回。

注意：这也通过引用而不是按值分配对象/数组。

6.Array.reduce (浅拷贝)

使用 reduce 来克隆数组感觉非常不好，因为它远比此强大，让我们开始...

numbers = [1, 2, 3];

numbersCopy = numbers.reduce((newArray, element) => {

newArray.push(element);

return newArray;

}, []);

reduce 在循环遍历列表时转换初始值。

这里的初始值是一个空数组，我们将逐步填充每个元素。必须从要在下一次迭代中使用的函数返回该数组。

注意：这也通过引用而不是按值分配对象/数组。

7.Array.slice (浅拷贝)

slice 根据你提供的开始/结束索引返回数组的副本。

如果我们想要前3个元素：

[1, 2, 3, 4, 5].slice(0, 3);

// [1, 2, 3]

// Starts at index 0, stops at index 3

如果我们想要所有元素，请不要给出任何参数

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

numbersCopy = numbers.slice();

// [1, 2, 3, 4, 5]

注意：这也通过引用而不是按值分配对象/数组。

8.JSON.parse 和 JSON.stringify (深拷贝)

JSON.stringify 将对象转换为字符串

JSON.parse 将字符串转换为对象

组合它们可以将对象转换为字符串，然后反转该过程以创建全新的数据结构。

注意：这也通过引用而不是按值分配对象/数组。

nestedNumbers = [[1], [2]];

numbersCopy = JSON.parse(

JSON.stringify(nestedNumbers)

);

numbersCopy[0].push(300);

console.log(nestedNumbers, numbersCopy);

// [[1], [2]]

// [[1, 300], [2]]

// These two arrays are completely separate!

9.Array.concat (浅拷贝)

concat 将数组与值或其他数组组合在一起。

[1, 2, 3].concat(4); // [1, 2, 3, 4]

[1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5]

如果你不提供任何内容或空数组，则返回副本。

[1, 2, 3].concat(); // [1, 2, 3]

[1, 2, 3].concat([]); // [1, 2, 3]

注意：这也通过引用而不是按值分配对象/数组。

10.Array.from (浅拷贝)

这可以将任何可迭代对象转换为数组。给数组返回一个副本。

numbers = [1, 2, 3];

numbersCopy = Array.from(numbers)

// [1, 2, 3]

注意：这也通过引用而不是按值分配对象/数组。

总结

嗯，这很有趣

我试着只用一步就克隆了。如果你采用多种方法和技术，你会发现更多方法。