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

This article mainly introduces "javascript copy array skills". In daily operation, I believe many people have doubts about the skills of javascript copy arrays. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "javascript copy array skills". Next, please follow the editor to study!

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 the `Array.of` method and the unfold operator

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 the `Array.push` method and the unfold operator

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 the `Array.unshift `method and the unfold operator

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 the `Array.forEach` method and the unfold 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); console.log (numbers); / / output / / [1, 2, 3, 4, 5, 6] / [1, 2, 3, 4, 5]

Tip 12-use the `for` loop

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

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); 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

At this point, the study of "skills for javascript copying arrays" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.