JavaScript中检查对象或数组中键是否存在的方法

技术背景

在JavaScript开发中，经常需要检查一个特定的键是否存在于对象或数组中。这在处理动态数据、避免因访问不存在的属性而导致的错误等场景中非常重要。然而，JavaScript对象和数组的特性使得键的检查方式有多种，并且不同方式在不同场景下有不同的表现和性能。

实现步骤

1. 直接访问并检查是否为undefined

当直接访问一个对象中不存在的属性时，JavaScript会返回undefined。因此，可以通过比较属性值是否为undefined来判断键是否存在。

var aa = {hello: "world"};
if(aa["goodbye"] === undefined) {
    // 键不存在
}

不过，这种方法存在局限性，如果键存在但值本身就是undefined，会得到错误的结果。

var obj = { key: undefined };
console.log(obj["key"] !== undefined); // false, 但键是存在的

2. 使用in操作符

in操作符会检查指定的属性是否存在于指定的对象或其原型链中，如果存在则返回true，否则返回false。

var obj = { key: undefined };
console.log("key" in obj); // true, 无论实际值是什么

如果要检查键不存在的情况，需要注意使用括号：

var obj = { not_key: undefined };
console.log(!("key" in obj)); // true 如果 "key" 不在对象中
console.log(!"key" in obj);   // 不要这样做！它等价于 "false in obj"

3. 使用hasOwnProperty方法

hasOwnProperty方法用于检查对象自身是否具有指定的属性，而不考虑原型链。

var obj = { key: undefined };
console.log(obj.hasOwnProperty("key")); // true

4. 使用Object.hasOwn方法（ES2021及以后）

Object.hasOwn是一个静态方法，用于替代Object.hasOwnProperty。它返回true如果指定的对象有指定的属性作为其自身属性，如果属性是继承的或不存在，则返回false。

const person = { name: 'dan' };
console.log(Object.hasOwn(person, 'name')); // true
console.log(Object.hasOwn(person, 'age'));  // false

该方法的优势在于它也适用于通过Object.create(null)创建的对象，以及那些重写了继承的hasOwnProperty方法的对象。

5. 其他方法

• 使用Object.keys和includes方法：

function keyExists(obj, key) {
    return Object.keys(obj).includes(key);
}
var obj = {foo: 'one', bar: 'two'};
console.log(keyExists(obj, 'foo')); // true

不过这种方法在处理整数键时可能会有问题，因为Object.keys返回的键是字符串类型。

• 自定义辅助函数：

function keyExists(key, search) {
    if (!search || (search.constructor !== Array && search.constructor !== Object)) {
        return false;
    }
    for (var i = 0; i < search.length; i++) {
        if (search[i] === key) {
            return true;
        }
    }
    return key in search;
}
console.log(keyExists('apple', ['apple', 'banana', 'orange'])); // true
console.log(keyExists('age', {'name': 'Bill', 'age': 29 }));    // true

核心代码

检查对象中键是否存在的多种方式示例

// 1. 直接访问并检查是否为 undefined
var obj1 = { key1: "value1" };
if (obj1["key2"] === undefined) {
    console.log("key2 不存在于 obj1 中");
}

// 2. 使用 in 操作符
var obj2 = { key2: undefined };
if ("key2" in obj2) {
    console.log("key2 存在于 obj2 中");
}

// 3. 使用 hasOwnProperty 方法
var obj3 = { key3: "value3" };
if (obj3.hasOwnProperty("key3")) {
    console.log("key3 是 obj3 的自身属性");
}

// 4. 使用 Object.hasOwn 方法
const obj4 = { key4: "value4" };
if (Object.hasOwn(obj4, "key4")) {
    console.log("key4 是 obj4 的自身属性");
}

最佳实践

• 避免对象属性值为undefined：如果可能，尽量使用null来初始化属性值，这样可以直接通过比较是否为undefined来判断键是否存在。
• 性能考虑：在性能敏感的场景中，直接访问属性并检查是否为undefined通常是最快的方式，但要确保不会出现属性值本身为undefined的情况。in操作符和hasOwnProperty方法会使用JavaScript的属性描述符机制，相对较慢。
• 选择合适的方法：如果需要检查对象自身的属性，优先使用hasOwnProperty或Object.hasOwn；如果需要考虑原型链上的属性，使用in操作符。

常见问题

1. 当键存在但值为undefined时，直接检查undefined会出错

如前面所述，当键存在但值为undefined时，直接比较属性值是否为undefined会得到错误的结果。此时应使用in操作符或hasOwnProperty方法。

2. Object.keys和includes方法处理整数键的问题

Object.keys返回的键是字符串类型，因此在处理整数键时，使用includes方法可能会得到错误的结果。例如：

var myArray = [];
myArray[456] = 'John';
console.log(Object.keys(myArray).includes(456)); // false

3. hasOwnProperty方法在某些特殊对象上的问题

如果对象重写了hasOwnProperty方法，或者对象是通过Object.create(null)创建的，使用Object.prototype.hasOwnProperty.call或Object.hasOwn方法可以避免这些问题。

let person = {
    hasOwnProperty: function() {
        return false;
    },
    age: 35
};
if (Object.hasOwn(person, 'age')) {
    console.log(person.age); // true - 重写的 hasOwnProperty 方法不会影响 Object.hasOwn
}