JavaScript对象长度的获取方法

技术背景

在JavaScript中，普通对象（Object）没有像数组那样直接可用的length属性来获取其包含的键值对数量。然而，在实际开发中，我们经常需要知道一个对象包含多少个属性，这就需要使用一些特定的方法来实现。

实现步骤

现代浏览器（ES5+）常用方法

从ES5开始，Object.keys()方法被广泛支持。该方法会返回一个由给定对象的所有可枚举属性组成的数组，通过获取该数组的长度，就可以得到对象的属性数量。示例代码如下：

var myObj = {
    key1: 'value1',
    key2: 'value2'
};
var size = Object.keys(myObj).length;
console.log(size); // 输出: 2

处理符号属性

需要注意的是，Object.keys()方法只能返回对象的可枚举字符串属性，对于符号属性则无法返回。要获取对象的符号属性，需要使用Object.getOwnPropertySymbols()方法。示例如下：

var person = {
    [Symbol('name')]: 'John Doe',
    [Symbol('age')]: 33,
    "occupation": "Programmer"
};

const propOwn = Object.getOwnPropertyNames(person);
console.log(propOwn.length); // 输出: 1

let propSymb = Object.getOwnPropertySymbols(person);
console.log(propSymb.length); // 输出: 2

兼容旧浏览器的方法

在不支持Object.keys()的旧浏览器中，可以手动实现一个类似的方法：

if (!Object.keys) {
    Object.keys = function (obj) {
        var arr = [],
            key;
        for (key in obj) {
            if (obj.hasOwnProperty(key)) {
                arr.push(key);
            }
        }
        return arr;
    };
}

var myObj = {
    key1: 'value1',
    key2: 'value2'
};
var size = Object.keys(myObj).length;
console.log(size); // 输出: 2

使用其他工具库

• Underscore.js：如果项目中使用了Underscore.js库，可以使用_.size()方法来获取对象的长度。示例如下：

const _ = require('underscore');
var obj = {one: 1, two: 2, three: 3};
console.log(_.size(obj)); // 输出: 3

• jQuery：可以自定义一个jQuery插件来计算对象的长度。示例如下：

$.assocArraySize = function(obj) {
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};

var myObj = {
    key1: 'value1',
    key2: 'value2'
};
var size = $.assocArraySize(myObj);
console.log(size); // 输出: 2

使用Object.entries()方法

Object.entries()方法会返回一个给定对象自身可枚举属性的键值对数组，通过获取该数组的长度也可以得到对象的属性数量。示例如下：

const objectLength = obj => Object.entries(obj).length;

const person = {
    id: 1,
    name: 'John',
    age: 30
};

const car = {
    type: 2,
    color: 'red'
};

console.log(objectLength(person)); // 输出: 3
console.log(objectLength(car)); // 输出: 2

自定义对象类

可以自定义一个对象类，在类中维护一个长度属性。示例如下：

function Hash() {
    var length = 0;
    this.add = function (key, val) {
        if (this[key] == undefined) {
            length++;
        }
        this[key] = val;
    };
    this.length = function () {
        return length;
    };
}

var myArray = new Hash();
myArray.add("lastname", "Simpson");
myArray.add("age", 21);
console.log(myArray.length()); // 输出: 2

使用Map对象

如果需要一个能直接获取大小的关联数据结构，建议使用Map对象。示例如下：

const myMap = new Map();

myMap.set("firstname", "Gareth");
myMap.set("lastname", "Simpson");
myMap.set("age", 21);

console.log(myMap.size); // 输出: 3

最佳实践

• 在现代浏览器中，优先使用Object.keys()方法，因为它简洁且性能较好。
• 如果需要处理符号属性，结合使用Object.getOwnPropertySymbols()方法。
• 避免直接修改Object.prototype，以免影响其他代码的正常运行。
• 如果项目中已经使用了相关工具库（如Underscore.js或jQuery），可以利用其提供的方法来简化代码。

常见问题

• 符号属性未被计算：使用Object.keys()方法时，符号属性不会被包含在内。需要使用Object.getOwnPropertySymbols()方法来处理符号属性。
• 修改Object.prototype导致的问题：直接在Object.prototype上添加方法可能会影响其他代码的枚举操作，导致意外的结果。因此，建议尽量避免这种做法。