原生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