将对象展开到表格中

Question

我正在寻找一种简单（希望简洁）的方法来转换这种形式的对象：

const object = {
    key1: [a, b],
    key2: [x, y, z]
};

到这里：

[key1, a, key1, b, key2, x, key2, y, key2, z]

到目前为止，我所拥有的是：

const table = Object.entries(object).map(entry => [entry[0], ...entry[1]]);

这给了我这个：

[key1, a, b, key2, x, y, z]

我该如何前进？

Answer 1

最简洁、干净和优雅的方法是将 Object.entries() 和 flat() 与作为参数发送到 flat 方法的度数结合起来。

注意：flat()- 作用于数组并将数组展平到参数中发送的程度。它返回一个新的展平数组。例如：

let arr = [1, 2, [3]];
let arrDegree1 = arr.flat();
console.log(arrDegree1) //[1,2,3];

let arr2 = [1, 2, [[3]]]
let arrDegreeTwo = arr2.flat(2);
console.log(arrDegreeTwo) //[1,2,3];

因此解决方案是：

const o = {
  key1: ['a', 'b'],
  key2: ['x', 'y', 'z']
};

const result = Object.entries(o).reduce((acc,[key, values])=>{
  return [...acc, (values.map(v=> [key,...v])) ];
},[]).flat(2);

console.log("Result",result);

Answer 2

方法一，使用Object.entries、map和flat
方法二，使用Object.entries、forEach和push

const object = {
  key1: ["a", "b"],
  key2: ["x", "y", "z"],
};

// Method 1, Using Object.entries, map and flat
const res = Object.entries(object)
  .map(([key, arr]) => arr.map((value) => [key, value]))
  .flat(2);

// Method 2, Using Object.entries, forEach and push
const toArr = (obj) => {
  const res = [];
  Object.entries(object).forEach(([key, arr]) =>
    arr.forEach((value) => res.push(key, value))
  );
  return res;
};

console.log(res)
console.log(toArr(object));

Answer 3

在旧的 Node 版本上，您可以使用 Array#concat 和扩展语法 [].concat(...array) 来展平数组，使用与 other answers 相同的整体方法：

const object = {
  key1: [1, 2],
  key2: [3, 4, 5]
};

const result = [].concat(
  ...Object.entries(object)
    .map(([k, v]) => 
      [].concat(...v.map(e => [k, e]))
    )
);
console.log(result);

如果你经常把东西弄平，你可以把它变成一个函数，然后把它埋在你的实用程序文件中，这样它读起来会更干净一些：

const flat = a => [].concat(...a);
const flatMap = (a, fn) => flat(a.map(fn));

const object = {
  key1: [1, 2],
  key2: [3, 4, 5]
};

const result = flatMap(
  Object.entries(object),
  ([k, v]) => flatMap(v, e => [k, e])
);
console.log(result);

Answer 4

使用 map 和 flat() 可以达到效果

const object = {
    key1: ['a', 'b'],
    key2: ['x', 'y', 'z']
};


Object.keys(object).map((e, i )=> { 
    return Object.values(object[e]).map( v => { return [e, v]}).flat()
}).flat()
// ["key1", "a", "key1", "b", "key2", "x", "key2", "y", "key2", "z"]

Answer 5

您可以使用 Object.entries() 获取对象的条目并使用双重嵌套的 .flatMap() 一个映射条目，另一个用于将实际值数组映射为 [key, value] 对，如下所示：

const object = {
  key1: ['a', 'b'],
  key2: ['x', 'y', 'z']
};
const res = Object.entries(object).flatMap(([k, vals]) => vals.flatMap(v => [k, v]));
console.log(res);

如果没有 flatMap，您可以使用 .concat() 和 .reduce() 以及 spread syntax (...)：

const object = {
  key1: ['a', 'b'],
  key2: ['x', 'y', 'z']
};
const res = Object.entries(object).reduce(
  (acc, [key, vals]) => acc.concat(...vals.map(v => [key, v])), []);
console.log(res);

Answer 6

您可以在对象条目上使用Array.reduce，将键/值对推送到值中每个条目的累加器：

const object = {
  key1: ['a', 'b'],
  key2: ['x', 'y', 'z']
};

const result = Object.entries(object)
  .reduce((c, [k, a]) => {
    a.forEach(v =>
      c.push(k, v)
    );
    return c;
  }, []);

console.log(result);

Answer 7

您可以轻松地做到这一点，而无需使用 flat() 方法。您可以使用 reduce 和 forEach 来实现这一点。

obj = {'key1': [1,2,3], 'key2': [4,5,6]};

ret = Object.keys(obj).reduce((prev, curr) => {
    obj[curr].forEach(item => { prev = [...prev, curr, item]; });
    return prev;
}, []);
console.log(ret);