Copy the values ​​of an array

Question

When copying one array to another in JavaScript:

var arr1 = ['a','b','c'];
var arr2 = arr1;
arr2.push('d'); // Now, arr1 = ['a','b','c','d']

I realized that arr2 was referencing the same array as arr1, not a new, independent array. How do I copy an array to get two separate arrays?

Answer 1

In Javascript, deep copy technology depends on the elements in the array. Let's start here.

Three types of elements

Elements can be: literal values, literal structures or prototypes.

// 字面值（类型1）
const booleanLiteral = true;
const numberLiteral = 1;
const stringLiteral = 'true';

// 字面结构（类型2）
const arrayLiteral = [];
const objectLiteral = {};

// 原型（类型3）
const booleanPrototype = new Bool(true);
const numberPrototype = new Number(1);
const stringPrototype = new String('true');
const arrayPrototype = new Array();
const objectPrototype = new Object(); // 或者 `new function () {}

From these elements, we can create three types of arrays.

// 1) 字面值数组（布尔值、数字、字符串） 
const type1 = [ true, 1, "true" ];

// 2) 字面结构数组（数组、对象）
const type2 = [ [], {} ];

// 3) 原型对象数组（函数）
const type3 = [ function () {}, function () {} ];

Deep copy technology depends on these three array types

Depending on the type of elements in the array, we can use various techniques to perform deep copies.

Deep copy technology

Benchmarks

https://www.measurethat.net/Benchmarks/Show/17502/0/deep-copy-comparison

• Literal array (type 1)
  You can use [ ...myArray ], myArray.splice(0), myArray.slice() and myArray.concat() Techniques for deep copying arrays containing only literal values ​​(Boolean values, numbers, and strings); among them, slice() has the highest performance in Chrome, and in Firefox, the spread operator. .. has the highest performance.

• Literal value array (type 1) and literal structure array (type 2)
  You can use JSON.parse(JSON.stringify(myArray)) technology to deep copy literal values ​​(Boolean values, numbers, strings) and literal structures (arrays, objects), but prototype objects cannot be copied.

• All arrays (type 1, type 2, type 3)

  • You can use Lo-dash's cloneDeep(myArray) or jQuery's extend(true, [], myArray) technology To deep copy arrays of all types. Among them, Lodash's cloneDeep() has the highest technical performance.
  • For those who avoid using third-party libraries, the following custom function can deep copy all types of arrays, with performance lower than cloneDeep(), but higher than extend(true ).

function copy(aObject) {
  // 防止未定义的对象
  // if (!aObject) return aObject;

  let bObject = Array.isArray(aObject) ? [] : {};

  let value;
  for (const key in aObject) {

    // 防止自引用到父对象
    // if (Object.is(aObject[key], aObject)) continue;
    
    value = aObject[key];

    bObject[key] = (typeof value === "object") ? copy(value) : value;
  }

  return bObject;
}

So answer this question...

question

var arr1 = ['a','b','c'];
var arr2 = arr1;

Answer

Because arr1 is an array containing literals (booleans, numbers, or strings), you can use any of the deep copy techniques discussed above, where slice() and The spread operators ... have the highest performance.

arr2 = arr1.slice();
arr2 = [...arr1];
arr2 = arr1.splice(0);
arr2 = arr1.concat();
arr2 = JSON.parse(JSON.stringify(arr1));
arr2 = copy(arr1); // 需要自定义函数，上面已提供
arr2 = _.cloneDeep(arr1); // 需要Lo-dash.js
arr2 = jQuery.extend(true, [], arr1); // 需要jQuery.js

Answer 2

use this:

let oldArray = [1, 2, 3, 4, 5];

let newArray = oldArray.slice();

console.log({newArray});