如何将对象数组中的列值合并为字符串值在 JavaScript 中的单个对象

Question

我有一个不止一行的数组（可能会有所不同），如下所示。

const myArray = [{
    name: 'user 100', name2: 'user200', name3: 'user300',
}, {
    name: 'user 101', name2: 'user201', name3: 'user301',
}, {
    name: 'user 102', name2: 'user202', name3: 'user302',
}];

我想 combine/merge 1 中的所有这些行，如下所示：

{
    name: 'user 100 user 101 user 102',
    name2: 'user200 user 201 user 203',
    name3: 'user300 user 301 user 303',
}

Answer 1

您可以使用 Array.prototype.forEach() and Object.entries():

const arr = [{
  name: 'user 100', name2: 'user200', name3: 'user300',
}, {
  name: 'user 101', name2: 'user201', name3: 'user301',
}, {
  name: 'user 102', name2: 'user202', name3: 'user302',
}];

const result = {};

arr.forEach((item, index) => {
  Object.entries(item).map(([key, value]) => {
    result[key] = `${ (result[key] || '')  } ${ value }`;
  });
});

console.log(result);

同样可以使用 Array.prototype.reduce() 而不是 Array.prototype.forEach():

const arr = [{
  name: 'user 100', name2: 'user200', name3: 'user300',
}, {
  name: 'user 101', name2: 'user201', name3: 'user301',
}, {
  name: 'user 102', name2: 'user202', name3: 'user302',
}];

const combined = arr.reduce((result, item) => {
  Object.entries(item).map(([key, value]) => {
    result[key] = `${ (result[key] || '')  } ${ value }`;
  });
  
  return result;
}, {});

console.log(combined);

Answer 2

这看起来是 reduce 的一个好例子，它会遍历数组中的每个元素，让您跟踪所有元素的属性。

prev 以您在第二个参数中提供的内容开始（在我们的例子中是 {}）

next 是您数组中的一项，从第 0 位开始

使用Object.keys 遍历数组元素中的每个属性，将它们添加到最初的空白对象并传递给它。

prev 开始为空，但在第一个循环之后它拥有元素 1 的所有属性，第二个循环它拥有元素 1 + 元素 2，等等，直到它完成循环。

let myArray = [ {name: 'user 100', name2: 'user200', name3: 'user300'},{name: 'user 101', name2: 'user201', name3: 'user301'}, {name: 'user 102', name2: 'user202', name3: 'user302'} ];

let combined = myArray.reduce((prev, next) => {
  Object.keys(next).forEach(key => {
    prev[key] = (prev[key] ? prev[key] + ' ' : '') + next[key];
  });
  return prev;
}, {})
    
console.log(combined);

如何将对象数组中的列值合并为字符串值在 JavaScript 中的单个对象

How to combine column values from an array of objects to a single object with string values in JavaScript

javascript

arrays

algorithm

reduce

object