深克隆(clone) -- 01

let oldObject = {
     
	name: '西施',
	age: 26,
	height: '163.30',
	score: null,
	friends: ['李白', '杜牧', '李商隐'],
	oldObj: {
     
		city: '广州',
		area: '越秀区',
		street: '明信路'
	}
};

function clone(oldObject) {
     
	// 第一步:创建一个空对象
	let newObject = {
     };
	// 第二步:判断值是否为空
	// 如果给的值里面有 null 就直接返回 null
	// 如果不进行处理会输出 {} 空对象
	if (oldObject === null) {
     
		return null;
	};
	// 第三步:判断是否是数组
	// 如果是数组需要处理,
	// 如果不处理数组会转为类数组对象
	// { 0: "李白", 1: "杜牧", 2: "李商隐" }
	if ({
     }.toString.call(oldObject) === '[object Array]') {
     
		var newArray = [];
		// 数组克隆
		// 使用 splice() 方法实现
		// splice() 里面什么也没写,
		// 表示从数组第一项截取到末尾
		newArray = oldObject.slice();
		return newArray;
	};
	// 第四步:使用 for in 循环实现克隆
	for (let key in oldObject) {
     
		// 如果原对象属性值是原始类型,
		// 可以直接赋值
		// 原始类型值是直接复制副本
		if (typeof oldObject[key] !== 'object') {
     
			newObject[key] = oldObject[key];
		} else {
     
			// 当前属性不是原始类型值,
			// 再次调用(类似与递归) clone 函数,
			// 继续复制当前属性的值
			newObject[key] = clone(oldObject[key]);
		};
	};
	return newObject;
};

// 如果是 false 说明克隆成功
console.log(oldObject === clone(oldObject)); // false

let cloneData = clone(oldObject);

// 修改克隆后的第一层 age 的值
cloneData.age = 30;

// 修改克隆后第二层 数组的值
cloneData.friends[2] = '杜甫';

// 修改克隆后的二层 city 的值
cloneData.oldObj.city = '武汉';

// 深克隆,第一层两个值的地址已经完全不一样了
console.log('oldObject:', oldObject.age); // 26
console.log('newObject:', cloneData.age); // 30

// 深克隆,第二层 数组 两个值的地址已经完全不一样了
console.log('oldObject:', oldObject.friends[2]); // 李商隐
console.log('newObject:', cloneData.friends[2]); // 杜甫

// 深克隆,第二层 对象 两个值的地址已经完全不一样了
console.log('oldObject:', oldObject.oldObj.city); // 广州
console.log('newObject:', cloneData.oldObj.city); // 武汉

你可能感兴趣的:(JavaScript,javascript)