原生JS的對象經常使用操做總結

   前端時間寫了篇怎麼判斷js對象相等的文章,一直在期待大神給點消息，無奈一直杳無音訊，仍是本身寫個函數來進行判斷，下面總結一些經常使用的對象操做的方法。

   咋們來個先抑後揚的方式，先放出幾個基本的東西，埋點伏筆，一會兒就把那方法亮出來，我這文章就沒得寫了。大神們就繞道走吧，哥這是入門級別的，本身覺還挺實用的，就先作個記錄。

類型定義及判斷

  先來個全局變量 及定義默認的數據類型

   1:    var framework = {

   2:      //定義經常使用的js類型

   3:        type : {

   4:            nothing : -1,

   5:            undefined : 0,

   6:            string : 1,

   7:            number : 2,

   8:            array : 3,

   9:            regex : 4,

  10:            bool : 5,

  11:            method : 6,

  12:            datetime : 7,

  13:            object : 8

  14:        },

  15:      types:{},

  16:      addType:function(type,compare){

  17:        framework.types[type]=compare

  18:      }

  19:    };

  20:    

  21:      //默認的數據類型判斷

  22:       framework.addType(framework.type.nothing, function (value) {

  23:           return value == null;

  24:       });

  25:       framework.addType(framework.type.array, function (value) {

  26:           return value instanceof Array;

  27:       });

  28:       framework.addType(framework.type.string, function (value) {

  29:           return value.substr && value.toLowerCase;

  30:       });

  31:       framework.addType(framework.type.number, function (value) {

  32:           return value.toFixed && value.toExponential;

  33:       });

  34:       framework.addType(framework.type.regex, function (value) {

  35:           return value instanceof RegExp;

  36:       });

  37:       framework.addType(framework.type.bool, function (value) {

  38:           return value == true || value == false;

  39:       });

  40:       framework.addType(framework.type.method, function (value) {

  41:           return value instanceof Function;

  42:       });

  43:       framework.addType(framework.type.datetime, function (value) {

  44:           return value instanceof Date;

  45:       });

  哥原本還擔憂沒啥東西,一貼這點代碼就有點心虛了，有興趣的悠着點耐心點，後面估計還有段距離呀。。。。下面開始進入主題吧。

先上兩個小菜

   廢話就很少說了，直接貼代碼，這個應該是我的都能看懂的哈，不解釋。。。

   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 對象中的方法啦。不重複貼上面的代碼，測試的本身合併一下就能夠了。

   1:      //遍歷集合對象

   2:        each : function (collection, action) {

   3:            var index = 0;

   4:            for (var item in collection) {

   5:                if (collection.hasOwnProperty(item))

   6:                    action(collection[item], index++);

   7:            }

   8:        },

   9:        

  10:        clone : function (obj) {

  11:            //判斷是不是數組，是數組克隆每一項

  12:            if (framework.util.isType(framework.type.array, obj)) {

  13:                return framework.util.cloneArray(obj);

  14:            }

  15:            //克隆對象中的值

  16:            else if (framework.util.isType(framework.type.object, obj)) {

  17:                var clone = {};

  18:                for (var item in obj) {

  19:                    if (obj.hasOwnProperty(item)) //去掉原型鏈中的屬性

  20:                        clone[item] = framework.util.clone(obj[item]);

  21:                }

  22:                return clone;

  23:            }

  24:            //若是是其餘類型，則直接返回其值

  25:            else {

  26:                return obj;

  27:            }

  28:        },

  29:   

  30:        //進行數組克隆

  31:        cloneArray : function (array) {

  32:            var result = [];

  33:            framework.util.each(array, function (item) {

  34:                result.push(framework.util.clone(item));

  35:            });

  36:            return result;

  37:        },

  38:   

  39:        //路徑轉換

  40:        getPath : function (path) {

  41:            return framework.util.toString(path).split(framework.exp.get_path);

  42:        },

  43:   

  44:        //建立句柄執行函數

  45:        invoke : function (obj, args) {

  46:            args = args.concat();

  47:   

  48:            var path = args[0];

  49:            var method = framework.util.findValue(obj, path);

  50:            args = framework.util.select(args, null, 1, null);

  51:   

  52:            path = path.replace(/\..*$/, "");

  53:            var parent = framework.util.findValue(obj, path);

  54:            obj = parent === method ? obj : parent;

  55:            try {

  56:                var result = method.apply(obj, args);

  57:                return result;

  58:            } catch (e) {

  59:                return null;

  60:            }

  61:        },

  62:   

  63:        //根據路徑找值

  64:        findValue : function (obj, path) {

  65:            if (framework.util.isType(framework.type.array, path)) {

  66:                return this.util.invoke(obj, path);

  67:   

  68:            } else if (framework.util.isType(framework.type.string, path)) {

  69:                path = framework.util.getPath(path);

  70:                var index = 0;

  71:                while (obj != null && index < path.length) {

  72:                    obj = obj[path[index++]];

  73:                }

  74:                return obj;

  75:   

  76:            } else {

  77:                return obj;

  78:            }

  79:        },

  80:        //對象轉換成數組

  81:        toArray : function (obj) {

  82:            var items = [];

  83:            if (obj.length) {

  84:                for (var i = 0; i < obj.length; i++) {

  85:                    items.push(obj[i]);

  86:                }

  87:            } else {

  88:                for (var item in obj) {

  89:                    if (obj.hasOwnProperty(item))

  90:                        items.push(obj[item]);

  91:                }

  92:            }

  93:            return items;

  94:        },

  95:        equals : function (val1, val2) {

  96:             //深度判斷對象相等，這個是重點呀，那天就是爲了這個東西糾結我老半天，如今都還在糾結中，一直沒找到好的方法解決。

  97:            if (framework.util.getType(val1) == framework.util.getType(val1) && framework.util.isType(framework.type.array, val1)) {

  98:                return framework.util.arrayEquals(val1, val2);

  99:            } else if (framework.util.getType(val1) == framework.util.getType(val1) && framework.util.isType(framework.type.object, val1)) {

 100:                var result = true;

 101:                for (var item in val1) {

 102:                    if (framework.util.isType(framework.type.array, val1[item])) {

 103:                        result = framework.util.arrayEquals(val1[item], val1[item]);

 104:                    } else {

 105:                        result = (val1[item] == val2[item]);

 106:                    }

 107:                    if (result == false)

 108:                        break;

 109:                }

 110:                return result;

 111:            } else {

 112:                return val1 == val2;

 113:            }

 114:   

 115:        },

 116:        arrayEquals : function (val1, val2) {

 117:            if (framework.util.isType(framework.type.array, val1) && framework.util.isType(framework.type.array, val2) && val1.sort().toString() == val2.sort().toString()) {

 118:                return true;

 119:            } else {

 120:                return false;

 121:            }

 122:   

 123:        },

 124:        //返回索引所在的值

 125:        elementAt : function (collection, index) {

 126:            return collection && collection.length > 0 && index < collection.length && index >= 0

 127:             ? collection[index]

 128:             : null;

 129:        },

 130:   

 131:        //向目標對象附加屬性

 132:        apply : function (target, source) {

 133:            for (var item in source) {

 134:                if (source.hasOwnProperty(item))

 135:                    target[item] = source[item];

 136:            }

 137:            return target;

 138:        },

 139:   

 140:        //獲取at後面的值

 141:        remaining : function (array, at) {

 142:            var results = [];

 143:            for (; at < array.length; at++)

 144:                results.push(array[at]);

 145:            return results;

 146:        },

 147:   

 148:        regexEscape : function (val) {

 149:            return (val ? val : "").toString().replace(framework.exp.escape_regex, "\\$&");

 150:        },

 151:   

 152:        //正則匹配搜索

 153:        regexMatch : function (expression, source, ignoreCase) {

 154:   

 155:            if (this.util.isType(framework.type.regex, expression)) {

 156:                expression = expression.source;

 157:            }

 158:   

 159:            expression = new RegExp(framework.util.toString(expression), ignoreCase ? "gi" : "g");

 160:            return framework.util.toString(source).match(expression) != null;

 161:        }

             這個大餐是上完了，驗證下有沒有效果吧。先上個簡單的，出錯了省得出醜。

   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}]}