面试题之JavaScript 请写一个深度克隆的函数
小编才疏学浅,若文章、答案有错误之处,欢迎邮件通知小编及时修改,同时也可以面试题投稿。最后祝大家共同进步!
常用的拷贝技术:
- arr.concat() //数组浅拷贝
- arr.slice() //数组浅拷贝
- JSON.parse(JSON.stringify(arr/obj)) //数组对象浅拷贝但不能处理函数数据
- 浅拷贝包含函数数据的对象/数组
- 深拷贝包含函数数据的对象/数组
拷贝数据:
- 基本数据类型:
- 拷贝后生成一份新的数据,修改拷贝以后的数据不会影响原来的数据
- 对象/数组
- 拷贝后不会生成新的数据,直接引用原数据,修改拷贝后的数据会影响原数据
拷贝数据的方法:
- 直接赋值给一个变量 //浅拷贝
- Object.assign() //浅拷贝
- arr.concat() //数组浅拷贝
- arr.slice() //数组浅拷贝
- JSON.parse(JSON.stringify(arr/obj)) //深拷贝数组对象但不能处理函数数据
浅拷贝(对象/数组):
特点:拷贝的引用,修改拷贝以后的数据会影响原数据
深拷贝(深度克隆):
特点:拷贝的时候生成新数据,修改拷贝以后的数据不会印象原数据
文章标题答案
function deepClone(obj) {
var _toString = Object.prototype.toString;
// null, undefined, non-object, function
if (!obj || typeof obj !== 'object') {
return obj;
}
// DOM Node
if (obj.nodeType && 'cloneNode' in obj) {
return obj.cloneNode(true);
}
// Date
if (_toString.call(obj) === '[object Date]') {
return new Date(obj.getTime());
}
// RegExp
if (_toString.call(obj) === '[object RegExp]') {
var flags = [];
if (obj.global) { flags.push('g'); }
if (obj.multiline) { flags.push('m'); }
if (obj.ignoreCase) { flags.push('i'); }
return new RegExp(obj.source, flags.join(''));
}
var result = Array.isArray(obj) ? [] :
obj.constructor ? new obj.constructor() : {};
for (var key in obj) {
result[key] = deepClone(obj[key]);
}
return result;
}
function A() {
this.a = a;
}
var a = {
name: 'qiu',
birth: new Date(),
pattern: /qiu/gim,
container: document.body,
hobbys: ['book', new Date(), /aaa/gim, 111]
};
var c = new A();
var b = deepClone(c);
console.log(c.a === b.a);
console.log(c, b);