js之數據污染與深度克隆

本次講解寫js之數據污染。

什麼叫污染，這個污染就是類似與生活中的污染一樣，比如說抹布使用了以後就會髒髒的，這個就是污染。那麼js中的數據如果使用了，數據發生了變化，那就是數據污染。

js基本類型數據是不會存在數據污染的，只有引用類型會存在數據污染，比如說數組，對象。

一個數組的數據污染例子：

var arr = [1,2,3];
var nArr = arr;
nArr.push(4);
console.log(nArr); // 打印[1,2,3,4]
console.log(arr); // 打印[1,2,3,4]

那麼arr 數組就是被污染了。

怎麼保證不會被污染呢，其實對於數組來說有好多中，map,filter,concat,es6的擴展符等等多種方法。對於對象來說，一般就是轉json與解析json，就可以達到要求，要麼就是es6的拓展符，要麼defineProperty。

最後總結下，既可以在數組使用的，也可以在對象使用的，json，與es6的拓展符。但是json的方法只使用與二維數組，深數組不適應。

揭祕最終的方法，自己寫一個函數來深度克隆數據，這樣子就可以防止數據污染，而且可以在數組和對象中使用。

deepClone方法：

function deepClone(obj) {
    var result;
    var oClass = isClass(obj);
    if(oClass === "Object"){
        result = {};
    }else if(oClass === "Array"){
        result = [];
    }else{
        return obj;
    }
    for(var key in obj){
        var copy = obj[key];
        if(isClass(copy)=="Object"){
           result[key]=arguments.callee(copy);//遞歸調用
        }else if(isClass(copy)=="Array"){
           result[key]=arguments.callee(copy);
        }else{
            result[key]=obj[key];
        }
    }
 return result;
}
    //判斷對象的數據類型
 function isClass(o){
   if(o===null) 
       return "Null";
   if(o===undefined) 
       return "Undefined";
    return Object.prototype.toString.call(o).slice(8,-1);
}

最終的測試自己來吧

 

ps：使用map，filter等數組方法去克隆數組對象，會被污染。