前端拷贝问题

前端拷贝

1. 类型

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

2. 浅拷贝实现

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

3. 深拷贝实现

   • 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() )