Összefoglalás: ebben a bemutatóban megtudhatja, hogyan kell másolni objektumokat JavaScript, beleértve a sekély copy and deep copy., Másolni egy tárgy a JavaScript, három opciók:

  1. Használja a spread (...) szintaxis
  2. a Object.assign() módszer
  3. a JSON.stringify() vagy JSON.parse() módszerek

A következő szemlélteti, hogyan kell másolni egy tárgy segítségével három fenti módszerek:

a két elterjedt (...), illetve a Object.assign() végre egy sekély másolás, míg a JSON módszerek készítsen egy mély példányt.

Shallow copy vs., deep copy

a JavaScriptben változókat használ olyan értékek tárolására, amelyek lehetnek primitívek vagy referenciák. Amikor másolatot készít egy változóban tárolt értékről, létrehoz egy új, azonos értékű változót. Primitív érték esetén egyszerűen csak egy egyszerű hozzárendelést használ:

Code language: JavaScript (javascript)

és ha megváltoztatja a másolt változó értékét, az eredeti értéke változatlan marad.

Code language: JavaScript (javascript)

kimenet:

azonban, ha a hozzárendelési operátort referenciaértékre használja, akkor nem másolja az értéket., Ehelyett mindkét változó ugyanazt az objektumot jelöli a memóriában:

Code language: JavaScript (javascript)

és amikor az objektumot az új változóval (copiedPerson) érheti el, és megváltoztatja a tulajdonság (név) értékét, megváltoztatja az objektum tulajdonságának értékét.

Code language: JavaScript (javascript)

kimenet:

Code language: CSS (css)

a mély másolás azt jelenti, hogy az új változó értéke le van választva az eredeti változótól, míg egy sekély másolat azt jelenti, hogy egyes értékek továbbra is kapcsolódnak az eredeti változóhoz.,

sekély másolási példa

vegye figyelembe a következő példát:

ebben a példában:

  • először hozzon létre egy új objektumot person.
  • Second, clone theperson object using theObject.assign() method.
  • harmadszor, módosítsa a copiedPerson objektum keresztnevét és címadatait.,

itt van a kimenet:

azonban, ha megmutatja az értékeket a személy objektum, meg fogja találni, hogy a cím információ megváltozott, de a keresztnév:

Code language: JavaScript (javascript)

kimenet:

az ok az, hogy a cím referenciaérték, míg az első név primitív érték. Mindkét personés copiedPersonkülönböző objektumokra hivatkozik, de ezek az objektumok ugyanarra a address objektumokra hivatkoznak.,

Deep copy example

a következő részlet helyettesíti a Object.assign() módszer a JSON módszerek, hogy készítsen egy mély másolatot a person objektum:

kimenet

Code language: CSS (css)

például a copiedPerson objektum összes értéke megszakad az eredeti person objektumtól. Ebben az oktatóanyagban megtanulta, hogyan másolhat objektumokat a JavaScriptben sekély vagy mély másolat segítségével.

  • hasznos volt ez a bemutató ?
  • YesNo