Analisis mendalam kaedah penyalinan objek dalam JavaScript (dengan kod)-tutorial js-php.cn

Analisis mendalam kaedah penyalinan objek dalam JavaScript (dengan kod)

奋力向前

Lepaskan： 2021-08-20 09:56:39

ke hadapan

1959 orang telah melayarinya

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.

Analisis mendalam kaedah penyalinan objek dalam JavaScript (dengan kod)

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}

Salin selepas log masuk

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}

Salin selepas log masuk

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}}

Salin selepas log masuk

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}

Salin selepas log masuk

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 mendalam`JSON.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}}

Salin selepas log masuk

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 &#39;2&#39;}}

Salin selepas log masuk

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

*/

Salin selepas log masuk

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
}
*/

Salin selepas log masuk

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); //[&#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;, {&#39;e&#39;:1}]

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

Salin selepas log masuk

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);

Salin selepas log masuk

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

Salin selepas log masuk

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!

Analisis mendalam kaedah penyalinan objek dalam JavaScript (dengan kod)

pengendali

Object.assign()

Salinan mendalamJSON.parse(JSON.stringify())

.. ]

Salinan mendalam`JSON.parse(JSON.stringify())`