美文网首页
2018-07-26

2018-07-26

作者: lwz4070 | 来源:发表于2018-07-26 17:04 被阅读0次

    JS 封装一个方法,对五种主要数据类型(String Boolean Number Undefined Null)进行值复制(深度克隆)

    方法一

     Object.prototype.clone = function(){
           //this指向 a 
           var o = this.constructor === Array ? [] : {}; //判断传进来的是数据是否是数组,是则创建一个新数组,不是则创建一个对象
           for(var e in this){
              o[e] = typeof this[e] === "object" ? this[e].clone():this[e];  //判断e是否是普通变量,不是则继续递归遍历
           }
           return o;
          }
          var a = [1,2,3];
         // var a = {name:"张三"}
          var b= a.clone();
          b.push(1);
          console.log(a); //[1,2,3]
          console.log(b); //[1,2,3,1]
    

    方法二:

       function clone(Obj){
           var buf;
           if(Obj instanceof Array){
               buf = [];//创建一个空数组
               var i = Obj.length;
               while(i--){
                   buf[i] = clone(Obj[i]);
               } 
               return buf;
           }else if(Obj instanceof Object){
               buf = {};//创建一个空对象
               for(var k in Obj){//为这个新对象添加新属性
                   buf[k] = clone(Obj[k]);
               }
               return buf;
           }else{ //普通变量直接赋值
              return Obj;
           }
       }
    
         var a = [1,2,3];
          var b= clone(a);
          b.push(1);
          console.log(a);//[1,2,3]
          console.log(b);//[1,2,3,1]
    

    方法三:

    
        function deepClone (argument) {
            var result;
            var argumentType = isClass(argument);
            if(argumentType === "Object"){
                result = {};
            }else if(argumentType === 'Array'){
                result = [];
            }else{
                return argument;
            }
            for(var key in argument){
                var copy = argument[key];
                if(isClass(copy) === 'Object' || isClass(copy) === 'Array'){
                    result[key] = arguments.callee(copy); //用callee方法返回当前执行函数进行递归处理  保证deepClone()方法赋值给别的变量该方法正常可以运行
                    //这里说明一下 caller是返回一个队函数的引用,该函数调用了当前函数,如函数f调用了deepClone函数,则caller指向的是函数a
                    //callee是返回正在被执行的function函数,也就是所指定的function对象的正文,这里指的是deepClone
             }else{
                    result[key] = argument[key];
                }
            }
            return result;
        }
        function isClass(o){
            return Object.prototype.toString.call(o).slice(8,-1); //call实现继承 如形式[object Array] 截取"Array"字符串
        }
     
         var a = [1,2,3];
           var b= deepClone(a);
           b.push(1);
           console.log(a);//[1,2,3]
           console.log(b);//[1,2,3,1]
    

    方法四:

    let a = {
        age: 1,
        jobs: {
            first: 'FE'
        }
    }
    let b = JSON.parse(JSON.stringify(a))
    a.jobs.first = 'native'
    console.log(b.jobs.first) // FE
    

    但是该方法也是有局限性的:

    • 会忽略 undefined
    • 会忽略 symbol
    • 不能序列化函数
    • 不能解决循环引用的对象

    相关文章

      网友评论

          本文标题:2018-07-26

          本文链接:https://www.haomeiwen.com/subject/rhibmftx.html