JavaScript Object.keys() 方法

2025年4月19日 | 阅读 6 分钟

引言

JavaScript 作为最灵活、最广泛使用的编程语言之一，为开发人员提供了多种高效操作数据的方法。其中一种方法就是 `Object.keys()`。该方法允许开发人员从对象中提取键，从而为迭代对象属性或执行其他需要考虑键的任务提供了强大的工具。在本全面指南中，我们将深入探讨 `Object.keys()` 方法的复杂性，探索其语法、应用和示例。

理解 `Object.keys()` 方法

ECMAScript 5 (ES5) 中引入的 `Object.keys()` 方法旨在返回给定对象的“可枚举”属性名数组。这意味着它提取对象的键，并将它们以数组的形式返回，使开发人员能够轻松访问和操作它们。

语法

`Object.keys()` 方法的语法很简单。在此，`obj` 指的是我们要提取键的对象。

`Object.keys()` 的应用

1. 迭代对象属性

`Object.keys()` 的一个常见用途是迭代对象的属性。通过获取键的数组，开发人员可以遍历它们来比较值或对它们执行操作。

代码

// Defining an object with properties
const person = {
  name: ' John ',
  age: 30,
  profession: ' Developer '
};

// Extracting keys of the object using the Object.keys() method
const keys = Object.keys( person );

// Looping through the keys array using a for . . .  of loop
for ( const key of keys ) {
  // Accessing each property's key and value and printing them
  console.log(` ${ key }: ${ person [ key ]}`);
}

2. 检查对象是否存在

`Object.keys()` 的另一个有用应用是检查对象是否包含任何属性。这在处理属性集可能发生变化的动态对象时特别有用。

代码

// Defining a function to check if an object is empty
function isEmpty( obj ) {
  // Returning true if the length of the keys array is zero
  return Object.keys( obj ).length === 0;
}

// Creating an empty object
const emptyObj = { };

// Checking if the empty object is indeed empty
console.log( isEmpty( emptyObj )); // Output : true

// Creating a non-empty object
const nonEmptyObj = { a : 1 };

// Checking if the non-empty object is empty
console.log( isEmpty( nonEmptyObj )); // Output : false

在此片段中，`isEmpty()` 函数通过检查 `Object.keys()` 返回的数组的长度是否为零来判断对象是否为空。

3. 将对象转换为数组

在某些情况下，开发人员可能需要将对象的键转换为数组格式。`Object.keys()` 可以轻松实现此转换。在此，`keysArray` 包含一个包含 `car` 对象键的数组。

代码

// Defining an object representing car details
const car = {
  make: ' Toyota ',
  model: ' Corolla ',
  year: 2022
};

// Extracting keys of the car object using the Object.keys() method
const keysArray = Object.keys( car );

// Printing the array containing the keys of the car object
console.log( keysArray ); // Output : [' make ', ' model ', ' year ']

4. 过滤对象属性

开发人员经常需要根据特定标准从对象中筛选出特定的属性。`Object.keys()` 可以与其他数组方法（如 `filter()`）结合使用来实现这一点。

代码

// Defining an object representing student information
const student = {
  name: ' Alice ',
  age: 21,
  major: ' Computer Science ',
  isInternational: true
};

// Filtering out keys with non-boolean values from the student object
const nonBooleanKeys = Object.keys( student ).filter( key => typeof student[ key ] !== ' boolean ');

// Printing the array containing keys with non-boolean values
console.log( nonBooleanKeys ); // Output : [' name ', ' age ', ' major ']

探索高级用法和注意事项

虽然 `Object.keys()` 方法是 JavaScript 中处理对象的关键工具，但还有一些额外的注意事项和高级用法值得探讨，以便有效地充分发挥其潜力。

1. 处理嵌套对象

在处理嵌套对象时，开发人员可能需要提取不同嵌套级别的键。在这种情况下，递归方法与 `Object.keys()` 结合使用非常宝贵。在此示例中，`getAllKeys()` 函数会递归地遍历嵌套对象，无论其深度如何，都会提取所有键。

代码

const person = {
  name: ' John ',
  age: 30,
  address: {
    city: ' New York ',
    country: ' USA '
  }
};

function getAllKeys( obj ) {
  let keys = [];
  for (const key in obj) {
    if (typeof obj[key] === ' object ') {
      keys = keys.concat(getAllKeys(obj[ key ]));
    } else {
      keys.push( key );
    }
  }
  return keys;
}

const allKeys = getAllKeys( person );
console.log( allKeys ); // Output : [' name ', ' age ', ' city ', ' country ']

2. 处理 Symbol 属性

JavaScript 对象也可以包含以 Symbol 作为键的属性。虽然 `Object.keys()` 仅检索可枚举的字符串键，但 `Object.getOwnPropertySymbols()` 可用于获取 Symbol 键。在此，`symbolKeys` 包含 `obj` 对象中存在的 Symbol 键的数组。

代码

// Example object with a symbol property
const symbolKey = Symbol(' description ');
const obj = {
  [symbolKey] : ' Symbol Property ',
  regularKey : ' Regular Property '
};

// Retrieve symbol keys from the object
const symbolKeys = Object.getOwnPropertySymbols( obj );
console.log( symbolKeys ); // Output : [ Symbol ( description )]

3. 性能考虑

虽然 `Object.keys()` 提供了一种提取对象键的便捷方法，但考虑其性能影响至关重要，尤其是在处理大型数据集或性能敏感型应用程序时。在需要频繁访问键的情况下，缓存 `Object.keys()` 的结果可以提高性能。通过缓存键，避免了重复调用 `Object.keys()`，从而提高了整体性能。

代码

// Function to process an object
function processObject( obj ) {
  const keys = Object.keys( obj ); // Extract keys from the object
  // Perform operations using keys
}

// Example usage with a large object
const largeObject = { /* Large dataset */ };

// Cache keys for better performance
processObject( largeObject );

浏览器兼容性

`Object.keys()` 在所有现代浏览器和环境中都受支持，包括：

Chrome: 5+
Firefox: 4+
Safari: 5+
Edge: 12+
Opera: 12+
Internet Explorer: 9+

示例

// Define a sample object with nested structure, symbol property, and regular properties
const person = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  },
  [Symbol('description')]: 'Symbol Property'
};

// Function to recursively extract all keys from nested objects
function getAllKeys(obj) {
  let keys = [];
  // Iterate over each property of the object
  for (const key in obj) {
    // Check if the property is an object
    if (typeof obj[key] === 'object') {
      // If it's an object, recursively extract keys
      keys = keys.concat(getAllKeys(obj[key]));
    } else {
      // If it's not an object, add the key to the array
      keys.push(key);
    }
  }
  // Return the array of keys
  return keys;
}

// Get all keys from the person object
const allKeys = getAllKeys(person);
console.log('All Keys:', allKeys); // Output: ['name', 'age', 'city', 'country']

// Function to process object properties
function processObject(obj) {
  // Get all keys of the object
  const keys = Object.keys(obj);
  console.log('Object Keys:', keys);

  // Iterate over keys and perform operations
  for (const key of keys) {
    // Access and log each property
    console.log(`Property: ${key}, Value: ${obj[key]}`);
  }

  // Check for the presence of symbol keys
  const symbolKeys = Object.getOwnPropertySymbols(obj);
  console.log('Symbol Keys:', symbolKeys);

  // Iterate over symbol keys and access corresponding values
  for (const symbolKey of symbolKeys) {
    console.log(`Symbol Property: ${symbolKey.toString()}, Value: ${obj[symbolKey]}`);
  }
}

// Process the person object
console.log('Processing Object:');
processObject(person);

// Function to check if an object is empty
function isEmpty(obj) {
  return Object.keys(obj).length === 0;
}

// Test cases for isEmpty function
const emptyObj = {};
console.log('Is emptyObj empty?', isEmpty(emptyObj)); // Output: true

const nonEmptyObj = { a: 1 };
console.log('Is nonEmptyObj empty?', isEmpty(nonEmptyObj)); // Output: false

// Polyfill for Object.keys() in older environments
if (!Object.keys) {
  Object.keys = function(obj) {
    return Object.getOwnPropertyNames(obj).filter(function(key) {
      return Object.prototype.hasOwnProperty.call(obj, key);
    });
  };
}

结论

`Object.keys()` 方法是 JavaScript 开发人员工具箱中的一项重要工具，它提供了多种功能来高效地操作和提取对象数据。无论是迭代属性、检查对象存在性、转换为数组还是筛选属性，`Object.keys()` 都为许多常见的编程任务提供了便捷的解决方案。通过掌握此方法，开发人员可以提高效率，并在其 JavaScript 项目中编写更简洁、更精炼的代码。

下一个主题如何在 JavaScript 中比较字符串

JavaScript Object.keys() 方法

引言

理解 `Object.keys()` 方法

`Object.keys()` 的应用

1. 迭代对象属性

2. 检查对象是否存在

3. 将对象转换为数组

4. 过滤对象属性

探索高级用法和注意事项

1. 处理嵌套对象

2. 处理 Symbol 属性

3. 性能考虑

浏览器兼容性

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript Object.keys() 方法

引言

理解 `Object.keys()` 方法

`Object.keys()` 的应用

1. 迭代对象属性

2. 检查对象是否存在

3. 将对象转换为数组

4. 过滤对象属性

探索高级用法和注意事项

1. 处理嵌套对象

2. 处理 Symbol 属性

3. 性能考虑

浏览器兼容性

示例

结论

相关帖子

如何使用 JavaScript 选中复选框

JavaScript Clear Interval

JavaScript 严格模式