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

Question

我有两个 arrays 如下所列。 我试图通过使用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
    }))

基本上，我正在覆盖相同的 object。

谢谢，

Answer 1

您可以使用array.map来迭代 arrays 并利用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 2

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

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

然后从map()方法的回调 function 中返回 object。

 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 3

解释

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

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);