Pelaksanaan salinan cetek JavaScript

Dalam pembangunan JavaScript, kita selalunya perlu berurusan dengan operasi salinan objek atau tatasusunan. Dalam pembangunan sebenar, kita sering menghadapi keperluan untuk salinan cetek, iaitu, menyalin kandungan satu objek atau tatasusunan ke objek atau tatasusunan lain Objek atau tatasusunan baharu yang disalin berkongsi sebahagian daripada data dengan objek atau tatasusunan asal. Artikel ini akan memperkenalkan cara melaksanakan salinan cetek dalam JavaScript.

1. Apakah salinan cetek?

Dalam JavaScript, objek dan tatasusunan ialah kedua-dua jenis rujukan Apabila kami menetapkan objek atau tatasusunan kepada pembolehubah baharu, kami sebenarnya menetapkan rujukan objek atau tatasusunan kepada pembolehubah baharu.

Sebagai contoh, kod berikut memperuntukkan objek kepada pembolehubah baharu:

let obj1 = { name: '张三', age: 18 };
let obj2 = obj1;

Dalam contoh ini, obj2 dan obj1 bukan dua objek berbeza, tetapi tuding kepada Dua yang sama rujukan kepada alamat ingatan.

Dalam pembangunan sebenar, kita mungkin perlu menyalin kandungan satu objek atau tatasusunan ke objek atau tatasusunan lain, dalam hal ini salinan cetek diperlukan.

Salinan cetek merujuk kepada menyalin hanya struktur data peringkat pertama objek atau tatasusunan Jika objek atau tatasusunan juga mengandungi objek atau tatasusunan, objek atau tatasusunan baharu yang disalin akan berkongsi jenis rujukan ini dengan objek asal. atau tatasusunan adalah seperti yang ditunjukkan di bawah:

Seperti yang ditunjukkan dalam rajah, objek A mengandungi dua atribut a dan b. Nilai atribut b ialah objek B Ia juga mengandungi dua sifat c dan d. Apabila salinan cetek dibuat daripada objek A, objek baru C dihasilkan Objek C berkongsi atribut a dan b dengan objek A. Iaitu, salinan cetek hanya menyalin struktur peringkat pertama objek A, manakala objek B hanya. dirujuk sekali. Objek C dan objek A berkongsi objek B, iaitu alamat kedua-dua objek adalah sama.

2. Kaedah pelaksanaan salinan cetek

Berikut akan memperkenalkan beberapa kaedah pelaksanaan salinan cetek biasa dalam JavaScript.

1. Traversal manual

Melintasi objek atau tatasusunan secara manual, menyalin setiap sifat atau elemen ke objek atau tatasusunan baharu. Kaedah ini mudah dan mudah difahami, dan kodnya sangat mudah dibaca Walau bagaimanapun, untuk objek atau tatasusunan dengan banyak tahap bersarang, jumlah kod akan menjadi sangat besar.

function shallowCopy(obj) {
  if (Array.isArray(obj)) {
    return obj.slice();
  } else if (typeof obj === 'object' && obj !== null) {
    let newObj = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        newObj[key] = obj[key];
      }
    }
    return newObj;
  } else {
    return obj;
  }
}

Dalam contoh ini, kita mula-mula menentukan sama ada objek yang hendak disalin ialah tatasusunan atau objek. Jika ia adalah tatasusunan, kami menggunakan kaedah slice() untuk membuat salinan cetek; jika ia adalah objek, kami melingkari sifat objek dan menyalin setiap sifat ke objek baharu, dan akhirnya mengembalikan objek baharu. Kaedah

2. Object.assign()

Object.assign() digunakan untuk menyalin sifat satu atau lebih objek ke objek sasaran Jika berbilang objek mempunyai sifat yang sama , sifat dalam objek seterusnya akan menimpa sifat dalam objek sebelumnya. Object.assign() Kaedah hanya akan menyalin struktur data peringkat pertama objek Jika objek mengandungi atribut jenis rujukan, objek baharu dan objek asal akan berkongsi atribut jenis rujukan ini.

let obj1 = { name: '张三', age: 18, hobbies: ['coding', 'reading'] };
let obj2 = Object.assign({}, obj1);

Dalam contoh ini, kami menggunakan kaedah Object.assign() untuk menyalin objek obj1 ke objek kosong baharu, menjana objek baharu obj2.

Perhatikan bahawa apabila menggunakan kaedah Object.assign(), parameter pertama mestilah objek sasaran, dan parameter berikut ialah objek sumber Jika objek sumber mempunyai atribut yang sama, atribut dalam objek berikutnya akan tulis ganti pada sifat objek sebelumnya. Jika terdapat sifat dalam objek sumber yang merupakan jenis rujukan, objek baharu yang disalin akan berkongsi sifat ini dengan objek asal.

3. Pengendali penyebaran

Pengendali penyebaran ialah sintaks baharu dalam ES6 yang boleh digunakan untuk mengembangkan tatasusunan atau objek dan menyalin kandungannya ke tatasusunan atau objek lain. Operator spread hanya boleh digunakan pada struktur data peringkat pertama objek atau tatasusunan Jika objek atau tatasusunan mengandungi sifat jenis rujukan, objek atau tatasusunan baharu akan berkongsi sifat ini dengan objek atau tatasusunan asal.

let arr1 = [1, 2, 3];
let arr2 = [...arr1];

let obj1 = { name: '张三', age: 18, hobbies: ['coding', 'reading'] };
let obj2 = { ...obj1 };

Dalam contoh ini, kami menggunakan operator hamparan untuk menyalin kandungan tatasusunan arr1 dan objek obj1 ke dalam tatasusunan dan objek baharu, menjana tatasusunan baharu arr2 dan objek obj2.

Pengendali hamparan mudah dan ringkas untuk digunakan, dan kodnya sangat mudah dibaca Walau bagaimanapun, untuk objek atau tatasusunan dengan banyak tahap bersarang, jumlah kod masih agak besar. Kaedah

4. Array.from()

Array.from() digunakan untuk menukar objek seperti tatasusunan atau objek boleh lelar kepada tatasusunan baharu, yang boleh digunakan untuk tatasusunan Salinan cetek.

let arr1 = [1, 2, 3];
let arr2 = Array.from(arr1);

Dalam contoh ini, kami menggunakan kaedah Array.from() untuk menukar tatasusunan arr1 kepada tatasusunan arr2 baharu, melaksanakan salinan cetek.

Perlu diambil perhatian bahawa kaedah Array.from() hanya boleh digunakan untuk salinan cetek objek seperti tatasusunan atau objek boleh lelar Jika anda perlu membuat salinan cetek objek, anda perlu menggunakan kaedah lain .

3. Ringkasan

Artikel ini memperkenalkan pelaksanaan salinan cetek dalam JavaScript, termasuk traversal manual, kaedah Object.assign(), operator spread dan kaedah Array.from(). Dalam pembangunan sebenar, kita boleh memilih kaedah yang paling sesuai untuk melaksanakan operasi salinan cetek mengikut keperluan sebenar. Perlu diingatkan bahawa salinan cetek hanya menyalin struktur data peringkat pertama objek atau tatasusunan Jika objek atau tatasusunan mengandungi atribut jenis rujukan, objek atau tatasusunan baharu yang disalin oleh salinan cetek akan berkongsi atribut ini dengan objek atau tatasusunan asal. . Jika anda perlu melaksanakan salinan dalam, anda perlu menggunakan kaedah lain untuk beroperasi.

Atas ialah kandungan terperinci Pelaksanaan salinan cetek JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!