基础篇

一、js计算object的长度

  • 方法1：通过Object.keys()获取对象可枚举属性所组成的数组，并通过length获取对象长度
1
2
3
4

    var obj = {"c1":1, "c2":2};
    var arr = Object.keys(obj);
    var len = arr.length;
    console.log(len);//结果为2
  • 方法2：通过for in 遍历对象，并通过hasOwnProperty判断是否是对象自身可枚举的属性
1
2
3
4
5
6
7
8
9
10
11

    var obj = {"c1":1, "c2":2};
    function countProperties(obj){
        for(var property in obj){
            if(Object.prototype.hasOwnProperty.call(obj,property){
                count++;
            })
        }
        return count;
    }
    var len = obj.length;
    console.log(len);  //结果为2


二、js判断一个对象是否为空

1
2
3
4

    var c = {};
    if(JSON.stringify(c) == "{}"){ 
        console.log('对象为空');
    }


三、js判断object里面是否包含某一字段

1
2
3
4
5
6
7

    var obj = { 
        name:"王中",
        age:"26岁",
    };
    if (obj.hasOwnProperty("age")){
        console.log("有age项")；
    }


四、js里面动态地为对象添加属性

  • 通用方法：在属性名固定或不固定的情况下都可使用，如下
1
2

    var a = "newkey";
    obj[a] = value;
  • 属性名固定的情况下：可直接 obj.newKey=value; 也可以 obj[newKey]=value;



进阶篇

一、js关于对象键值为数字型时输出的对象自动排序问题的解决方法

  • 问题描述：对象键值为数字型时输出的对象自动排序问题，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13

    var objs = {
        "5" : {},
        "2" : {},
        "1" : {}
    }
    console.log(objs);
    输出的对象是：
    {
        "1":{},
        "2":{},
        "5":{}
    }
    会自动按照键值大小排序，这样容易影响数据显示的顺序问题
  • 解决方法：将对象的键值转换为字符串类型，可以在前面加个字符串（如'id_'），这样就不会自动排序了，如下：
1
2
3
4
5
6
7
8
9
10
11
12

    var objs = {
        "id_5" : {},
        "id_2" : {},
        "id_1" : {}
    }
    console.log(objs);
    输出的对象是：
    {
        "id_5" : {},
        "id_2" : {},
        "id_1" : {}
    }


二、js对象引用与拷贝

  • 对象引用：除了基本类型跟null，对象（或数组）之间的赋值，只是将地址指向同一个，而不是真正意义上的拷贝
1
2
3
4
5
6
7
8
9
10

    // 数组
    var a = [1,2,3];
    var b = a;
    b.push(4); // b中添加了一个4
    alert(a); // a变成了[1,2,3,4] 
    // 对象
    var obj = {a:10};
    var obj2 = obj;
    obj2.a = 20; // obj2.a改变了，
    alert(obj.a); // 20，obj的a跟着改变
  • 浅拷贝：要实现真正意义上的拷贝，我们需要封装一个函数，来对对象进行拷贝，通过for in 循环获取基本类型，赋值每一个基本类型
1
2
3
4
5
6
7
8
9
10
11

    var obj = {a:10};
    function copy(obj){
        var newobj = {};
        for ( var attr in obj) {
            newobj[attr] = obj[attr];
        }
        return newobj;
    }
    var obj2 = copy(obj);
    obj2.a = 20;
    alert(obj.a); //10
  • 深拷贝：浅拷贝存在隐患，如果obj中，a的值不是10，而是一个对象，这样就会导致在for in中，将a这个对象的引用赋值为新对象，导致存在对象引用的问题，因此我们需要通过递归，来拷贝深层的对象。将copy改造成递归即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14

    var obj = {a:{b:10}};
    function deepCopy(obj){
        if(typeof obj != 'object'){
            return obj;
        }
        var newobj = {};
        for ( var attr in obj) {
            newobj[attr] = deepCopy(obj[attr]);
        }
        return newobj;
    }
    var obj2 = deepCopy(obj);
    obj2.a.b = 20;
    alert(obj.a.b); //10


三、js对象合并

需求：设有对象 o1、o2、o3,需要得到对象 o4，如下：

1
2
3

    var o1 = { a:'a' }, o2 = { b:'b' }, o3 = { c:'c' }, , o4 = {};
    // 则
    var o4 = { a:'a', b:'b', c:'c' }
  • 方法1：遍历赋值法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    var o1 = { a:'a' }, o2 = { b:'b' }, o3 = { c:'c' }, o4 = {};
    // 把n中的元素添加到o，然后返回o
    var extend = function(o,n){
        for (var p in n){
            if(n.hasOwnProperty(p) && (!o.hasOwnProperty(p) )){
                o[p] = n[p];
            }   
        }
        return o;
    };  
    // 挨个调用
    o4 = extend(o4, o1);
    o4 = extend(o4, o2);
    o4 = extend(o4, o3);
    console.log(o4);  //输出{a: "a", b: "b", c: "c"}
  • 方法2：使用 Object.assign()：
1
2
3
4
5
6

    var o1 = { a:'a' }, o2 = { b:'b' }, o3 = { c:'c' }, o4 = {};
    o4 = Object.assign(o1, o2, o3);
    console.log(o4);  // {a: "a", b: "b", c: "c"}
    console.log(o1);  // {a: "a", b: "b", c: "c"}, 注意目标对象自身也会改变。
    console.log(o2);  // {b: "b"}
    console.log(o3);  // {c: "c"}
  • 方法3：使用JQuery的extend方法，将一个或多个对象的内容合并到目标对象 用法：jQuery.extend([deep], target, object1, [objectN])
参数 说明
deep 可选。 Boolean类型 指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该”属性对象”的属性也将进行合并。
target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。
object1 可选。 Object类型 第一个被合并的对象。
objectN 可选。 Object类型 第N个被合并的对象。

注意：

  • 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
  • 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。
1
2
3
4

    var o1 = { a:'a' }, o2 = { b:'b' }, o3 = {};
    o3 = $.extend(o1, o2)  // 合并 o1 和 o2， 将结果返回给 o3. 注意： 此时，o1 == o3! 即 o1 被修改
    // 或
    o3 = $.extend({}, o1, o2) // 合并 o1 和 o2， 将结果返回给 o3. 注意： 此时，o1 ！= o3! 即 o1 没有被修改