015JS深拷贝封装支持string,number,bool,null,undefined,symbol,object,array,date,function
JS深拷贝可使用第三方库https://www.npmjs.com/package/lodash.clonedeep,也可以手工实现。
JS深拷贝方案1:JSON.parse(JSON.stringify(obj))
let a = {a:1,b:2}
let b = JSON.parse(JSON.stringify(a))
a.a = 11
console.log(a)//{a:1,b:2}
console.log(b)//{a:11,b:2}
JS深拷贝方案2:递归函数实现深拷贝
function deepClone(source) {
if (typeof source !== 'object' || source == null) {
return source;
}
const target = Array.isArray(source) ? [] : {};
for (const key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
if (typeof source[key] === 'object' && source[key] !== null) {
target[key] = deepClone(source[key]);
} else {
target[key] = source[key];
}
}
}
return target;
}
JS深拷贝方案3:递归函数实现深拷贝2-解决循环引用和symblo类型
function cloneDeep(source, hash = new WeakMap()) {
if (typeof source !== 'object' || source === null) {
return source;
}
if (hash.has(source)) {
return hash.get(source);
}
const target = Array.isArray(source) ? [] : {};
Reflect.ownKeys(source).forEach(key => {
const val = source[key];
if (typeof val === 'object' && val != null) {
target[key] = cloneDeep(val, hash);
} else {
target[key] = val;
}
})
return target;
}
JS深拷贝方案4:兼容多种数据类型
const deepClone = (source, cache) => {
if(!cache){
cache = new Map()
}
if(source instanceof Object) { // 不考虑跨 iframe
if(cache.get(source)) { return cache.get(source) }
let result
if(source instanceof Function) {
if(source.prototype) { // 有 prototype 就是普通函数
result = function(){ return source.apply(this, arguments) }
} else {
result = (...args) => { return source.call(undefined, ...args) }
}
} else if(source instanceof Array) {
result = []
} else if(source instanceof Date) {
result = new Date(source - 0)
} else if(source instanceof RegExp) {
result = new RegExp(source.source, source.flags)
} else {
result = {}
}
cache.set(source, result)
for(let key in source) {
if(source.hasOwnProperty(key)){
result[key] = deepClone(source[key], cache)
}
}
return result
} else {
return source
}
}
深拷贝改进代码(推荐采用)
export function DeepClone(data: any): any {
if (data && typeof data === 'object') {
// 处理:object,array,date,function
switch (Object.prototype.toString.call(data)) {
case '[object String]':
return data.toString();
case '[object Number]':
return Number(data.toString());
case '[object Boolean]':
return new Boolean(data.toString());
case '[object Date]':
return new Date(data.getTime());
case '[object Array]':
const arr = [];
for (let i = 0; i < data.length; i++) {
arr[i] = DeepClone(data[i]);
}
return arr;
// js自带对象或用户自定义类实例
case '[object Object]':
const obj: any = {};
for (let key in data) {
// 会遍历原型链上的属性方法,可以用obj.hasOwnProperty(prop)来控制
obj[key] = DeepClone(data[key]);
}
return obj;
}
// 针对函数的拷贝
if (typeof data === 'function') {
let func = data.bind(null);
func.prototype = DeepClone(data.prototype);
return func;
}
} else {
// 处理:string,number,bool,null,undefined,symbol
return data;
}
}
深拷贝使用方法
import { DeepClone } from '@/utils/DeepClone';
const newObj = DeepClone(obj);