current position：Home>Simple sorting of JavaScript deep copy and shallow copy

Simple sorting of JavaScript deep copy and shallow copy

2022-04-29 05:20:20【InfoQ】

Before understanding deep and shallow copies , Let's sort it out first ：

JavaScript in , Divided into basic data types （ Original value ） And complex types （ object ）, At the same time, there are several data types under their respective data types

Basic data type

Numbers Number  character string String  Boolean Boolean Null Undefined Symbols BigInt

The basic data type is in memory , Is stored on the stack Stack
In the data structure
  • The allocated space life cycle of stack on memory is very short , When the variable is used , The method is released after execution , So in js among , After the variable is used , Basically recycled ,
  • There is an exception , In the case of closures , Variables always exist in memory and are not released .
  • Stack storage has first in and last out , The characteristics of LIFO : 1,2,3,4,5,6 => 6,5,4,3,2,1

Reference data type

date Dete, object Object, Array Array, Method Function,  Regular regex, Collection with keys ：Maps, Sets, WeakMaps, WeakSets
Reference data type and heap memory heap Some of the relationships
  • stay JavaScript in , Direct access to locations in heap memory... Is not allowed , You cannot directly manipulate the heap memory space of an object .
  • The reference address of the object is stored in stack memory , In our daily coding process , When manipulating objects , Read the reference address of the existing stack memory of the object, not the object in the heap , The values of reference types are accessed by reference .
JavaScript Simple schematic illustration of heap memory and stack memory in
null
The following operations on objects , You can think with reference to the above figure

Shallow copy - Deep copy

Shallow copy

It just copies the properties of a certain layer , Or a certain layer , Not all copied to another object

let userInfo = {
 name: "zhangsan",
 age: "29",
 say: function () {
 console.log("hello");
 },
 child: [
 {
 name: "zhangsan01",
 },
 ],
};

  • Object to deconstruct , Only the first level objects can be copied

//  Object to deconstruct ...
let info = { ...userInfo };
info.name = "lisi";
info.child.name = "lisi001";
info.say();

console.log("userInfo", userInfo);
console.log("info", info);

userInfo and info Medium child.name It's all changed to ---->"lisi001"

  • Object.assign()  The first layer is deep copy , After the secondary attribute is the shallow copy

let info = {};
Object.assign(info, userInfo);
info.name = "lisi";
info.child.name = "lisi001";
console.log("userInfo", userInfo);
console.log("info", info);

  • JSON.parse(JSON.stringify()); Objects can be copied , But when the attribute is function when , Not copied to the new object , So in the daily development process , Involving array objects , Use JSON.parse(JSON.stringify()); No problem

let info = JSON.parse(JSON.stringify(userInfo));
info.name = "lisi";
info.child.name = "lisi001";
console.log("userInfo", userInfo);
console.log("info", info);

  • for in, The first layer can be copied , The second layer is modified , Or the reference address used , The objects before and after have changed

let info = {};
for (let key in userInfo) {
 info[key] = userInfo[key];
}
info.name = "lisi";
info.child.name = "lisi001";
console.log("userInfo", userInfo);
console.log("info", info);
Summary of shallow copy
The above shallow copy method , Some copies can only copy the first layer , Some can be copied in multiple layers , But when the attribute type is a method , It's still a shallow copy , So we are developing , Use shallow copy , We need to pay attention to , meanwhile , Copy out function, Similar to regular ,date And other data types are not listed one by one , Interested students can write some by themselves demo, To verify more complex and richer data types .

Deep copy

All properties are copied to the new object

  • Use recursion to traverse each attribute , During recursive traversal , Process and copy for each data type
  • lodash Deep copy method , Interested students , You can read lodash Deep copy of the implementation source code

Document address ：
Deep copy cloneDeep
 
https://www.lodashjs.com/docs/lodash.cloneDeep

  • More ways , To be added

ending

  • When data types are complex , All in the operation stack memory Stack Memory address of , Pointer to the object in heap memory heap The data of .
  • The object passed in is using the object literal {} The object created is still the object generated by the constructor
  • If the object is created by a constructor , Do you want to copy the attributes on the prototype chain
  • If you want to copy the attributes on the prototype chain , Then, if there are multiple attributes with the same name on the prototype chain , Keep which
  • Data type for , The data type of the property , Respective defects , Applicable business scenarios , Make your own wheels or Use native methods , Tool class


Source code address
  • Code cloud
     
    https://gitee.com/lewyon/vue-note
  • githup
     
    https://github.com/akari16/vue-note

Article personal blog address ：
javaScript Medium deep copy and shallow copy

Welcome to the official account ： Program ape boo , Update some front-end introductory articles from time to time

It's not easy to create , Please indicate the source and the author of the reprint .

copyright notice
author[InfoQ],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261120132844.html

The sidebar is recommended

guess what you like

Random recommended