Ö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:
- Használja a spread (
...
) szintaxis - a
Object.assign()
módszer - a
JSON.stringify()
vagyJSON.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 the
person
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 copiedPerson
kü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