合并JavaScript的多维数组？
（将两个或更多的二维数组组合在一起，形成一个新的二维数组）

Question

非常感谢您的反馈。由于我的疏忽，问题描述不完整。在合并用户名的同时，还需要收集每个条目的已付金额字段。我正在重新组织代码。

这是从我的数据库获取的数据：

const array =[
{
  name: 'Iphone',
  date: '01.01.2024',
  img: 'img/iphone.png',
  cost: 2500,
  paid: 500,
  username:"Joe",
},
{
  name: 'Samsung',
  date: '01.01.2024',
  img: 'img/samsung.png',
  cost: 2000,
  paid: 200,
  username:"Adam",
},
{
  name: 'Samsung',
  date: '01.01.2024',
  img: 'img/samsung.png',
  cost: 2000,
  paid: 100,
  username:"Alvin",
}
]

根据新的要求，我希望将它们按照如下方式组合，同时需要将“Paid”字段的值进行累加。

目标数据结构如下：

const array =[
{
  name: 'Iphone',
  date: '01.01.2024',
  img: 'img/iphone.png',
  cost: 2500,
  paid: 500,
  username:"Joe",
},
{
  name: 'Samsung',
  date: '01.01.2024',
  img: 'img/samsung.png',
  cost: 2000,
  paid: 300,   // <-- 来自两个三星数组的已付金额之和
  usernames:[
    {username : "Adam"},
    {username : "Alvin"}
  ]
}
]

dbc · Answer

// 定义原始数据数组，其中每个元素代表一种产品及其相关信息，包括用户名
const data = [
  {
    name: 'Iphone',
    date: '01.01.2024',
    img: 'img/iphone.png',
    cost: 2500,
    username: 'Joe',
  },
  {
    name: 'Samsung',
    date: '01.01.2024',
    img: 'img/samsung.png',
    cost: 2000,
    username: 'Adam',
  },
  {
    name: 'Samsung',
    date: '01.01.2024',
    img: 'img/samsung.png',
    cost: 2000,
    username: 'Alvin',
  },
];

// 使用reduce函数对原始数据数组进行操作，构建一个新的处理过的数据数组
const processedData = data.reduce((accumulator, currentObject) => {

  // 在累加器数组中查找是否存在与当前对象具有相同'name'、'date'、'img'和'cost'属性的对象
  const existingItem = accumulator.find((itemInAccumulator) => 
    itemInAccumulator.name === currentObject.name &&
    itemInAccumulator.date === currentObject.date &&
    itemInAccumulator.img === currentObject.img &&
    itemInAccumulator.cost === currentObject.cost
  );

  // 如果存在相同的对象，将其对应的'usernames'数组中添加当前的'username'
  if (existingItem) {
    existingItem.usernames.push({ username: currentObject.username });
  } 
  // 否则，在累加器数组中创建一个新的对象，并将当前的'username'放入新建的'usernames'数组内
  else {
    accumulator.push({
      name: currentObject.name,
      date: currentObject.date,
      img: currentObject.img,
      cost: currentObject.cost,
      usernames: [{ username: currentObject.username }],
    });
  }

  // 返回更新后的累加器数组以便下一轮迭代
  return accumulator;

  // 初始化reduce方法的累加器为空数组
}, []);

// 处理后的processedData数组将按照产品名称、日期、图片链接和价格进行去重，
// 并将相同产品的不同用户名收集到同一个产品的'usernames'属性中

这段代码运用了 JavaScript 的 reduce 函数来遍历一个初始数组，并通过某种逻辑生成一个新的数组（resultArray）。在遍历过程中，它会检查累加器（accumulator，即 acc）中是否已经存在具有相同 'name'、'date'、'img' 和 'cost' 属性的对象。如果找到这样一个对象，那么它就会把当前项的 'username' 添加到该对象的 'usernames' 数组中。如果没有找到匹配的对象，那么它就会创建一个新的对象，并用当前项的 'username' 初始化这个新对象中的 'usernames' 数组。

Olivier Jacot-Descombes · Answer

首先，获取唯一的产品名称（此处指手机名称）。

接下来，对于每个名称，找到匹配的手机条目，并从该条目中提取所有属性到一个新的对象中。然后，将该手机名称对应的所有用户名添加到新对象中。

最后，如果某个手机有多个用户名，则删除结果数组中每个对象的 'username' 属性，确保顶层仅保留一个 'usernames' 属性（其中包含了所有用户）。相反，如果某个手机只有一个用户名，则保留单个的 'username' 属性并删除 'usernames' 属性。

// 原始数据数组，包含不同用户购买同款手机的信息
const array = [
  { "name": "Iphone", "date": "01.01.2024", "img": "img/iphone.png", "cost": 2500, "username": "Joe" },
  { "name": "Samsung", "date": "01.01.2024", "img": "img/samsung.png", "cost": 2000, "username": "Adam" },
  { "name": "Samsung", "date": "01.01.2024", "img": "img/samsung.png", "cost": 2000, "username": "Alvin" }
];

// 获取原始数组中唯一的手机名称
let names = [...new Set(array.map(item => item.name))];

// 遍历所有唯一手机名称，构建新的数组，每个元素包含基础手机信息以及对应的用户名数组
let array2 = names.map(name => ({
  ...array.find(item => item.name === name),
  usernames: array.filter(item => item.name === name)
                  .map(({
                    username // 只提取用户名
                  }) => ({ username }))
}));

// 对于新数组中的每个对象，根据其 'usernames' 数组长度决定保留哪个属性
array2.forEach(item => {
  if (item.usernames.length > 1) delete item.username;
  else delete item.usernames;
});

// 输出处理后的数组
console.log(array2);

JB Nizet · Answer

建议采用简单的数组来存储用户名。基于此，一个可能的解决方案如下所示：

const arr = [
  {
    name: 'Iphone',
    date: '01.01.2024',
    img: 'img/iphone.png',
    cost: 2500,
    paid: 500,
    username: "Joe",
  },
  {
    name: 'Samsung',
    date: '01.01.2024',
    img: 'img/samsung.png',
    cost: 2000,
    paid: 200,
    username: "Adam",
  },
  {
    name: 'Samsung',
    date: '01.01.2024',
    img: 'img/samsung.png',
    cost: 2000,
    paid: 100,
    username: "Alvin",
  }
];

const result = Object.values(arr.reduce((accumulator, current) => {
  const key = current.name + current.date + current.img + current.cost;
  if (!accumulator[key]) {
    accumulator[key] = { ...current, usernames: [] };
    delete accumulator[key].username;
  } else {
    accumulator[key].paid += current.paid;
  }
  accumulator[key].usernames.push(current.username);
  return accumulator;
}, {}));

console.log(result);

JohnnyHK · Answer

为了提高性能，可以构建一个属性值树，其叶子节点是除username以外所有字段均唯一的对象。这段代码支持任何数量的属性，并且可以将其封装成一个函数，传入数组属性名作为参数。

以下代码片段展示了一种实现方式：

const result = array.reduce(((cached, keys, lastKey) => (r, item) => {
  if(!keys){
    keys = Object.keys(item).filter(key => key !== 'username');
    lastKey = keys.pop();
  }
  let node = cached;
  for(const key of keys){
    node = node[item[key]] ??= {};
  }
  const found = node[item[lastKey]];
  if(!found){
     r[r.length] = node[item[lastKey]] = {...item};
  }else{
    if(found.usernames){
      found.usernames.push({username: item.username});
    }else{
      found.usernames = [{username: found.username}, {username: item.username}];
      delete found.username;
    }
  }
  return r;
})({}), []);

console.log(result);