Kopieren Sie die Werte eines Arrays

Question

Beim Kopieren eines Arrays in ein anderes in JavaScript:

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

Mir ist aufgefallen, dass arr2 auf dasselbe Array wie arr1 verweist, nicht auf ein neues, unabhängiges Array. Wie kopiere ich ein Array, um zwei separate Arrays zu erhalten?

Answer 1

在Javascript中，深拷贝技术取决于数组中的元素。让我们从这里开始。

三种类型的元素

元素可以是：字面值、字面结构或原型。

// 字面值（类型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 () {}

从这些元素中，我们可以创建三种类型的数组。

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

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

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

深拷贝技术取决于这三种数组类型

根据数组中元素的类型，我们可以使用各种技术进行深拷贝。

深拷贝技术

基准测试

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

• 字面值数组（类型1）
  可以使用 [ ...myArray ]、myArray.splice(0)、myArray.slice() 和 myArray.concat() 技术来深拷贝只包含字面值（布尔值、数字和字符串）的数组；其中在Chrome中，slice() 的性能最高，在Firefox中，扩展运算符 ... 的性能最高。

• 字面值数组（类型1）和字面结构数组（类型2）
  可以使用 JSON.parse(JSON.stringify(myArray)) 技术来深拷贝字面值（布尔值、数字、字符串）和字面结构（数组、对象），但不能拷贝原型对象。

• 所有数组（类型1、类型2、类型3）

  • 可以使用 Lo-dash 的 cloneDeep(myArray) 或 jQuery 的 extend(true, [], myArray) 技术来深拷贝所有类型的数组。其中Lodash的 cloneDeep() 技术性能最高。
  • 对于那些避免使用第三方库的人来说，下面的自定义函数可以深拷贝所有类型的数组，性能低于 cloneDeep()，但高于 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;
}

所以回答这个问题...

问题

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

答案

因为 arr1 是一个包含字面值（布尔值、数字或字符串）的数组，你可以使用上面讨论的任何深拷贝技术，其中 slice() 和扩展运算符 ... 的性能最高。

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

使用这个：

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

let newArray = oldArray.slice();

console.log({newArray});