如何获取对象数组中对象的所有属性值的数组？

Question

我想获得每个对象的值的数组。

我有这个：

const numDataPoints = [
    {
      x0: {x: 807, y: 625},
      x1: {x: 15, y: 20},
      x2: {x: 5, y: 20}
    },
    {
      x0: {x: 11, y: 6},
      x1: {x: 16, y: 21},
      x2: {x: 7, y: 22}
    }
  ];

我要这个：

[
  [807, 625],
  [15, 20],
  [5, 20],
  [11, 6],
  [16, 21],
  [7, 22]
]

我试过这个：

numDataPoints.map((array) => array.map(axis => [axis.x, axis.y]));

但它抛出了这个错误：

未捕获的TypeError ： array.map不是函数

Answer 1

您可以将map方法与Object.values和spread语法一起使用...

 const data = [{ x0: {x: 807, y: 625}, x1: {x: 15, y: 20}, x2: {x: 5, y: 20} }, { x0: {x: 11, y: 6}, x1: {x: 16, y: 21}, x2: {x:7, y: 22} }]; const result = [].concat(...data.map(Object.values)).map(Object.values) console.log(result) 

Answer 2

您可以使用Array.map将每个对象转换为双元素数组的数组，然后缩小以展平结果：

 const numDataPoints = [{ x0: {x: 807, y: 625}, x1: {x: 15, y: 20}, x2: {x: 5, y: 20} }, { x0: {x: 11, y: 6}, x1: {x: 16, y: 21}, x2: {x:7, y: 22} }]; let result = numDataPoints.map( item => Object.values(item).map(({x, y})=> [x, y])) .reduce((arr, current) => [...arr, ...current], []); console.log(result); 

Answer 3

使用reduce也可以 - 下面也适用于其他数据，因为我们不会在这里硬编码任何密钥的名称。

 const res = numDataPoints.reduce((a, b) => a.concat(Object.keys(b).map(e => Object.values(b[e]))), []); console.log(res); 

 <script> const numDataPoints = [ { x0: { x: 807, y: 625 }, x1: { x: 15, y: 20 }, x2: { x: 5, y: 20 } }, { x0: { x: 11, y: 6 }, x1: { x: 16, y: 21 }, x2: { x: 7, y: 22 } } ]; </script> 

Answer 4

您的numDataPoints数组中numDataPoints数组，而是常规对象，因此您无法使用map 。

你需要的是Object.values 。 或者，为了保证键x0 ， x1和x2顺序相同 ，用{x0, x1, x2} 解构 ，然后使用[x0, x1, x2] 。

numDataPoints的结构表明，你实际上想要一个包含两个数组的数组，每个数组有三个 [x, y]点，而不只是六个[x, y]点。 如果您仍想要展平这些子阵列，请使用concat或flatMap （目前是第3阶段候选者，可能成为2019年6月完成的ECMAScript版本的一部分）。

以下是六种可能性：

 const numDataPoints = [ { x0: {x: 807, y: 625}, x1: {x: 15, y: 20}, x2: {x: 5, y: 20} }, { x0: {x: 11, y: 6}, x1: {x: 16, y: 21}, x2: {x: 7, y: 22} } ]; // Object.values, same structure console.log(numDataPoints.map((obj) => Object.values(obj).map(({x, y}) => [x, y]))); // Object.values, flattened with concat console.log([].concat(...numDataPoints.map((obj) => Object.values(obj).map(({x, y}) => [x, y])))); // Object.values, flattened with flatMap console.log(numDataPoints.flatMap((obj) => Object.values(obj).map(({x, y}) => [x, y]))); // Destructuring, same structure console.log(numDataPoints.map(({x0, x1, x2}) => [x0, x1, x2].map(({x, y}) => [x, y]))); // Destructuring, flattened with concat console.log([].concat(...numDataPoints.map(({x0, x1, x2}) => [x0, x1, x2].map(({x, y}) => [x, y])))); // Destructuring, flattened with flatMap console.log(numDataPoints.flatMap(({x0, x1, x2}) => [x0, x1, x2].map(({x, y}) => [x, y]))); 

Answer 5

您可以使用Object.keys迭代对象中的键，如下所示：

 let data = [{ x0: { x: 807, y: 625 }, x1: { x: 15, y: 20 }, x2: { x: 5, y: 20 } }, { x0: { x: 11, y: 6 }, x1: { x: 16, y: 21 }, x2: { x: 7, y: 22 } }]; let result = data.map(obj => Object.keys(obj).map((key) => [obj[key].x, obj[key].y])); console.log(result); 

你可能想要压扁结果，我不确定。

Answer 6

这是因为你得到的是一个对象，而不是一个数组。 虽然你可以尝试（Es6）：

numDataPoints
.map(_ => {
  return Object.values(_)
  .map(({x, y}) => [x, y]);
}).reduce((acc, elem) => [...acc, ...elem], []);

Answer 7

问题是array是一个对象，所以你必须在使用另一个forEach之前映射键。

const numDataPoints =  [{ x0: {x: 807, y: 625}, x1: {x: 15, y: 20},x2: {x: 5, y: 20} }, { x0: {x: 11, y: 6}, x1: {x: 16, y: 21}, x2: {x:7, y: 22} }];
var foo = []
numDataPoints.forEach((points) => 
    Object.keys(points).forEach(point => 
        foo.push( [points[point].x, points[point].y] )
    )
);
console.log(foo)

Answer 8

以下是获得两种不同结果的几种不同方法（原始嵌套结构或平面结构） - 还注意到可能是用例的排序 - 字典键按照它们的声明方式排序（不是字母数字）：

 const numDataPoints = [{ x0: {x: 807, y: 625}, x1: {x: 15, y: 20}, x2: {x: 5, y: 20} }, { x0: {x: 11, y: 6}, x1: {x: 16, y: 21}, x2: {x:7, y: 22} }]; // In case you need them sorted and in the original nesting: console.log( numDataPoints .map(d => Object.keys(d).sort().map(k => [d[k].x, d[k].y])) ); // In case you need them sorted and flattened: console.log( numDataPoints .map(d => Object.keys(d).sort().map(k => [d[k].x, d[k].y])) .reduce((a,v) => { v.forEach(value => a.push(value)); return a; }, []) ); // In case you don't need them sorted and in the original nesting: console.log( numDataPoints .map(d => Object.keys(d).map(k => [d[k].x, d[k].y])) ); // In case you don't need them sorted and flattened: console.log( numDataPoints .map(d => Object.keys(d).map(k => [d[k].x, d[k].y])) .reduce((a,v) => { v.forEach(value => a.push(value)); return a; }, []) );