前端拷贝
-
类型
- 浅拷贝: 只拷贝一层的拷贝方式,地址拷贝
- 深拷贝: 值的完全拷贝
-
浅拷贝实现
- 解构赋值
- Object.assign
- 引用类型直接赋值
-
深拷贝实现
- JSON.parse / JSON.string [ 序列化 / 反序列化 ]
- 递归实现深拷贝 - 要求: 手写出来
function deepClone(origin,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
- 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 )
/*
*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() )