如何提取JavaScript数组中对象的属性名（如country、city）

根据你的需求可以分两种场景实现：

场景1：数组内所有对象结构完全一致（如你提供的示例） #

直接取数组第一个元素的属性名即可，使用内置方法Object.keys()：

const locations = [
    {
      country: "United States",
      city: "Henderson",
      state: "Kentucky",
      postalCode: 42420,
    },
    {
      country: "United States",
      city: "Henderson",
      state: "Kentucky",
      postalCode: 42420,
    }]

// 提取属性名列表
const keyList = Object.keys(locations[0])
// 输出：['country', 'city', 'state', 'postalCode']

// 对应你之前的渲染写法，直接遍历属性名列表即可
keyList.map(key => <p>{key}</p>)

场景2：数组内对象结构可能存在差异，需提取所有出现过的去重属性名 #

组合使用flatMap、Object.keys()和Set实现：

// 提取所有去重后的属性名
const allUniqueKeys = [...new Set(locations.flatMap(item => Object.keys(item)))]

核心方法说明 #

• Object.keys(目标对象)：返回传入对象自身可枚举属性组成的字符串数组，刚好匹配你要提取属性名的需求
• flatMap：遍历数组每一项执行映射操作后，自动将结果扁平化一层，适合逐个提取所有对象的属性名再合并
• Set：用于对属性名列表去重，避免重复属性名出现在最终结果中

注意事项 #

如果数组可能为空，需要先做判空处理再执行取第一个元素的操作，避免抛出undefined访问错误：

let keyList = []
if (locations.length > 0) {
  keyList = Object.keys(locations[0])
}

内容的提问来源于stack exchange，提问作者cocosa