手动遍历对象拷贝

/**

 * 深拷贝

 * @param {*} obj 拷贝对象(object or array)

 * @param {*} cache 缓存数组

 */

function deepCopy (obj, cache = []) {

  // typeof [] => 'object'

  // typeof {} => 'object'

  if (obj === null || typeof obj !== 'object') {

    return obj

  }

  // 如果传入的对象与缓存的相等, 则递归结束, 这样防止循环

  /**

   * 类似下面这种

   * var a = {b:1}

   * a.c = a

   * 资料: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value

   */

  const hit = cache.filter(c => c.original === obj)[0]

  if (hit) {

    return hit.copy

  }

  const copy = Array.isArray(obj) ?  [] :   {}

  // 将copy首先放入cache, 因为我们需要在递归deepCopy的时候引用它

  cache.push({

    original: obj,

    copy

  })

  Object.keys(obj).forEach(key => {

    copy[key] = deepCopy(obj[key], cache)

  })

  return copy

}

使用JSON模块

根据不包含引用对象的普通数组深拷贝得到启发，不拷贝引用对象，拷贝一个字符串会新辟一个新的存储地址，这样就切断了引用对象的指针联系。

测试例子：

var test={

    a:"ss",

    b:"dd",

    c:[

        {dd:"css",ee:"cdd"},

        {mm:"ff",nn:"ee"}

    ]

};

var test1 = JSON.parse(JSON.stringify(test));//拷贝数组,注意这行的拷贝方法

console.log(test);

console.log(test1);

test1.c[0].dd="change"; //改变test1的c属性对象的d属性

console.log(test);  //不影响test

console.log(test1);

JSON.parse(),JSON.stringify()兼容性问题

可以通过为IE7以及IE7以下版本的IE浏览器引入json2.js，使用json2.js来解决JSON的兼容性问题

<!--[if lt IE 7]>

<script src="具体放路径/json2.js"></script>

<![endif]-->

json2.js的github地址为：https://github.com/douglascrockford/JSON-js

巴特西

JS实现对对象的深拷贝

手动遍历对象拷贝

使用JSON模块

最新文章

热门文章