覆蓋全部類型的javascript深度克隆

第一種方法(只適用於基礎類型)

const newObj = JSON.parse(JSON.stringify(oldObj));javascript

第二種方法

const getType = (obj)=> {
	var toString = Object.prototype.toString;
	var 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',
        '[object Symbol]'   : 'symbol'
	};
	if(obj instanceof Element) {//由於對不一樣標籤,toString會返回對應不一樣標籤的構造函數
        return 'element';
	}
	return map[toString.call(obj)];
}

const getRegExp = re => {
  var flags = '';
  if (re.global) flags += 'g';
  if (re.ignoreCase) flags += 'i';
  if (re.multiline) flags += 'm';
  return flags;
};

/** * deep clone * @param {[type]} parent object 須要進行克隆的對象 * @return {[type]} 深克隆後的對象 */
const deepClone = oldObj => {
  // 維護兩個儲存循環引用的數組
  const oldObjArr = [];
  const newObjArr = [];

  const clone = oldObj => { 
      
    let newObj, proto;

    const type = getType(oldObj);

    switch(type){
        case 'boolean':
        case 'number':
        case 'string':
        case 'null':
        case 'undefined':
        case 'function':{
            return oldObj;
            break;
        }
        case 'symbol':{
            return Symbol(Symbol.keyFor(oldObj).toString());
            break;
        }
        case 'array':{
            newObj = [];
            break;
        }
        case 'regExp':{
            newObj = new RegExp(oldObj.source, getRegExp(oldObj));
            if (oldObj.lastIndex) newObj.lastIndex = oldObj.lastIndex;
            break;
        }
        case 'date':{
            newObj = new Date(oldObj.getTime());            
            break;
        }
        //case 'obj':
        default:{
            // 處理對象原型
            proto = Object.getPrototypeOf(oldObj);
            // 利用Object.create切斷原型鏈
            newObj = Object.create(proto);
            break;
        }
   }

   // 處理循環引用
   const index = oldObjArr.indexOf(oldObj);
   if (index != -1) {// 若是父數組存在本對象,說明以前已經被引用過,直接返回此對象 
     return newObjArr[index];
   }

   oldObjArr.push(oldObj);
   newObjArr.push(newObj);
  /*數組和對象均可以用forin語句,雖然數組使用forin會有一個問題(具體看最下面)。 可是這裏不會影響,因此這麼用 */
   for (let i in oldObj) {// 遞歸 
     newObj[i] = clone(oldObj[i]);
   }

   return newObj;
 };


 return clone(oldObj);
}

/* 測試成功 */
function person(pname) {
    this.name = pname;
}
  
const Messi = new person('Messi');
  
function say() {
    console.log('hi');
};
  
const oldObj = {
    a: say,
    b: new Array(1),
    c: new RegExp('ab+c', 'i'),
    d: Messi
  };
  
  const newObj = deepClone(oldObj);
  
  console.log(newObj.a, oldObj.a); //[Function: say] [Function: say]
  console.log(newObj.b[0], oldObj.b[0]); // undefined undefined
  console.log(newObj.c, oldObj.c); // /ab+c/i /ab+c/i
  console.log(newObj.d.constructor, oldObj.d.constructor); // [Function: person][Function: person]
  
複製代碼

toString和typeof區別

上面用到了toString,那就不由聯想到typeof了,以前我一直不太清楚這二者的區別。如今整理關係如圖java

下面是一些測試例子數組

var toString = Object.prototype.toString;

let a= true;
console.log(typeof(a));//boolean
console.log(toString.call(a));//[object Boolean]

a=new Boolean(true);
console.log(typeof(a));//object 
console.log(toString.call(a));//[object Boolean]


a=new RegExp('ab+c', 'i');
console.log(a.source)//ab+c
console.log(a.global)//false
console.log(a.ignoreCase)//true
console.log(a.multiline)//false
console.log(a.lastIndex)//0

console.log(typeof(a));//object
console.log(toString.call(a));//[object RegExp]


function say() {
  console.log('hi');
};
a=say;
console.log(typeof(a));//function
console.log(toString.call(a));//[object Function]

a=[1,2,3,4,5];
(let i in a){//數組也能夠用for in ,可是有個問題,看下面
console.log(a[i])
}
console.log(typeof(a));//object
console.log(toString.call(a));//[object Array]

a=Symbol('foo');
console.log(typeof(a));//symbol
console.log(toString.call(a));//[object Symbol]


複製代碼

數組使用for in語句

for in函數中變量以字符串的形式出現,這時候在函數中操做a[x+1]的話是無效的,x+1會進行字符串拼接。函數

var a=[5,4,3,2,1];
        var x=0;
        console.log(typeof x);//number
        for (x in a) {
            console.log("a["+x+"]: "+a[x]);
            console.log(typeof x);//string
        }
        console.log(x);//4
        console.log(typeof x);//string
//output:
// a[0]: 5
// a[1]: 4
// a[2]: 3
// a[3]: 2
// a[4]: 1
複製代碼
相關文章
相關標籤/搜索