从一组对象中，将属性提取到多个数组中（每个属性一个）？

Question

我在 JS 中有一个 JSON 对象数组，如下所示：

"data": [
   {"name": "abc", "location": "NY", "value": 1234, "potato": "tomato", "someOtherProp": "prop1"},
   {"name": "def", "location": "CA", ... etc}
   {etc ...},
]

我正在创建一个用于过滤其中一些字段的 UI，并希望为每个属性创建一个数组，其中包含数据中的所有给定值。

我知道使用这样的方法是可能的：

let result = objArray.map(a => a.name);

但是使用这种策略，我必须为每个属性运行一次 map。 有没有办法只遍历数组一次，但为每个数组创建一个单独的数组？ （或者有没有更好的方法来为 UI 创建过滤器选项？）

为了澄清，对于上面的数组，我想要一个用于“名称”的数组（包含“abc”和“def”），一个用于“位置”的数组（包含 NY、CA 等）以及一个用于“土豆”的数组s 和“someOtherProp”。

我感谢任何帮助！ 谢谢

Answer 1

使用.reduce()循环遍历数组。 在每次迭代中，使用Object.keys()遍历对象的键，将任何唯一值添加到同名数组中。

此解决方案消除了重复条目并适用于任意数量的属性。

 const data = [{name: "abc", location: "NY"},{name: "def", location: "CA"},{name: "xyz", location: "TX"},{name: "zyx", location: "TX"}]; const getFiltersFromData = (data) => { return data.reduce((out,obj) => { Object.keys(obj).forEach(k => { if (out[k] === undefined) out[k] = [obj[k]]; //Array doesn't exist yet - instantiate it else if (!out[k].includes(obj[k])) out[k].push(obj[k]); //Array exists and this value isn't in it - add the value to it }); return out; }, {}); }; const filters = getFiltersFromData(data); console.log(filters.name); console.log(filters.location);

 .as-console-wrapper, .as-console { height: 100% !important; max-height: 100% !important; top: 0; }

Answer 2

您可以根据名称、位置和值创建单独的数组，然后在数据数组上使用 map 将每个属性值推送到数组。 您可以这样做，而不是为每个属性多次运行地图：

var names = [];
var locations = [];
var values = [];

data.map((elt) => {
    names.push(elt.name);
    locations.push(elt.location);
    values.push(elt.value);
});

Answer 3

尝试使用Object.entries

你可以得到这样的东西：

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]