JavaScript中的深克隆和深度合并

JavaScript中的深克隆和深度合并


引用类型在变量间相互赋值是将内存的指针赋过去,这样就会导致其中一处的数据改变,另一处也会一起改变,所以新建的对象要指向一个新地址,避免互相影响,以下是我整理的两种深克隆方法。

深克隆

1、利用Object.assign(),只有一级时为深克隆,但二级以后的为浅克隆。

function cloneDeep(obj){
    
    
    return Object.assign({
    
    }, obj);
}

2、利用递归

// 判断arr是否为一个数组,返回一个bool值
function isArray (arr) {
    
    
    return Object.prototype.toString.call(arr) === '[object Array]';
}

// 深度克隆
function deepClone (obj) {
    
    
	// 对常见的“非”值,直接返回原来值
	if([null, undefined, NaN, false].includes(obj)) return obj;
    if(typeof obj !== "object" && typeof obj !== 'function') {
    
    
		//原始类型直接返回
        return obj;
    }
    var o = isArray(obj) ? [] : {
    
    };
    for(let i in obj) {
    
    
        if(obj.hasOwnProperty(i)){
    
    
            o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i];
        }
    }
    return o;
}

export default deepClone;

深度合并

function deepMerge(target = {
     
     }, source = {
     
     }) {
    
    
	target = deepClone(target);//本文中的deepClone方法
	if (typeof target !== 'object' || typeof source !== 'object') return false;
	for (var prop in source) {
    
    
		if (!source.hasOwnProperty(prop)) continue;
		if (prop in target) {
    
    
			if (typeof target[prop] !== 'object') {
    
    
				target[prop] = source[prop];
			} else {
    
    
				if (typeof source[prop] !== 'object') {
    
    
					target[prop] = source[prop];
				} else {
    
    
					if (target[prop].concat && source[prop].concat) {
    
    
						target[prop] = target[prop].concat(source[prop]);
					} else {
    
    
						target[prop] = deepMerge(target[prop], source[prop]);
					}
				}
			}
		} else {
    
    
			target[prop] = source[prop];
		}
	}
	return target;
}

猜你喜欢

转载自blog.csdn.net/weixin_48888726/article/details/127774255