Shulou(Shulou.com)06/03 Report--

What are the skills of 14 copy arrays in JavaScript? I believe many inexperienced people don't know what to do about it. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Array copies are often misunderstood, but not because of the copy process itself, but because of a lack of understanding of how JS handles arrays and their elements. The array in JS is mutable, which means that the contents of the array can be modified after the array has been created.

This means that to copy an array, we cannot simply assign the old array to a new variable, it is also an array. If you do so, they will share the same reference, and after you change one variable, another variable will be affected by the change. That's why we need to clone this array.

Next, let's take a look at some interesting methods and techniques for copying and cloning arrays.

Tip 1-use the Array.slice method

Const numbers = [1, 2, 3, 4, 5] const copy = numbers.slice () copy.push (6) / / add a new item to prove that the original array console.log (copy) console.log (numbers) / / output / / [1, 2, 3, 4, 5, 6] / / [1, 2, 3, 4, 5]

Tip 2-use the Array.map method

Const numbers = [1,2,3,4,5] const copy = numbers.map (num = > num) copy.push (6) / / add a new entry to prove that the original array console.log (copy); console.log (numbers); / / output / / [1, 2, 3, 4, 5, 6] / [1, 2, 3, 4, 5]

Tip 3-use the Array.from method

Const numbers = [1, 2, 3, 4, 5]; const copy = Array.from (new Set (numbers)); copy.push (6); / / add a new entry to prove that the original array console.log (copy); console.log (numbers); / / output / / [1, 2, 3, 4, 5, 6] / [1, 2, 3, 4, 5]

Tip 4-use the unfold operator

Const numbers = [1, 2, 3, 4, 5]; const copy = [... numbers]; copy.push (6); / / add a new entry to prove that the original array console.log (copy); console.log (numbers); / / output / / [1, 2, 3, 4, 5, 6] / [1, 2, 3, 4, 5]

Tip 5-use Array.of methods and unfold operators

Const numbers = [1, 2, 3, 4, 5]; const copy = Array.of (.. array); copy.push (6); / / add a new entry to prove that the original array console.log (copy); console.log (numbers); / / output / / [1, 2, 3, 4, 5, 6] / [1, 2, 3, 4, 5]

The Array.of () method creates a new array instance with a variable number of arguments, regardless of the number or type of parameters. The difference between the Array.of () and Array constructors is that they deal with integer parameters: Array.of (7) creates an array with a single element of 7, while Array (7) creates an empty array of length 7 (note: this is an array of seven empty, not an array of seven undefined).

Array.of (7); / / [7] Array.of (1,2,3); / / [1,2,3] Array (7); / / [,] Array (1,2,3); / / [1,2,3]

Tip 6-use Array constructors and unfold operators

Const numbers = [1, 2, 3, 4, 5]; const copy = new Array (.. array); copy.push (6); / / add a new entry to prove that the original array console.log (copy); console.log (numbers); / / output / / [1, 2, 3, 4, 5, 6] / [1, 2, 3, 4, 5]

Tip 7-use deconstruction

Const numbers = [1,2,3,4,5]; const [... copy] = numbers; copy.push (6); / / add a new entry to prove that the original array console.log (copy); console.log (numbers); / / output / / [1, 2, 3, 4, 5, 6] / [1, 2, 3, 4, 5]

Tip 8-use the Array.concat method

Const numbers = [1,2,3,4,5]; const copy = numbers.concat (); copy.push (6); / / add a new entry to prove that the original array console.log (copy); console.log (numbers); / / output / / [1, 2, 3, 4, 5, 6] / [1, 2, 3, 4, 5]

Tip 9-use Array.push methods and unfold operators

Const numbers = [1, 2, 3, 4, 5]; let copy = []; copy.push (.. arrays); copy.push (6); / / add a new entry to prove that the original array console.log (copy); console.log (numbers); / / output / / [1, 2, 3, 4, 5, 6] / [1, 2, 3, 4, 5]

Tip 10-use Array.unshift methods and unfold operators

Const numbers = [1, 2, 3, 4, 5]; let copy = []; copy.unshift (.. arrays); copy.push (6); / / add a new entry to prove that the original array console.log (copy); console.log (numbers); / / output / / [1, 2, 3, 4, 5, 6] / [1, 2, 3, 4, 5]

Tip 11-use Array.forEach methods and unfold operators

Const numbers = [1,2,3,4,5]; let copy = []; numbers.forEach ((value) = > copy.push (value)); copy.push (6); / / add a new entry to prove that the original array console.log (copy); console.log (numbers); / / output / / [1, 2, 3, 4, 5, 6] / [1, 2, 3, 4, 5]

Tip 12-use for loops

Const numbers = [1,2,3,4,5]; let copy = []; for (let I = 0; I

< numbers.length; i++) { copy.push(numbers[i]); } copy.push(6); // 添加新项以证明不会修改原始数组 console.log(copy); console.log(numbers); // 输出 // [1, 2, 3, 4, 5, 6] // [1, 2, 3, 4, 5] 技巧 13 - 使用 Array.reduce 方法 这个做法是可行，但比较多余，少用 const numbers = [1, 2, 3, 4, 5]; const copy = numbers.reduce((acc, x) =>

{acc.push (x); return acc;}, []); copy.push (6); / / add a new entry to prove that the original array console.log (copy); console.log (numbers); / / output / / [1, 2, 3, 4, 5, 6] / / [1, 2, 3, 4, 5]

Tip 14-use the old apply method

Let copy = []; Array.prototype.push.apply (copy, numbers); copy.push (6); / / add a new entry to prove that the original array console.log (copy); console.log (numbers); / / output / / [1, 2, 3, 4, 5, 6] / / [1, 2, 3, 4, 5]

The BUG that may exist after the code deployment cannot be known in real time. In order to solve these BUG, we spent a lot of time debugging log. By the way, we recommend a useful BUG monitoring tool, Fundebug.

Original: https://twitter.com/protic_milos

Summary

Note that the above methods perform a shallow copy, that is, when the array element is an object, we change the value of the object, and the other one will change as well. In tip 4, if our array element is an object, it is as follows:

Const authors = [{name: 'front-end copy', age: 25}, {name: 'Wang Daye', age: 30},] const copy = [... authors] copy [0] .name = 'changed front-end wisdom' console.log (copy) console.log (authors)

Output

The above techniques are suitable for simple data structures and deep copies for complex structures. Array copies are often misunderstood, but not because of the copy process itself, but because of a lack of understanding of how JS handles arrays and their elements.

After reading the above, have you mastered the skills of 14 copy arrays in JavaScript? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.