如何通过使用另一个对象数组的键和数组数组中的值来构造对象数组？

Question

我有两个数组，如下所示。我正在尝试使用 array_1 中的 field 键和 array_2 中的值来创建一个新的对象数组。

const result = []
array_1 = [{ name: "Color" , field: "color"}, {name: "Shape", field: "shape" }, { name: "Whatever", field: "whatever" }]

array_2 = [["green", "rectangular", "whatever1"], ["yellow", "circle", "whatever2"]]

结果应该是：

console.log(result)
// [{color:"green", shape:"rectangular", whatever: "whatever1"}, 
//  { color:"yellow", shape: "circle", whatever:"whatever2"}]

我在最后的审判中这样做了：

const rowObj = {}
const result = array.map((subarray) => subarray.map((cell, index) => {
      console.log(cell,index)
      rowObj[columns[index].field] = cell
      return rowObj
    }))

基本上，我正在覆盖同一个对象。

谢谢，

Answer 1

一种方法是在array_2 上使用map() 并在每次迭代中：

1. 创建一个新对象
2. 遍历array_1 以填充新创建的对象。您可以使用forEach()方法的回调函数的index参数从array_1内部的对象中获取field属性。

然后从map() 方法的回调函数中返回该对象。

const array_1 = [
  { name: 'Color', field: 'color' },
  { name: 'Shape', field: 'shape' },
  { name: 'Whatever', field: 'whatever' },
];

const array_2 = [
  ['green', 'rectangular', 'whatever1'],
  ['yellow', 'circle', 'whatever2'],
];

const result = array_2.map(arr => {
  const o = {};

  arr.forEach((str, idx) => {
    o[array_1[idx].field] = str;
  });
  
  return o;
}); 

console.log(result);

Answer 2

您可以使用array.map 来迭代两个数组，并利用Object.fromEntries 根据数组元素的顺序构建新对象：

array_1 = [{ name: "Color" , field: "color"}, {name: "Shape", field: "shape" }, { name: "Whatever", field: "whatever" }]

array_2 = [["green", "rectangular", "whatever1"], ["yellow", "circle", "whatever2"]]

let result = array_2.map(
      x => Object.fromEntries(
        array_1.map((y,i) => ([y.field, x[i]]))))

console.log(result);

Answer 3

说明

您可以创建一个函数，该函数根据对象字段的描述创建构造函数，如下所示：

function createConstructor(fieldsDescriptor) {
  return function(fields) {
    fieldsDescriptor.forEach((descriptor, index) => {
      this[descriptor.field] = fields[index]
    })
  }
}

然后，例如，您可以创建一个基于 array_1 的字段名称创建对象的 sampleConstructor：

const SampleConstructor = createConstructor(array_1)

然后，对于 array_2 中的每个条目，您可以应用您的 SampleConstructor：

const result = array_2.map(fields => new SampleConstructor(fields))

动机

创建一个专用的构造函数可以为您的应用添加一些清晰的语义，向读者展示您在做什么，并在运行时将构造函数信息存储在创建的对象中。

当您以后想知道哪个构造函数生成了哪些对象时，您只需调用object.constructor 并使用此信息来确定它们是什么类型的对象。

例如调用 result[0].constructor == SampleConstructor 将是真的，因为 SampleConstructor 是创建第一个结果的构造函数。

演示

这是一个完整的演示

const array_1 = [{ name: "Color" , field: "color"}, {name: "Shape", field: "shape" }, { name: "Whatever", field: "whatever" }]
const array_2 = [["green", "rectangular", "whatever1"], ["yellow", "circle", "whatever2"]]

function createConstructor(fieldsDescriptor) {
  return function(fields) {
    fieldsDescriptor.forEach((descriptor, index) => {
      this[descriptor.field] = fields[index]
    })
  }
}

const SampleConstructor = createConstructor(array_1)
const results = array_2.map(fields => new SampleConstructor(fields))
console.log(results)

const EmptyConstructor = createConstructor([])
console.log(results[0].constructor == SampleConstructor)
console.log(results[0].constructor == EmptyConstructor)

Answer 4

你可以试试这个

array_1 = [
      { name: 'Color', field: 'color' },
      { name: 'Shape', field: 'shape' },
      { name: 'Whatever', field: 'whatever' }
    ];
    
    array_2 = [
      ['green', 'rectangular', 'whatever1'],
      ['yellow', 'circle', 'whatever2']
    ];
    
    const keys = array_1.map(item => item.field);
    
    const output = [];
    array_2.forEach(item => {
      const temp = {};
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i];
        const value = item[i];
        temp[key] = value;
      }
      output.push(temp);
    });
    
    console.log(output);