当数组或者对象中每一项的值都是基本数据类型时，可以通过简单的方法实现深拷贝，

数组： array.slice()  array.concat  es6 …解构

对象：object.assign()  es6 …解构
但是当为多层嵌套的数组或者对象时，以上的方法均会失效了
简单的大招至上，可以通过json.stringly json.parse 进行简单粗暴的深拷贝

还可以手写递归进行深拷贝
const deepClone = (data) => {
if (typeof data !== "object") return;
const new_data = Array.isArray(data) ? [] : {};
for (let i in data) {
new_data[i] = typeof data[i] === "object" ? deepClone(data[i]) : data[i];
}
return new_data;
};

还可以引用lodash中的方法，_cloneDeep() 进行深拷贝

深拷贝与浅拷贝
　　浅拷贝：只是复制第一层属性；浅拷贝其实只是引用的拷贝，两者还是指向内存中的同一个地址。
　　深拷贝：通过递归的方式复制所有的属性；深拷贝就是两者指向不同的内存地址，是真正意义上的拷贝。
 
实现浅拷贝的方法
通过es6的解构方式进行拷贝

let newArr = [...arr]


通过es6引入的新方法进行拷贝【这里是将target后的多个对象全部合并到target对象中，并返回一个新的完整对象】

let newobj = Object.assign(target, ...others) 


　　
实现深拷贝的方法
通过递归的方式进行拷贝

function deepCopy(target,source){
    for(let index in source){
        if(typeof source[index] === "object"){
            target[index] = {};
            deepCopy(target[index],source[index])
        }else{
            target[index] = source[index];
        }
    }
}
let b = {a:1,d:{b:1}};
let a = {};
deepCopy(a,b);
 a.d.b = 4;
console.log(b)


通过JSON的方式进行拷贝

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


通过jQuery的extend方法实现深拷贝

var array = [1,2,3,4];
var newArray = $.extend(true,[],array);


Object.assign()拷贝
　　当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。
lodash函数库实现深拷贝
　　lodash很热门的函数库，提供了 lodash.cloneDeep()实现深拷贝。
 
转载于:https://www.cnblogs.com/belongs-to-qinghua/p/11117041.html

参考：js浅拷贝及深拷贝的几种方法
1、浅拷贝
(1) Object.assign()
参考：Object.assign()用法讲解
var obj1 = {a: 1, b: 2};
var obj2 = Object.assign({}, obj1);

(2) 解构赋值
var obj1 = {a: 1, b: 2};
var obj2 = {...obj1};

浅拷贝实现原理：
function shallowCopy(obj) {
  var target = {};
  for (let i in obj) {
    if (obj.hasOwnproperty(i)) {
      target[i] = obj[i];
    }
  }
  return target;
}

2、深拷贝
(1) 利用JSON.parse 和JSON.stringfy
var obj1 = {
  name: 'li',
  hobit: ['摄影', '羽毛球']
}
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.hobit.push('游泳');
console.log(obj1); //{ name: 'li', hobit: [ '摄影', '羽毛球' ] }
console.log(obj2); //{ name: 'li', hobit: [ '摄影', '羽毛球', '游泳' ] }

(2) 利用递归来实现
使用JSON.parse 和JSON.stringfy也会有很多限制：参考：关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑

如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；
如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象；
如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；
如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null
JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；
如果对象中存在循环引用的情况也无法正确实现深拷贝；

可通过递归来实现一个深拷贝：
function deepCopy(obj) {
  if (obj == null)  return obj;
  if (obj instanceof Date) return new Date();
  if (obj instanceof RegExp) return new RegExp(obj);
  if (typeof obj !== 'object') return obj;
  let cloneObj = new obj.constructor();
  for (let i in obj) {
    if (obj.hasOwnproperty(i)) {
      cloneObj[i] = deepCopy(obj[i]);
    }
  }
  return cloneObj;
}

(3) jQuery的extend
$.extend( [deep ], target, object1 [, objectN ] )


deep ：表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝
target： Object类型 目标对象，其他对象的成员属性将被附加到该对象上
object1… objectN : Object类型 第一个以及第N个被合并的对象。

前端拷贝


类型

浅拷贝： 只拷贝一层的拷贝方式，地址拷贝
深拷贝： 值的完全拷贝



浅拷贝实现

解构赋值
Object.assign
引用类型直接赋值



深拷贝实现

JSON.parse / JSON.string [ 序列化 / 反序列化 ]
递归实现深拷贝 - 要求： 手写出来

  //对象深拷贝
    function deepClone(origin,target){
        //target是否存在如果不存在创建空对象
        let tar = target || {},
        //判断是否为引用数据类型
            toStr = Object.prototype.toString,
            arrType='[object Array]';

        for(let key in origin){
            //剥离原型链的数据
            if(origin.hasOwnProperty(key)){
                //判断是否为引用数据类型 对象或数组
                if(typeof(origin[key]) === 'object' && origin[key] !== null){
                    if(toStr.call(origin[key]) === arrType ){
                        tar[key] = [];
                    }else{
                        tar[key] = {};
                    }
                    deepClone(origin[key],tar[key]);
                }else{
                    tar[key] = origin[key];
                }
            }
        }
        return tar;
    }


第三方

loadsh

_.cloneDeep()


Immutable.js 【 性能最好的 】
const _ = require( ‘loadsh’ )





immutable_demo
const state = {

str: ‘MMR’,

obj: {

x: 1,

y: 2

},

arr: [1,2,3 ]

}
const newState = _.cloneDeep( state ) // 这种方式逐层递归，要遍历每一个节点，是很消耗性能的
newState.str = “路过的假面骑士MMR”

newState.obj.x = 1000

newState.arr[ 0 ] = 2000

console.log( state )
/*

node.js文件

Common.js 规范




*Map是用来定义Immutable对象
*/
const { Map } = require(‘immutable’)
/* Map作用就是可以帮助我们创建一个 Immutable 对象 */
var obj = { name: ‘MMR’ } // state.name
const state = Map({ // 它是可用的但是是不可变的

id: 1,

name: ‘MMR’,

obj: {

x: 1,

y: 2

}

})
/* 每一次的改变都会生成新的immutable对象 */
const newState = state.set(‘age’, 20 ) // 新的immutable对象
// console.log( state === newState )  false
// console.log( state.get(‘name’) )

// console.log( newState.get(‘name’) )
const state2 = newState.set(‘name’,‘路过的假面骑士MMR’)
console.log( newState.get(‘name’) )

console.log( state.get(‘name’) )

console.log( state2.get(‘name’) )

console.log( Map.isMap( state2 ))

console.log( Map.isMap( obj ))
const { List } = require( ‘immutable’ )
/*
* List是用来定义Immutable数组的
*/
const arr = List([ 1,2,3,4 ]) // immutable数组
const newArr = arr.push( 5 ) // 通过数组的方法来生成新的Immutable数组
console.log( arr.get[ 0 ] ) //  undefined

console.log( newArr.get[ 4 ] ) // undefined
console.log( arr.get( 0 ) ) // 1

console.log( newArr.get( 4 ) ) // 5
console.log( arr.size ); // 4   size输出的是immutable数组长度

console.log( newArr.size ); // 5
/*
is 可以帮助我们比较两个immutable对象里面内容是否相同
*/
const { Map,is,List } = require(‘immutable’)
const state1 = Map({

a: 1,

b: true,

c: null,

d: undefined,

})
const state2 = Map({

a: 1,

b: true,

c: null,

d: undefined,

e: ‘a’

})
console.log( is( state1,state2 ) )
const arr = List([1, ‘a’, true,null, undefined])

const arr2 = List([1, ‘a’, true,null, undefined])
console.log( is( arr,arr2 ) )
// var arr = [ 1, ‘a’, true,null, undefined ]

// var arr2 = [ 1, ‘a’, true,null, undefined ]
// console.log( arr.sort().toString() === arr2.sort().toString() )