Analisis mendalam kaedah penyalinan objek dalam JavaScript (dengan kod)

Dalam artikel sebelumnya "Perkara yang anda patut ketahui tentang penggunaan "pewarisan jquery" JavaScript (penjelasan kod terperinci) ", kami mengetahui tentang penggunaan "pewarisan jquery" JavaScript. Artikel berikut akan memperkenalkan anda kepada kaedah salinan objek dalam JS Rakan yang memerlukan boleh merujuknya.

Bercakap mengenai salinan objek dalam javascript, perkara pertama yang kita fikirkan ialah Object.assign()

JSON.parse(JSON.stringify()), dan ES6 Pengendali hamparan [...]

kerana dalam js pengendali = tidak boleh mencipta salinan objek, ia hanyalah rujukan kepada objek

pengendali

var x = {
  a: 1,
  b: 2,
};
y = x;
x.a = 10;
console.log(x); //{a:10, b:2}
console.log(y); //{a:10, b:2}

Jadi apabila melakukan operasi objek, pengendali yang sama (=) tidak digalakkan

Object.assign()

var x = {
  a: 1,
  b: 2,
};
y = Object.assign({}, x);
x.a = 10;
console.log(x); //{a:10, b:2}
console.log(y); //{a:1, b:2}

Di Sekali pandang, tiada pengecualian akan ditemui, kerana apa yang kita mahukan adalah hasil yang kita inginkan Mari kita buat struktur objek sedikit lebih rumit dan kemudian lihatlah

var x = {
  a: 1,
  b: 2,
  c: {
    d: 3,
  },
};
y = Object.assign({}, x);

x.a = 5;
console.log(x); //{a:5, b:2, c:{d:3}}
console.log(y); //{a:5, b:2, c:{d:3}}

x.c.d = 10;
console.log(x); //{a:5, b:2, c:{d:10}}
console.log(y); //{a:5, b:2, c:{d:10}}

Pada masa ini, kami menemui perangkap. , jadi ia telah dibuktikanObject.assign()Ia hanya melaksanakan salinan cetek objek

Object.assign()Perkara lain yang perlu diperhatikan ialah objek yang tidak boleh dikira dengan atribut pada rantai prototaip tidak boleh disalin pada kod:

var x = {
  a: 1,
};
var y = Object.create(x, {
  b: {
    value: 2,
  },
  c: {
    value: 3,
    enumerable: true,
  },
});
var z = Object.assign({}, y);
console.log(z); //{c:3}

Memang mengejutkan apabila mendapat nilai z, kerana x ialah rantai prototaip y, jadi x tidak akan disalin

Atribut b ialah atribut yang tidak boleh dikira Ia tidak akan disalin

Hanya c mempunyai keterangan yang boleh dikira, ia boleh dibilang, jadi ia boleh disalin

Perangkap di atas juga boleh diselesaikan dengan baik, dan pada masa hadapan Lihat di bawah:

Salinan mendalamJSON.parse(JSON.stringify())

Menyelesaikan perangkap salinan cetek

var x = {
  a: 1,
  b: 2,
  c: {
    d: 3,
  },
};
y = JSON.parse(JSON.stringify(x));
x.a = 5;
x.c.d = 10;
console.log(x); //{a:5, b:2, c:{d:10}}
console.log(y); //{a:1, b:2, c:{d:3}}

Sudah tentu, untuk objek biasa, kaedah penyalinan ini pada dasarnya sempurna Jadi di manakah perangkapnya

var x = {
  a: 1,
  b: function b() {
    return "2";
  },
};
y = JSON.parse(JSON.stringify(x));
z = Object.assign({}, x);

console.log(y); //{a:1}
console.log(z); //{a:1, b:function b(){return '2'}}

Daripada hasil, Object.assign() boleh menyalin kaedah, JSON.parse(JSON.stringify()) tidak boleh

<.> Mari kita lihat perangkap kedua:

var x = {
  a: 1,
  b: {
    c: 2,
    d: 3,
  },
};

x.c = x.b;
x.d = x.a;
x.b.c = x.c;
x.b.d = x.d;

var y = JSON.parse(JSON.stringify(x));
console.log(x);

/*
Uncaught TypeError: Converting circular structure to JSON

    at JSON.stringify (<anonymous>)
    at <anonymous>:8:25

*/

melaporkan ralat, dan hasilnya menunjukkan bahawa

tidak boleh menyalin objek rujukan bulat JSON.parse(JSON.stringify()),

Mari lihat

Object.assign()

var x = {
  a: 1,
  b: {
    c: 2,
    d: 3,
  },
};

x.c = x.b;
x.d = x.a;
x.b.c = x.c;
x.b.d = x.d;

var y = Object.assign({}, x);
console.log(x);
/*
[object Object]{
a:1, 
b:[object, Object], 
d:[object, Object], 
d:1
}
*/

Gunakan operator spread [

.. ]

Operator pengembangan literal objek kini merupakan cadangan fasa ketiga

, membuat penyalinan objek. lebih mudah. ​​ECMAScript

var x = [
  "a",
  "b",
  "c",
  "d",
  {
    e: 1,
  },
];
var y = [...x];
console.log(y); //['a', 'b', 'c', 'd', {'e':1}]

var m = {
  a: 1,
  b: 2,
  c: ["d", "e"],
};
var n = {
  ...m,
};
console.log(n); //{a:1, b:2, c:['d', 'e']}

Perlu diingatkan bahawa operasi pengembangan Talisman juga adalah salinan cetek. Jadi adakah sangat sukar untuk menyalin objek?

Bina roda anda sendiri:

function copy(x) {
  var y = {};
  for (m in x) {
    y[m] = x[m];
  }
  return y;
}
var o = {
  a: 1,
  b: 2,
  c: {
    d: 3,
    e: 4,
  },
};
var p = copy(o);

Sesetengah orang mengatakan bahawa tidak sepatutnya ada banyak masalah jika anda melakukan ini. Kemudian kita hanya boleh haha ​​​​dan teruskan

var x = {};

Object.defineProperty(x, "m", {
  value: 5,
  writable: false,
});

console.log(x.m); //5
x.m = 25; //这一步没报错，但是也没执行
console.log(x.m); //5

Dengan cara ini, pengendali penyebaran juga akan menghadapi masalah apabila menyalin objek di sini.

Terdapat perangkap di mana-mana dan sukar untuk mengawalnya.... Saya telah menulis ini dan saya rasa masih terdapat banyak perangkap yang belum disenaraikan sepenuhnya

Saya akan tulis lagi kemudian

[Tamat]

Pembelajaran yang disyorkan:

Tutorial video JavaScript

Atas ialah kandungan terperinci Analisis mendalam kaedah penyalinan objek dalam JavaScript (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!