根据属性将对象数组分解为单独的数组

x7rlezfr  于 2022-09-21  发布在  jQuery
关注(0)|答案(9)|浏览(165)

假设我有一个这样的数组:

var arr = [
    {type:"orange", title:"First"},
    {type:"orange", title:"Second"},
    {type:"banana", title:"Third"},
    {type:"banana", title:"Fourth"}
];

我希望将其拆分成数组,这些数组具有相同类型的对象,因此:

[{type:"orange", title:"First"},
{type:"orange", title:"Second"}]

[{type:"banana", title:"Third"},
{type:"banana", title:"Fourth"}]

但我想笼统地这样做,这样就不会有指定橙色或香蕉的if语句

// not like this
for (prop in arr){
    if (arr[prop] === "banana"){
       //add to new array
    }
}

有什么想法吗?JQuery和下划线都是可以使用的选项。

n6lpvg4x

n6lpvg4x1#

对于Array.reduce(...)来说,这是一项简单的工作:

function groupBy(arr, property) {
  return arr.reduce(function(memo, x) {
    if (!memo[x[property]]) { memo[x[property]] = []; }
    memo[x[property]].push(x);
    return memo;
  }, {});
}

var o = groupBy(arr, 'type'); // => {orange:[...], banana:[...]}
o.orange; // => [{"type":"orange","title":"First"},{"type":"orange","title":"Second"}]
o.banana; // => [{"type":"banana","title":"Third"},{"type":"banana","title":"Fourth"}]

当然,如果您的目标浏览器不支持ECMASSCRIPT 262第5版,那么您将不得不自己实现“Reduce”,或者使用多边形填充库,或者选择其他答案。

**[更新]**以下是一个适用于任何版本的JavaScript的解决方案:

function groupBy2(xs, prop) {
  var grouped = {};
  for (var i=0; i<xs.length; i++) {
    var p = xs[i][prop];
    if (!grouped[p]) { grouped[p] = []; }
    grouped[p].push(xs[i]);
  }
  return grouped;
}
6za6bjd0

6za6bjd02#

JQuery和下划线都是可以使用的选项。

下划线的groupBy完全符合您的需要。

_.groupBy(arr, "type")
sd2nnvve

sd2nnvve3#

这里假设有一个对象数组:

function groupBy(array, property) {
    var hash = {};
    for (var i = 0; i < array.length; i++) {
        if (!hash[array[i][property]]) hash[array[i][property]] = [];
        hash[array[i][property]].push(array[i]);
    }
    return hash;
}

groupBy(arr,'type')  // Object {orange: Array[2], banana: Array[2]}
groupBy(arr,'title') // Object {First: Array[1], Second: Array[1], Third: Array[1], Fourth: Array[1]}
slwdgvem

slwdgvem4#

ES6解决方案:

function groupBy(arr, property) {
  return arr.reduce((acc, cur) => {
    acc[cur[property]] = [...acc[cur[property]] || [], cur];
    return acc;
  }, {});
}

或完全ES6fy:

const groupBy = (arr, property) => {
    return arr.reduce((acc, cur) => {
      acc[cur[property]] = [...acc[cur[property]] || [], cur];
      return acc;
    }, {});
}

我希望它能帮上忙!

23c0lvtd

23c0lvtd5#

只需构建一个词典,根据对象的标题保存这些对象。您可以这样做:

JS

var arr = [
{type:"orange", title:"First"},
 {type:"orange", title:"Second"},
 {type:"banana", title:"Third"},
 {type:"banana", title:"Fourth"}
];
var sorted = {};
for( var i = 0, max = arr.length; i < max ; i++ ){
 if( sorted[arr[i].type] == undefined ){
  sorted[arr[i].type] = [];
 }
 sorted[arr[i].type].push(arr[i]);
}
console.log(sorted["orange"]);
console.log(sorted["banana"]);

Jsfiddle演示:http://jsfiddle.net/YJnM6/

mfpqipee

mfpqipee6#

打字稿版本。

/**

* Group object array by property

 * Example, groupBy(array, ( x: Props ) => x.id );
 * @param array
 * @param property
 */
export const groupBy = <T>(array: Array<T>, property: (x: T) => string): { [key: string]: Array<T> } =>
  array.reduce((memo: { [key: string]: Array<T> }, x: T) => {
    if (!memo[property(x)]) {
      memo[property(x)] = [];
    }
    memo[property(x)].push(x);
    return memo;
  }, {});

export default groupBy;
k7fdbhmy

k7fdbhmy7#

对于一个示例,如果我们不想提到类型,那么我们可以这样实现

var arr = [
    {type:"orange", title:"First"},
    {type:"orange", title:"Second"},
    {type:"banana", title:"Third"},
    {type:"banana", title:"Fourth"}
];

const fun = (ar)=>{
  let temp ={}
for(e of ar){
  !temp[e.type] ? temp[e.type]=[e] : temp[e.type].push(e)
}
  return temp
}
console.log(fun(arr))
uyto3xhc

uyto3xhc8#

您还可以使用https://lodash.com/docs/4.17.15#groupBy

它会满足你的目的

vaqhlq81

vaqhlq819#

对@Watchaker的回答稍作调整,以返回数组而不是对象。

function groupBy(arr, key) {
  return arr.reduce((acc, cur) => {
    acc[cur[key]] = [...acc[cur[key]] || [], cur];
    return acc;
  }, []).filter(Boolean);
}

相关问题