Js深拷贝
2020-12-20 本文已影响0人
衣裳云墨
1、vuex中深拷贝方法
/**
* 深拷贝
* @param {*} obj 拷贝对象(object or array)
* @param {*} cache 缓存数组
*/
function deepCopy (obj, cache = []) {
// typeof [] => 'object'
// typeof {} => 'object'
if (obj === null || typeof obj !== 'object') {
return obj
}
// 如果传入的对象与缓存的相等, 则递归结束, 这样防止循环
/**
* 类似下面这种
* var a = {b:1}
* a.c = a
* 资料: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value
*/
const hit = cache.filter(c => c.original === obj)[0]
if (hit) {
return hit.copy
}
const copy = Array.isArray(obj) ? [] : {}
// 将copy首先放入cache, 因为我们需要在递归deepCopy的时候引用它
cache.push({
original: obj,
copy
})
Object.keys(obj).forEach(key => {
copy[key] = deepCopy(obj[key], cache)
})
return copy
}
注: 如果要区分数组和对象, 使用使用 Array.isArray 或者 Object.prototype.toString.call
2、考虑了循环引用、symbol类型的情况
function copy(obj,appeard=new Map()) {
if (!(obj instanceof Object)) return obj//如果是原始数据类型
if (appeard.has(obj)) return appeard.get(obj)//如果已经出现过
let result=Array.isArray(obj)?[]:{}
appeard.set(obj,result)//将新对象放入map
//遍历所有属性进行递归拷贝
;[...Object.keys(obj),...Object.getOwnPropertySymbols(obj)]
.forEach(key=>result[key]=copy(obj[key],appeard))
return result
}
2、使用JSON.parse(JSON.stringify(Object))
- 如果对象或者数组里有函数 或者包含不能转成JOSN格式, 就会出问题啦
- RegExp/函数不会拷贝
- new Date()会被转成字符串
function stringifyRep(key, value) {
if (typeof value === "function") {
return `${value}`;
}
return value;
}
function parseRep(key, value) {
return eval(value);
}
var a = {
b: () => 1 + 1
}
var aa = JSON.parse(JSON.stringify(a, stringifyRep), parseRep)