javascript 深拷贝

数据类型

js中的数据类型共分为大两类, 基本类型和引用类型

基本类型共有5种: String, Number, Boolean, Null, undefined

其他的都是引用类型, 如 Array, Object 等

数据类型间的区别

基本类型的变量中存储的是实在的值, 赋值的时候, 只是简单的将一个变量的值赋给另外一个变量, 之后两个变量间毫无关系

引用类型的变量中保存的是内存中的地址, 赋值的时候, 是将一个变量保存数据的内存空间地址的指针, 赋值给另外一个变量, 两个引用指向同一个地址, 这样当一个变量改变了其中的数据时, 会导致另外一个变量的值也会发生变化.

引题

由于引用类型具有上文中提到的引用特性, 所以当我们想要从一个引用类型复制出另外一个变量, 并且切断两者间的连带反应时, 需要使用深拷贝操作

解决方案

let obj = {
   a: 1,
   b: {
       m: [1,2,3],
       n: {
           x: 1,
	   y: 2
       }
   },
   c: null
};
// 做好类型判断, 基本类型直接赋值, 引用类型存在嵌套可能, 使用递归处理
function getType (obj) {
   let toString = Object.prototype.toString;
   let typeObj = {
        '[object String]'    : 'string',
        '[object Number]'    : 'number',
        '[object Boolean]'   : 'boolean',
	'[object Null]'      : 'null',
	'[object Undefined]' : 'undefined',
	'[object Object]'    : 'object',
	'[object Array]'     : 'array',
	'[object Function]'  : 'function',
	'[object RegExp]'    : 'regexp',
	'[object Date]'      : 'date'
    };
    return typeObj[toString.call(obj)];
}
// 根据不同的数据类型, 使用不同的拷贝方案
function deepClone (data) {
    let type = getType(data);
    let obj = null;

    if (type == 'array') {
	obj = [];
    } else if (type == 'object') {
	obj = {};
    } else {
	return data;
    }

    if (type == 'array') {
        data.forEach((item, index) => {
	   obj.push(deepClone(item));
	});
    }
    if (type == 'object') {
	for (let k in data) {
	    obj[k] = deepClone(data[k]);
	}
    }
    return obj;
}

let newObj = deepClone(obj);
console.log(obj);
obj[0] = 0;
console.log(obj);
console.log(newObj);