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