如何将一个数组映射成一个给定键数组的对象数组？

Question

从一个 键数组 和一个 数组，像这样。

const keys = ['foo', 'bar'];
const vals = [
  ['a', 'A'],
  ['b', 'B']
];

如何得到一个 对象数组 像下面这样？

[
  {'foo' : 'a', 'bar' : 'A'},
  {'foo' : 'b', 'bar' : 'B'}
]

也许使用 lodash ?

Answer 1

你可以使用 loash 的 _.zipObject() 从键和值的数组中创建一个对象，在二维数组中使用 _.map() 方法。

const keys = ['foo', 'bar']
const vals = [
  ['a', 'A'],
  ['b', 'B']
];

const res = _.map(vals, arr => _.zipObject(keys, arr));
console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

如果你喜欢香草JS，那么你可以使用。Object.fromEntries() 在一个压缩的数组上（使用 .map()):

const keys = ['foo', 'bar']
const vals = [
  ['a', 'A'],
  ['b', 'B']
];

const res = vals.map(
  arr => Object.fromEntries(arr.map((v, i) => [keys[i], v]))
);
console.log(res);

Answer 2

为了更通用，你可以使用 Array.reduce() 与 index 可变的

const keys = ['foo', 'bar']
const values = [
  ['a', 'A'],
  ['b', 'B']
]

const mapped = values.map(val => val.reduce((acc, cur, i) => ({...acc, [keys[i]]: cur}),{}))

console.log(mapped)

Answer 3

使用 lodashfp，你可以使用以下方法生成函数 _.flow()咖喱 _.zipObject() 随着 keys和 _.map() 与咖喱 _.zipObject()，然后你可以用 vals 来获取对象数组。

const fn = _.flow(_.zipObject, _.map);

const keys = ['foo', 'bar']
const vals = [
  ['a', 'A'],
  ['b', 'B']
];

const result = fn(keys)(vals);
console.log(result);

<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>

Answer 4

你可以简单地用 reduce.

let keys = ['foo', 'bar'];

let values = [
  ['a', 'A'],
  ['b', 'B']
];

const res = values.reduce((a, [first, second]) => {
    return [...a, {[keys[0]]: first, [keys[1]]: second}];
}, []);

console.log(res);

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

Answer 5

let dataKeys = ['foo', 'bar'];
let dataValues = [
  ['a', 'A'],
  ['b', 'B']
];

let transformed = dataValues.reduce((result,item)=>{
  result.push(
    dataKeys.reduce((r,dk,index)=>{
      let o = {};
      o[dk]= item[index];
      return {...r, ...o}
    },{})
  )
  return result
},[]);

console.log(JSON.stringify(transformed,null,2));