cloneDeep


最近在项目开发时遇得到了好多关于对象复制的问题,对于对象的深度复制与浅度复制貌似有很多实现方法。这些方法里有js原生封装的,有第三方库提供的,有点混乱了,所以关于这个问题有必要整理一下了。

import cloneDeep from 'lodash/cloneDeep';

Lodash 一套工具库,它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,其中部分是目前 ECMAScript 尚未制定的规范,但同时被业界所认可的辅助函数。目前每天使用 npm 安装 Lodash 的数量在百万级以上,这在一定程度上证明了其代码的健壮性,值得我们在项目中一试。 

var objA = {
    "name": "colin"
}

// Normal method? Too long. See Stackoverflow for solution:
// http://stackoverflow.com/questions/4459928/how-to-deep-clone-in-javascript

// Lodash
var objB = _.cloneDeep(objA);
objB === objA // false


JavaScript 没有直接提供深拷贝的函数,但我们可以用其他函数来模拟,但这种方法要求对象中的属性值不能是函数。Lodash 中的 _.cloneDeep 函数封装了深拷贝的逻辑,用起来更加简洁。

参考:http://lodash.think2011.net/http://www.jianshu.com/p/5809db81281c

实践 

    const handleClone = () => {
      const cloneDeep = (obj) => {
        let objCloned;
        if(Array.isArray(obj)) {
          objCloned = [];
          for(let i = 0; i< obj.length; i++) {
             objCloned[i] = cloneDeep(obj[i]);
          }
        } else if(typeof obj === 'object' && obj !== null) {
          objCloned = {};
          Object.getOwnPropertyNames(obj).map(item =>
            objCloned[item] = cloneDeep(obj[item]));
        }
        return obj;
      };
      const objInner = {
        nameInner: 'panInner',
        getNameInner: () => console.log(this.name),
      };


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM