如何使用JS/JSX获取对象的属性数组？技术实现咨询

嘿，这事儿其实超简单的，咱们用JavaScript的内置方法就能轻松拿到你想要的属性数组！下面给你两种场景的实现方式，纯JS和React JSX里的用法都有～

核心思路 #

因为你的data数组里所有对象的结构都是一致的，所以咱们只需要取数组里的第一个对象，然后用**Object.keys()**方法获取它的属性名数组就可以了。这个方法会返回对象自身所有可枚举属性的字符串数组，完全符合你的需求。

纯JavaScript实现 #

const state = {
  data: [
    { id: 1, name: "DAVE", age: 23, attend: true },
    { id: 2, name: "JHONE", age: 24, attend: true },
    { id: 3, name: "NICK", age: 25, attend: true },
  ],
};

// 封装成函数，方便复用
const getPropertyArray = (data) => {
  // 一定要加边界判断：如果data是空数组，避免取undefined的keys报错
  if (!data || data.length === 0) {
    return [];
  }
  return Object.keys(data[0]);
};

// 调用函数获取结果
const propertyArray = getPropertyArray(state.data);
console.log(propertyArray); // 输出: ["id", "name", "age", "attend"]

React JSX场景实现 #

如果是在React组件里需要用到这个属性数组，比如渲染到页面上，可以这样写：

import React from 'react';

function UserList() {
  const state = {
    data: [
      { id: 1, name: "DAVE", age: 23, attend: true },
      { id: 2, name: "JHONE", age: 24, attend: true },
      { id: 3, name: "NICK", age: 25, attend: true },
    ],
  };

  // 直接在组件内计算属性数组
  const propertyArray = state.data.length > 0 
    ? Object.keys(state.data[0]) 
    : [];

  return (
    <div className="user-properties">
      <h3>用户对象属性列表</h3>
      <ul>
        {propertyArray.map((prop) => (
          <li key={prop}>{prop}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

注意事项 #

• 一定要处理data为空数组的情况，不然直接调用Object.keys(data[0])会因为data[0]是undefined而抛出错误。
• 如果你的对象里有不可枚举的属性，Object.keys()不会返回它们，但从你的示例来看，所有属性都是可枚举的，所以完全没问题。

内容的提问来源于stack exchange，提问作者Nilupul Heshan Kodikara