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的改变而改变
复制代码