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