原生JS的对象常用操作总结

原生JS的对象常用操作总结

 前端时间写了篇怎么判断js对象相等的文章,一直在期待大神给点消息，无奈一直杳无音讯，还是自己写个函数来进行判断，下面总结一些常用的对象操作的方法。

   咋们来个先抑后扬的方式，先放出几个基本的东西，埋点伏笔，一下子就把那方法亮出来，我这文章就没得写了。大神们就绕道走吧，哥这是入门级别的，自己觉还挺实用的，就先做个记录。

类型定义及判断

  先来个全局变量 及定义默认的数据类型

  var framework = {
    //定义常用的js类型
      type : {
          nothing : -1,
          undefined : 0,
          string : 1,
          number : 2,
          array : 3,
          regex : 4,
          bool : 5,
          method : 6,
          datetime : 7,
          object : 8
      },
    types:{},
    addType:function(type,compare){
      framework.types[type]=compare
    }
  };

    //默认的数据类型判断
     framework.addType(framework.type.nothing, function (value) {
         return value == null;
     });
     framework.addType(framework.type.array, function (value) {
         return value instanceof Array;
     });
     framework.addType(framework.type.string, function (value) {
         return value.substr && value.toLowerCase;
     });
     framework.addType(framework.type.number, function (value) {
         return value.toFixed && value.toExponential;
     });
     framework.addType(framework.type.regex, function (value) {
         return value instanceof RegExp;
     });
     framework.addType(framework.type.bool, function (value) {
         return value == true || value == false;
     });
     framework.addType(framework.type.method, function (value) {
         return value instanceof Function;
     });
     framework.addType(framework.type.datetime, function (value) {
         return value instanceof Date;
     });

  哥本来还担心没啥东西,一贴这点代码就有点心虚了，有兴趣的悠着点耐心点，后面估计还有段距离呀。。。。下面开始进入主题吧。

先上两个小菜

   废话就不多说了，直接贴代码，这个应该是个人都能看懂的哈，不解释。。。

   1:    framework.util = {

   2:      //转换成字符串

   3:        toString : function (val) {

   4:            return val == null ? "" : val.toString();

   5:        },

   6:      

   7:      //去除字符串首尾空格

   8:        trim : function (value) {

   9:            value = value == null ? "" : value;

  10:            value = value.toString();

  11:            return value.replace(/^s*|s*$/g, "");

  12:        },

  13:        getType : function (obj) {

  14:            

  15:            if (obj == null) {

  16:                return framework.type.nothing;

  17:            }

  18:            for (var item in framework.types) {

  19:                if (framework.types[item](obj)) {

  20:                    return item;

  21:                }

  22:            }

  23:          //不匹配已定义的默认类型，就返回object

  24:            return framework.type.object;

  25:        },

  26:        isType : function (type, value) {

  27:            return framework.util.getType(value) == type;

  28:        }

  29:    }

  30:    菜上完了，先尝下合不合口啊，敲代码习惯性敲一点验证下，这样改起来能够比较快捷的定位到问题在哪。

   1:   var log =console.log;

   2:     log(framework.util.getType(null));         // -1  nothing

   3:     log(framework.util.getType("aaa"));        // 1   string

   4:     log(framework.util.getType(framework));    // 8  object

   5:     log(framework.util.getType(function(){})); //6    method

   6:     log(framework.util.getType(3232));         //2    number

   7:     log(framework.util.getType([]));           //3    array

   8:     log(framework.util.getType(true));         //5    bool

   9:     log(framework.util.getType(new Date()));   //7    datetime

       比较幸运的一次性通过了，没敲错字母，看好了，要发力了。我觉得还是一次性上完算了。别拖拖拉拉的了。

       这里直接贴util 对象中的方法啦。不重复贴上面的代码，测试的自己合并一下就可以了。

   //遍历集合对象
     each : function (collection, action) {
         var index = 0;
         for (var item in collection) {
             if (collection.hasOwnProperty(item))
                 action(collection[item], index++);
         }
     },

     clone : function (obj) {
         //判断是否是数组，是数组克隆每一项
         if (framework.util.isType(framework.type.array, obj)) {
             return framework.util.cloneArray(obj);
         }
         //克隆对象中的值
         else if (framework.util.isType(framework.type.object, obj)) {
             var clone = {};
             for (var item in obj) {
                 if (obj.hasOwnProperty(item)) //去掉原型链中的属性
                     clone[item] = framework.util.clone(obj[item]);
             }
             return clone;
         }
         //如果是其他类型，则直接返回其值
         else {
             return obj;
         }
     },

     //进行数组克隆
     cloneArray : function (array) {
         var result = [];
         framework.util.each(array, function (item) {
             result.push(framework.util.clone(item));
         });
         return result;
     },

     //路径转换
     getPath : function (path) {
         return framework.util.toString(path).split(framework.exp.get_path);
     },

     //创建句柄执行函数
     invoke : function (obj, args) {
         args = args.concat();

         var path = args[0];
         var method = framework.util.findValue(obj, path);
         args = framework.util.select(args, null, 1, null);

         path = path.replace(/..*$/, "");
         var parent = framework.util.findValue(obj, path);
         obj = parent === method ? obj : parent;
         try {
             var result = method.apply(obj, args);
             return result;
         } catch (e) {
             return null;
         }
     },

     //根据路径找值
     findValue : function (obj, path) {
         if (framework.util.isType(framework.type.array, path)) {
             return this.util.invoke(obj, path);

         } else if (framework.util.isType(framework.type.string, path)) {
             path = framework.util.getPath(path);
             var index = 0;
             while (obj != null && index < path.length) {
                 obj = obj[path[index++]];
             }
             return obj;

         } else {
             return obj;
         }
     },
     //对象转换成数组
     toArray : function (obj) {
         var items = [];
         if (obj.length) {
             for (var i = 0; i < obj.length; i++) {
                 items.push(obj[i]);
             }
         } else {
             for (var item in obj) {
                 if (obj.hasOwnProperty(item))
                     items.push(obj[item]);
             }
         }
         return items;
     },
     equals : function (val1, val2) {
//深度判断对象相等，这个是重点呀，那天就是为了这个东西纠结我老半天，现在都还在纠结中，一直没找到好的方法解决。
         if (framework.util.getType(val1) == framework.util.getType(val1) && framework.util.isType(framework.type.array, val1)) {
             return framework.util.arrayEquals(val1, val2);
         } else if (framework.util.getType(val1) == framework.util.getType(val1) && framework.util.isType(framework.type.object, val1)) {
             var result = true;
             for (var item in val1) {
                 if (framework.util.isType(framework.type.array, val1[item])) {
                     result = framework.util.arrayEquals(val1[item], val1[item]);
                 } else {
                     result = (val1[item] == val2[item]);
                 }
                 if (result == false)
                     break;
             }
             return result;
         } else {
             return val1 == val2;
         }

     },
     arrayEquals : function (val1, val2) {
         if (framework.util.isType(framework.type.array, val1) && framework.util.isType(framework.type.array, val2) && val1.sort().toString() == val2.sort().toString()) {
             return true;
         } else {
             return false;
         }

     },
     //返回索引所在的值
     elementAt : function (collection, index) {
         return collection && collection.length > 0 && index < collection.length && index >= 0
          ? collection[index]
          : null;
     },

     //向目标对象附加属性
     apply : function (target, source) {
         for (var item in source) {
             if (source.hasOwnProperty(item))
                 target[item] = source[item];
         }
         return target;
     },

     //获取at后面的值
     remaining : function (array, at) {
         var results = [];
         for (; at < array.length; at++)
             results.push(array[at]);
         return results;
     },

     regexEscape : function (val) {
         return (val ? val : "").toString().replace(framework.exp.escape_regex, "\$&");
     },

     //正则匹配搜索
     regexMatch : function (expression, source, ignoreCase) {

         if (this.util.isType(framework.type.regex, expression)) {
             expression = expression.source;
         }

         expression = new RegExp(framework.util.toString(expression), ignoreCase ? "gi" : "g");
         return framework.util.toString(source).match(expression) != null;
     }

             这个大餐是上完了，验证下有没有效果吧。先上个简单的，出错了免得出丑。

   1:      var a =new People(12,"abc");

   2:      var b = a;

   3:      var c = framework.util.clone(a);

   4:      log(b==a);   //true

   5:      log(c==a);   //false

   6:      log(c);      //当然别忘了验证下值是否相等。

最后证明还是可行的，当然这个不是重点，重点在下面，能不能进行深度克隆，这里为People 添加一个属性

   2:      var a =new People(12,"abc",[12,"bb"]);

   3:      var b = a;

   4:      var c = framework.util.clone(a);

   5:      log(b==a);   //true

   6:      log(c==a);   //false

   7:      log(c);      //当然别忘了验证下值是否相等。   

          log(a.child==c.child);            //false ==判断是对象的引用是否相等，所以这里为false ,本来是想要true的，看下面的语句： 
          log( framework.util.equals(a,c))  //true   这里返回的是我所想要的结果。 

  在这里其他的函数就不一一展示了，如果感兴趣的自己验证下结果。
         另这个 深度 判断相等并没有做到完美，在数组中存在的对象如果顺序调换下，还是会判断为false ,哪位如果有好的方法可以帮我改进一下。

         最好能做到如下两个结果是相等的。。

         a={id:5,name:"dd",[12,value:{id:8,name:”dd”}]}

         b={name:”dd”,id:5,[12,value:{name:”dd”,id:8}]}

 

 

分类: javascript