Salin nilai tatasusunan

Question

Apabila menyalin satu tatasusunan kepada tatasusunan lain dalam JavaScript:

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

Saya menyedari bahawa arr2 merujuk tatasusunan yang sama seperti arr1, bukan tatasusunan bebas yang baharu. Bagaimanakah cara saya menyalin tatasusunan untuk mendapatkan dua tatasusunan berasingan?

Answer 1

Dalam Javascript, teknik penyalinan dalam bergantung pada elemen dalam tatasusunan. Mari mulakan di sini.

Tiga jenis elemen

Elemen boleh berupa: nilai tersurat, struktur tersurat atau prototaip.

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

Daripada elemen ini, kita boleh mencipta tiga jenis tatasusunan.

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

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

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

Teknologi salinan dalam bergantung kepada tiga jenis tatasusunan ini

Bergantung pada jenis elemen dalam tatasusunan, kita boleh menggunakan pelbagai teknik untuk melakukan salinan dalam.

Teknologi salinan dalam

Tanda aras

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

• Tatasusunan literal (jenis 1)
  Prestasi maksimum boleh dicapai menggunakan [ ...myArray ]、myArray.splice(0)、myArray.slice() 和 myArray.concat() 技术来深拷贝只包含字面值（布尔值、数字和字符串）的数组；其中在Chrome中，slice() 的性能最高，在Firefox中，扩展运算符 ....

• Tatasusunan nilai literal (jenis 1) dan tatasusunan struktur literal (jenis 2)
  Anda boleh menggunakan teknik JSON.parse(JSON.stringify(myArray)) untuk menyalin nilai literal (nilai Boolean, nombor, rentetan) dan struktur literal (tatasusunan, objek), tetapi objek prototaip tidak boleh disalin.

• Semua tatasusunan (jenis 1, jenis 2, jenis 3)

  • Anda boleh menggunakan cloneDeep(myArray) Lo-dash atau jQuerycloneDeep(myArray) 或 jQuery 的 extend(true, [], myArray) 技术来深拷贝所有类型的数组。其中Lodash的 cloneDeep() lanjutan (true, [], myArray) teknik untuk menyalin tatasusunan dalam semua jenis. Antaranya, teknologi cloneDeep() Lodash mempunyai prestasi tertinggi.
  • Bagi mereka yang mengelak daripada menggunakan perpustakaan pihak ketiga, fungsi tersuai di bawah boleh menyalin secara mendalam semua jenis tatasusunan dengan prestasi yang lebih rendah daripada 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;
}

Jadi untuk menjawab soalan ini...

Soalan

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

Jawapan

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

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

Gunakan ini:

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

let newArray = oldArray.slice();

console.log({newArray});