JS:深度克隆、filter()源碼解析

A. 深度克隆代碼解析

var obj = {
    name : 'kiwi',
    teacher : {}
}
var obj1 = {
    name : 'sasa',
    teacher : {
        t1 : {name : 'coco', age : 32 },
        t2 : {name : 'joe',age : 20}
    },
    money : [1,2,3,4]
}
function deepClone (target, option){
    if(option){
        var copy,src;
        for(var prop in option){
            //羅列出option的屬性名
            copy = option[prop];
            //羅列出target的屬性名用於對比copy值是否已經有了同樣的名稱。
            src = target[prop];
            //判斷是引用值仍是原始值
            if(copy && typeof copy == 'object'){
                //判斷引用值是數組仍是對象
                if(Object.prototype.toString.call(copy) == '[object Array]'){
                //若是target自己就有這個屬性名那就用本身的屬性名，若是沒有就建立一個空數組用於存放屬性值。
                    src = src ? src : [];
                }else{
                    src = src ? src : {};
                }
                //用遞歸函數層層滲透解析，一直到原始值。
                target[prop] = deepClone(src, copy);
            }else{
                target[prop] = copy;
            }
        }
    }
    return target;
}
deepClone(obj, obj1)
console.log(obj);
複製代碼

B. filter()源碼解析

var arr = [
        {name : 'kiwi', age : 12},
        {name : 'sasa', age : 22},
        {name : 'alice', age : 32},
        {name : 'joe', age : 42}
    ]
Array.prototype.myFilter = function(fn){
//fn做爲判斷元素的條件，因此返回值爲boolean
    var newArray = [];
    var len = this.length;
    for(var i = 0; i < len; i ++){
       //判斷是否知足函數條件
       if(fn(this[i],i)){
       //過濾出知足條件的元素並深度克隆下來。
           if(typeof this[i] == 'object'){
                var obj = {};
                newArray.push(deepClone(obj, this[i]));
           }else{
                newArray.push(this[i]);
           }
       } 
    }
    return newArray;
}
var fArr =  arr1.filter(function(ele,index){
    if(ele.age > 24){
        return true;
    }
})
console.log(fArr);
arr1[0].name = 'abcd';
console.log(arr);
console.log(fArr);//fArr不隨arr的改變而改變
複製代碼