美文网首页
js 实现深拷贝

js 实现深拷贝

作者: Gen_ | 来源:发表于2019-03-20 10:54 被阅读0次

一般不会深拷贝函数等,所以一般用递归和JSON方法即可。

如果要实现函数等拷贝,比较完美的做法:

function deepClone(data) {

  const type = this.judgeType(data);

  let obj;

  if (type === 'array') {

obj = [];

  } else if (type === 'object') {

obj = {};

  } else {

// 不再具有下一层次

return data;

  }

  if (type === 'array') {

// eslint-disable-next-line

for (let i = 0, len = data.length; i < len; i++) {

  obj.push(this.deepClone(data[i]));

}

  } else if (type === 'object') {

// 对原型上的方法也拷贝了....

// eslint-disable-next-line

for (const key in data) {

  obj[key] = this.deepClone(data[key]);

}

  }

  return obj;

},

function  judgeType(obj) {

// tostring会返回对应不同的标签的构造函数

  const toString = Object.prototype.toString;

  const map = {

'[object Boolean]': 'boolean',

'[object Number]': 'number',

'[object String]': 'string',

'[object Function]': 'function',

'[object Array]': 'array',

'[object Date]': 'date',

'[object RegExp]': 'regExp',

'[object Undefined]': 'undefined',

'[object Null]': 'null',

'[object Object]': 'object',

  };

  if (obj instanceof Element) {

return 'element';

  }

  return map[toString.call(obj)];

}

递归:

// 递归的方法实现深拷贝,实际是深入到对象内层不为对象的属性值,然后一个接一个地开辟新的内存地址.

var json1={"name":"鹏哥","age":18,"arr1":[1,2,3,4,5],"string":'afasfsafa',"arr2":[1,2,3,4,5],"arr3":[{"name1":"李鹏"},{"job":"前端开发"}]};

var json2={};

function copy(obj1,obj2){

var obj2 = obj2 || {}; // 最初的时候给它一个初始值等于它自己或者是一个json

for (var name in obj1) {

if (typeof obj1[name] ===  'object') {  // 先判断一下obj1[name]是不是一个对象

obj2[name] = (obj1[name].constructor === Array)? [] : {}, // 区分对象或者数组

copy(obj1[name],obj2[name]) // 调用自身

} else {

obj2[name] = obj1[name] // 如果不是对象,直接等于即可,不会发生引用

}

}

return obj2; // 然后再把复制好的对象给return出去

}

json2 = copy(json1,json2)

json2.arr1.push(24)

console.log(json1)

console.log(json2)

JSON:

// JSON.parse和JSON.stringify也可以实现深拷贝,但是有一定的限制.对于函数或者内置方法或者构造函数等会出现问题

var a = {

a:{

i:1,

k:[1,2,3]

},

b:[{a:123}]

}

function deepCopy(initalObject){

var finalObject = {}

finalObject = JSON.parse(JSON.stringify(initalObject))

return finalObject

}

var b = deepCopy(a);

b.a.k[0]= 33

b.b[0]['a'] = 321123

console.log(a)

console.log(b)

参考链接:

https://www.jianshu.com/p/0d7bd31ccf43    js中对象的复制,浅复制(浅拷贝)和深复制(深拷贝)

https://www.jianshu.com/p/b084dfaad501  关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑

相关文章

  • js浅拷贝深拷贝

    js浅拷贝,深拷贝的简单实现 基础数据 浅拷贝 深拷贝

  • JS 中深拷贝的几种实现方法

    JS 中深拷贝的几种实现方法 1、使用递归的方式实现深拷贝 方法二 2、通过 JSON 对象实现深拷贝 缺点 (1...

  • Javascript中的深拷贝

    JS 中深拷贝的几种实现方法 1、使用递归的方式实现深拷贝 //使用递归的方式实现数组、对象的深拷贝 functi...

  • JS深拷贝的实现

    JS深拷贝, 即传值拷贝, 需要新建一处内存,实现拷贝,具体实现如下: //ES5深拷贝 (1)循环递归: fun...

  • js 实现深拷贝

    一般不会深拷贝函数等,所以一般用递归和JSON方法即可。 如果要实现函数等拷贝,比较完美的做法: function...

  • js实现深拷贝

    一、js数据类型 基本数据类型:String、Number、Boolean、Null、Undefined复杂数据类...

  • 手撕常见面试题

    DOM 事件代理 数组 对象 扁平化 去重 - unique() 拷贝 浅拷贝 深拷贝 copy()函数实现 JS...

  • JS中的深拷贝与浅拷贝

    知乎:js中的深拷贝和浅拷贝? 掘金: js 深拷贝 vs 浅拷贝 前言 首先深拷贝与浅拷贝只针对 Object,...

  • 2020前端高频面试题总结(附答案)

    [ js基础题 ] 1. new的实现原理是什么? 2. 深拷贝和浅拷贝的区别是什么 深拷贝 浅拷贝 3. bin...

  • iOS基础知识点(网络摘抄)

    1.父类实现深拷贝时,子类如何实现深拷贝。父类没有实现深拷贝时,子类如何实现深拷贝? 深拷贝同浅拷贝的区别:...

网友评论

      本文标题:js 实现深拷贝

      本文链接:https://www.haomeiwen.com/subject/lbtzmqtx.html