Source: twitter

Function: Milos

Translator: Front-end wisdom

The more you know, the more you don’t know

Like it and see. Make it a habit


GitHub: github.com/qq449245884… Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

In order to ensure readability, this paper adopts free translation rather than literal translation.

Array copying is often misunderstood, but not because of the copying process itself, but because of a lack of understanding of how JS handles arrays and their elements. Arrays in JS are mutable, which means that you can modify the contents of an array after creating it.

This means that to copy an array, we can’t simply assign the old array to a new variable, which is also an array. If you do, they will share the same reference, and after changing one variable, the other variable will be affected by the change. That’s why we need to clone this array.

Let’s take a look at some interesting methods and tricks for copying arrays of clones.

Tip 1 – UseArray.slicemethods

const numbers = [1, 2, 3, 4, 5] const copy = numbers. Slice () copy. Push (6) // Add a new entry to prove that the original array will not be modified console.log(copy) console.log(numbers) // [1, 2, 3, 4, 5, 6] // [1, 2, 3, 4, 5]Copy the code

Tip 2 – UseArray.mapmethods

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) is not modified; console.log(numbers); [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]Copy the code

Tip 3 – UseArray.from methods

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) will not be modified; console.log(numbers); [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]Copy the code

Tip 4 – Use the expansion 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) will not be modified; console.log(numbers); [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]Copy the code

Tip 5 – UseArray.ofMethod and expansion operator

const numbers = [1, 2, 3, 4, 5]; const copy = Array.of(... numbers); copy.push(6); // Add a new entry to prove that the original array console.log(copy) will not be modified; console.log(numbers); [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]Copy the code

The array.of () method creates a new Array instance with a variable number of arguments, regardless of the number or type of arguments. The difference between array.of () and Array constructors is that they handle integer arguments: 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 with seven empty Spaces, not seven undefined ones.

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

Tip 6 – Use the Array constructor and the expansion operator

const numbers = [1, 2, 3, 4, 5]; const copy = new Array(... numbers); copy.push(6); // Add a new entry to prove that the original array console.log(copy) will not be modified; console.log(numbers); [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]Copy the code

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) will not be modified; console.log(numbers); [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]Copy the code

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) will not be modified; console.log(numbers); [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]Copy the code

Tip 9 – UseArray.pushMethod and expansion operator

const numbers = [1, 2, 3, 4, 5]; let copy = []; copy.push(... numbers); copy.push(6); // Add a new entry to prove that the original array console.log(copy) will not be modified; console.log(numbers); [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]Copy the code

Tip 10 – UseArray.unshift Method and expansion operator

const numbers = [1, 2, 3, 4, 5]; let copy = []; copy.unshift(... numbers); copy.push(6); // Add a new entry to prove that the original array console.log(copy) will not be modified; console.log(numbers); [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]Copy the code

Tip 11 – UseArray.forEachMethod and expansion operator

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) will not be modified; console.log(numbers); [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]Copy the code

Tip 12 – Useforcycle

const numbers = [1, 2, 3, 4, 5]; let copy = []; for (let i = 0; i < numbers.length; i++) { copy.push(numbers[i]); } copy.push(6); // Add a new entry to prove that the original array console.log(copy) will not be modified; console.log(numbers); [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]Copy the code

Tip 13 – UseArray.reducemethods

This approach is feasible, but more redundant, less use

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) will not be modified; console.log(numbers); [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]Copy the code

Tip 14 – Use ancientapplymethods

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

let copy = []; Array.prototype.push.apply(copy, numbers); copy.push(6); // Add a new entry to prove that the original array console.log(copy) will not be modified; console.log(numbers); [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5]Copy the code

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: twitter.com/protic_milo…

conclusion

If we change the value of the object, the other object will change as well. For example, if we change the value of the element in the array as an object, we can do as follows:

Const authors = [{name: 'rotator ', age: 25}, {name:' rotator ', age: 25}, const authors = [{name: 'rotator ', age: 25}, {name:' rotator ', age: 30},] const copy = [...authors] copy[0]. Name = 'updatedauthors' console.log(copy) console.log(authors)Copy the code

The output

So the above technique is suitable for simple data structures, but for complex structures use deep copy. Array copying is often misunderstood, but not because of the copying process itself, but because of a lack of understanding of how JS handles arrays and their elements.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.