获取JavaScript对象键列表vol. 2

Question

以下是原始问题：获取JavaScript对象键列表

但如果情况稍微复杂一些，例如：

var obj = [
   { key1: 'value1' },
   { key2: 'value2' },
   { key3: 'value3' },
   { key4: 'value4' }
]

那么你如何获得这样的键？

[key1,key2,key3,key4]

- Magnus Pääru

---

在你的代码片段中，obj 不是一个普通对象，而是一个数组。 - Kevin

Answer 1

您可以使用Object.keys和Array#flatMap的组合。

let obj = [
   { key1: 'value1' },
   { key2: 'value2' },
   { key3: 'value3' },
   { key4: 'value4' },
];

let keys = obj.flatMap(Object.keys);

console.log(keys);

- kind user

---

感谢这个建议，可以缩短为[].concat(...obj.map(Object.keys));。 - Mr_Green

Answer 2

你可以获取obj中每个对象的键，然后使用concat()将其添加到你的结果数组中。

    var obj = [
       {
           key1: 'value1'
       },
       {
           key2: 'value2'
       },
       {   
           key3: 'value3'
       },
       {   
           key4: 'value4'
       }
    ]
var keyList = [];
obj.forEach(function(o){
    keyList = keyList.concat(Object.keys(o));
});
console.log(keyList);

- Dij

Answer 3

您可以使用 Array#reduce 方法来实现它。

var obj = [{
  key1: 'value1'
}, {
  key2: 'value2'
}, {
  key3: 'value3'
}, {
  key4: 'value4'
}];

var res = obj
  // iterate over the array
  .reduce(function(arr, o) {
    // get keys and push into the array
    [].push.apply(arr, Object.keys(o));
    // return the araray reference
    return arr;
    // set initial value as an empty array
  }, []);

console.log(res);

// ES6 alternative
var res1 = obj.reduce((arr, o) => (arr.push(...Object.keys(o)), arr), []);

console.log(res1);

- Pranav C Balan

---

"Uncaught SyntaxError: Unexpected token {", - Cerbrus

在reduce中看到arr.push改变数组的行为让我感到很奇怪。为什么不返回[...arr, Object.keys(o)]，或者使用concat做同样的事情呢？ - Tom Fenech

@TomFenech：如果需要每次生成新数组，那么使用map()方法比reduce()更好，至于是否更好，我不确定:) - Pranav C Balan

是的，创建新对象会产生（非常轻微的）性能损失，但如果你只是要推到一个数组中，那么最好使用一个 for 循环。 - Tom Fenech

Answer 4

尝试使用 Array#reduce() 和 Object.keys()。Reduce 在函数内创建数组，forEach 迭代内部对象键。

var obj = [ { key1: 'value1' }, { key2: 'value2' }, { 
key3: 'value3' }, { 
key4: 'value4' } ]


console.log(obj.reduce(function(a,b){
 Object.keys(b).forEach(function(val){
   a.push(val)
  })
  return a;
},[]))

- prasanth

---

有人跟着我给我所有的“数组”问题投反对票，为什么？ - prasanth

Answer 5

你可以使用 for in 遍历对象属性，类似于这样。

var obj = [
   { key1: 'value1' },
   { key2: 'value2' },
   { key3: 'value3' },
   { key4: 'value4' }
],
keysArray = [];

obj.forEach((item)=>{
    for(key in item){
      keysArray.push(key);
    }
});
    
console.log(keysArray);

- AlexanderT

Answer 6

使用箭头，因为[0]看起来有点奇怪 :/

var obj = [
   { key1: 'value1' },
   { key2: 'value2' },
   { key3: 'value3' },
   { key4: 'value4' }
];

var result = obj.map(x => Object.keys(x)[0]);

console.log(result);

如果有多个键值对，那么

obj.map(Object.keys).reduce((a, b) => a.concat(b));

其他方法：

[].concat(...obj.map(Object.keys));

[].concat.apply(this, obj.map(Object.keys));

或者使用 Lodash（我经常使用它）

_.flatten(obj.map(Object.keys))

- Mr_Green