Copy the JavaScript variable three methods

参考：Copying Objects in JavaScript - Orinami Olatunji(@orinamio_) October 23, 2017

 

 When directly to a variable to another variable, the system does not create a new variable, but the original variable address assigned to the new variable name. For chestnut:

obj = the let { 
  A: . 1 , 
  B: 2 , 
}; 
the let Copy = obj; 

obj.a =. 5 ; 
the console.log (copy.a); 
// the Result 
// A =. 5; // change the value of obj, copy the value of the variable will change

The article mentions are many ways, this article only selected three popular usage and analyze their advantages and disadvantages, and under what circumstances the use of which is the best.

1. Native solutions

The easiest way is to copy a cycle of a new variable. For Li:

function copy(mainObj) {
  let objCopy = {}; // objCopy will store a copy of the mainObj
  let key;

  for (key in mainObj) {
    objCopy[key] = mainObj[key]; // copies each property to the objCopy object
  }
  return objCopy;
}

const mainObj = {
  a: 2,
  b: 5,
  c: {
    x: 7,
    y: 4,
  },
}

console.log(copy(mainObj));

Disadvantages:

Object.prototype methods and mainObj 1. objCopy will be different, usually when we need an exact copy, this approach does not apply.

2. cumbersome and time-consuming and cumbersome, the code can not be reused.

3. If the Object variable contains the original type, copy or sub-index will put this variable to a new variable, not create a new copy.

2. Copy the depth

Variables to copy JSON conversion. First the original variable into a String and then re-assembled into JSON, this will produce a different copy.

let obj = { 
  a: 1,
  b: { 
    c: 2,
  },
}

let newObj = JSON.parse(JSON.stringify(obj));

obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } } (New Object Intact!)

Disadvantages:

1. Variable A lot of time is very time-consuming and memory.

3. Use Object.assign ()

Example of use:

// circular object
let obj = { 
  a: 'a',
  b: { 
    c: 'c',
    d: 'd',
  },
}

obj.c = obj.b;
obj.e = obj.a;
obj.b.c = obj.c;
obj.b.d = obj.b;
obj.b.e = obj.b.c;

let newObj2 = Object.assign({}, obj);

console.log(newObj2);

It can be packaged into a method:

// Method encapsulated 
// return a new copy of the variable 
// GET AN A Copy of Object 
function getNewObjectOf (the src) {
   return Object.assign ({}, the src); 
}

Disadvantages:

1. This is also a shallow copy (copy only the top attribute, the underlying property is not Copy). Deep property also returns the index, sharing an address with the original variables. (See below chestnuts)

let obj = {
  a: 1,
  b: {
    c: 2,
  },
}
let newObj = Object.assign({}, obj);
console.log(newObj); // { a: 1, b: { c: 2} }

obj.a = 10;
console.log(obj); // { a: 10, b: { c: 2} }
console.log(newObj); // { a: 1, b: { c: 2} }

newObj.a = 20;
console.log(obj); // { a: 10, b: { c: 2} }
console.log(newObj); // { a: 20, b: { c: 2} }

newObj.b.c = 30;
the console.log (obj); // {A: 10, B: {C:} 30} 
the console.log (newobj); // {A: 20 is, B: {C: 30}} 

// NOTE: all variables of*. bc equal to 30; see above explained reasons.

 

---

 

in conclusion:

The original text, there are many other ways, but the most useful article excerpt only a few. The first approach is generally not used, as there are many variables must layer, then, need to copy the second approach, if the variable contains only one layer (e.g., configuration information json variable format), the third is the most Efficient.

 

Method encapsulated again given:

// Method encapsulated 
// return a new copy of the variable 
// GET AN A Copy of Object 
function getNewObjectOf (the src) { 
  return Object.assign ({}, the src); 
}