Copier les valeurs d'un tableau

Question

Lors de la copie d'un tableau vers un autre en JavaScript :

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

J'ai réalisé que arr2 faisait référence au même tableau que arr1, et non à un nouveau tableau séparé. Comment copier un tableau pour obtenir deux tableaux distincts ?

Answer 1

En Javascript, la technique de copie profonde dépend des éléments du tableau. Commençons ici.

Trois types d'éléments

Les éléments peuvent être : des valeurs littérales, des structures littérales ou des 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 () {}

À partir de ces éléments, nous pouvons créer trois types de tableaux.

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

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

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

La technologie de copie profonde dépend de ces trois types de tableaux

En fonction du type d'éléments du tableau, nous pouvons utiliser diverses techniques pour effectuer des copies approfondies.

Technologie de copie approfondie

Benchmarks

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

• Tableau littéral (type 1)
  Des performances maximales peuvent être obtenues en utilisant [ ...myArray ]、myArray.splice(0)、myArray.slice() 和 myArray.concat() 技术来深拷贝只包含字面值（布尔值、数字和字符串）的数组；其中在Chrome中，slice() 的性能最高，在Firefox中，扩展运算符 ....

• Tableau de valeurs littérales (type 1) et tableau de structures littérales (type 2)
  Vous pouvez utiliser la technique JSON.parse(JSON.stringify(myArray)) pour copier en profondeur des valeurs littérales (valeurs booléennes, nombres, chaînes) et des structures littérales (tableaux, objets), mais les objets prototypes ne peuvent pas être copiés.

• Tous les tableaux (type 1, type 2, type 3)

  • Vous pouvez utiliser le cloneDeep(myArray) de Lo-dash ou le extend de jQuerycloneDeep(myArray) 或 jQuery 的 extend(true, [], myArray) 技术来深拷贝所有类型的数组。其中Lodash的 cloneDeep() (true, [], myArray) technique pour copier en profondeur des tableaux de tous types. Parmi eux, la technologie cloneDeep() de Lodash est la plus performante.
  • Pour ceux qui évitent d'utiliser des bibliothèques tierces, la fonction personnalisée ci-dessous peut copier en profondeur tous les types de tableaux avec des performances inférieures à celles de 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;
}

Alors pour répondre à cette question...

Question

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

Réponse

Parce que arr1 是一个包含字面值（布尔值、数字或字符串）的数组，你可以使用上面讨论的任何深拷贝技术，其中 slice() 和扩展运算符 ... a les performances les plus élevées.

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

Utilisez ceci :

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

let newArray = oldArray.slice();

console.log({newArray});