js的变量类型

• 基本类型：字符串（String）、数值（Number）、布尔值（Boolean）、Undefined、Null
• 引用类型：Object、Array、Function、Date、RegExp

变量的存储方式

• 基本类型：占用空间固定，保存在栈中
• 引用类型：占用空间不固定，引用类型的存储需要内存的栈区和堆区（堆区是指内存里的堆内存）共同完成，栈区内存保存变量标识符和指向堆内存中该对象的指针， 也可以说是该对象在堆内存的地址。

变量的复制方式

• 基本类型：保存与复制的是值本身
• 引用类型：保存与复制的是指向对象的一个指针

//基本类型:修改复制的值不会影响原值，修改原值不会影响复制的值
var a=1;
var b=a;
console.log(a===b);//true

b=2;
console.log(a);//1

//引用类型：修改复制的值会影响原值，修改原值也会影响复制的值，因为复制的是指针，它们同时指向一个地址
var a={
    name:"yibao",
    age:18
}
var b=a;
console.log(a===b)//true

a.age=20;
console.log(b.age);//20

深拷贝和浅拷贝

概念

• 浅拷贝：浅拷贝只拷贝第一层，如果深层次对象，则拷贝其引用。
  • a浅拷贝b，a先创建一个新对象，复制b第一层对象的属性，如果b有子对象，a不会拷贝子对象属性，只是拷贝其引用。
  • 如果b只有第一层对象，浅拷贝后a和b修改不会影响对方，如果b里面有子对象，则a和b的子对象修改会影响对方
• 深拷贝：深拷贝不止拷贝第一层，深层的子对象也拷贝了。
  • a深拷贝b，a和b修改不会影响对方
  • 在堆中重新分配内存，不同的地址，相同的值，互不影响

实现方法

浅拷贝

1.Object.assign(ES6)

• Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
• Object.assign(target, ...sources)，target目标对象，source源对象

var a = {
    name:"yibao",
    arr:{
        foo:1
    }
}

var b=Object.assign({},a)
b.arr.foo=2;
b.name="hh";

console.log(a.arr.foo);//2
console.log(a.name);//yibao
console.log(b.arr===a.arr);//true
console.log(b===a);//false

2.扩展运算符（ES6）

var a = {
    name:"yibao",
    arr:{
        foo:1
    }
}

var b={...a}
b.arr.foo=2;
b.name="hh";

console.log(a.arr.foo);//2
console.log(a.name);//yibao
console.log(b.arr===a.arr);//true
console.log(b===a);//false

3.原生js

function shallowCopy(sourceObj){
    if (typeof sourceObj !== 'object') return;
    let newObj=sourceObj instanceof Array?[]:{};
    
    for(let key in sourceObj){
        if(sourceObj.hasOwnProperty(key)) {
      //只复制元素自身的属性，不复制原型链上的
        newObj[key] = sourceObj[key];
        }
    }
    return newObj;
}

4.Array.prototype.slice()

• slice() 方法可从已有的数组中返回选定的元素
• arrayObject.slice(start,end);返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

let a = [[1, 2], 3, 4];
let b = a.slice();
console.log(a === b); // false

a[0][0] = 5;
console.log(a); //  [[5, 2], 3, 4]
console.log(b); //  [[5, 2], 3, 4]

5. Array.prototype.concat()

• concat() 方法用于连接两个或多个数组.
  该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
• arrayObject.concat(arrayX,arrayX,......,arrayX);返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

let a = [[1, 2], 3, 4];
let b = a.concat();
console.log(a === b); // false

a[0][0] = 5;
console.log(a); //  [[5, 2], 3, 4]
console.log(b); //  [[5, 2], 3, 4]

深拷贝

JSON 序列化

• JSON.stringify();将一个JavaScript值(对象或者数组)序列化为一个 JSON字符串
• JSON.parse();把 JSON 字符串反序列化为一个 js 对象

var a = {
    name:"yibao",
    arr:{
        foo:1
    }
}

var b=JSON.parse(JSON.stringify(a))
b.arr.foo=2;
b.name="hh";

console.log(a.arr.foo);//1
console.log(a.name);//yibao
console.log(b.arr===a.arr);//false
console.log(b===a);//false

• 优点：性能快
• 缺点：（使用 lodash 的深拷贝函数解决）
• 会忽略 undefined
• 会忽略函数
• 不能解决循环引用的对象

原生js

function deepCopy(sourceObj){
    if(type of sourceObj!=="Object"||sourceObj==null) return;
    
    let newObj= sourceObj instanceof Array?[]:{};
    
    for(let key in sourceObj){
        if(sourceObj.hasOwnProperty(key)){
           if(typeof sourceObj==="Object"&&sourceObj!=null){
               newObj[key]=deepCopy(sourceObj[key])
           }else{
               newObj[key]=sourceObj[key]
           }
        }
    }
    retrun newObj;
}

参考