对象数组查找键名并合并值

Question

我的数组如下：

array = [{
  "name": "obj0_property0",
  "url": "picture1"
}, {
  "name": "obj1_property0",
  "url": "picture1"
}, {
  "name": "obj0_property1",
  "url": "picture2"
}]

我希望在JavaScript中获得如下输出：

array[{
  "obj0": ["picture1","picture2"]
}, {
  "obj1": ["picture1"]
}]

我想查找数组键名obj0和obj1，并合并图片值。

- vicky

---

“{"obj0":"picture1","picture2"}”不是一个有效的对象。请在发布前测试你的代码。 - palaѕн

你到目前为止尝试了什么？请发布你已经编写的代码。 - Code Maniac

Answer 1

reduce 方法是转换数组的好方法。

var array = [{"name":"obj0_property0","url":"picture1"},{"name":"obj1_property0","url":"picture1"},{"name":"obj0_property1","url":"picture2"}]

var result = array.reduce((acc, {name, url}) => {
  // getting object key obj0, obj1
  const objKey = name.split(`_`)[0];
  
  // trying to find in accumulator object with same key as objKey
  const objInArray = acc.find(accitem => objKey in accitem);

  // if found
  if (objInArray) {
    // add another url
    objInArray[objKey].push(url)
  } else {
    // if not found add new object
    acc.push({[objKey]: [url]})
  }
  return acc;
}, []) // [] is initial value of accumulator

console.log(result)

// array [{"obj0":"picture1","picture2"},{"obj1":"picture1"}]

- qiAlex

---

@vicky：依赖对象键的顺序是不安全的，因为它不能保证。提取Object.keys()过于冗长且可能较慢。适当的做法是使用in运算符，就像这里所做的那样。 - Yevhen Horbunkov

Answer 2

你可以使用reduce方法并将所有的url存储在数组中：

您可以使用reduce方法并将所有url存储在数组中：

const result = Object.entries(array.reduce((a, {name, url})=> {
    let key = name.substring(0, 4);
    a[key] = a[key] || [];
    a[key].push(url);
    return a;
},{})).map(([k, v])=> ({[k]: v}));

一个例子：

let array = [
    {"name":"obj0_property0","url":"picture1"},
    {"name":"obj1_property0","url":"picture1"},
    {"name":"obj0_property1","url":"picture2"}
];

const result = Object.entries(array.reduce((a, {name, url})=> {
    let key = name.substring(0, 4);
    a[key] = a[key] || [];
    a[key].push(url);
    return a;
},{})).map(([k, v])=> ({[k]: v}));
console.log(result);

- StepUp

---

我可能表达不够清楚，所以我会再试一次：重点是 - 如果源数组很小（比如，OP发布的那个），那么在reduce()嵌套到Object.entries()中并且链接到map()中过于繁琐，但如果源数组足够大，那么这种方法肯定会有好处。 - Yevhen Horbunkov

@YevgenGorbunkov 好的，我明白了。谢谢你的澄清。太棒了！:) - StepUp

Answer 3

简单的 Array.prototype.reduce() 可以轻松地重新组合你的源数组:

const array = [{"name":"obj0_property0","url":"picture1"},{"name":"obj1_property0","url":"picture1"},{"name":"obj0_property1","url":"picture2"}],
      result = array.reduce((r,{name,url}) => {
        const [key] = name.split('_'),
              match = r.find(item => key in item)
        match ? match[key].push(url) : r.push({[key]:[url]})
        return r
      },[])

console.log(result)

.as-console-wrapper {min-height:100%;}

- Yevhen Horbunkov