js/lodash 根据对象属性划分数组答案

【问题标题】：js/lodash divide array basing on object propertyjs/lodash 根据对象属性划分数组
【发布时间】：2017-04-11 09:20:54
【问题描述】：

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

[
  { product: '...', price: 12 },
  { product: '...', price: 12 },
  { product: '...', price: 14 },
  { product: '...', price: 12 }
]

我想按价格对这个数组进行分组，并使用 lodash 的 groupBy 我会得到以下结果：

[
  12: [
        { product: '...', price: 12 },
        { product: '...', price: 12 },
        { product: '...', price: 12 }
      ],
  14: [
        { product: '...', price: 14 }
      ]
]

很好，但我想要一个包含三个数组的数组，因为我想保存某种与起始数组相同的顺序。我想要这个结果：

[
  [
    { product: '...', price: 12 },
    { product: '...', price: 12 }
  ],
  [
    { product: '...', price: 14 }
  ],
  [
    { product: '...', price: 12 }
  ]
]

有这个功能吗？

【问题讨论】：

第一个和最后一个产品数组有什么区别？
到目前为止您尝试过什么？您可以将您使用过的代码添加到问题中吗？
问题比较复杂。我需要有这样的结果。我作为示例展示的数组比我需要处理的数组简单得多。我尝试了很多东西，比如分组、过滤等。
您只是在寻找 lodash 解决方案，还是简单的 vanila js 解决方案也可以？
我重复 Sebastian Sebald 的问题：第一个和最后一个产品数组有什么区别？其他一些属性是不同的，或者只是将结果分成 2 个元素？

标签： javascript arrays lodash

【解决方案1】：

你可以用 lodash 做这样的事情 -

var count = 0;
console.log(
_.values(_.groupBy(_.map(myArray, (item, index) => {
        if(index == 0) return _.merge(item, { group : 0});;
        if( myArray[index-1].price == item.price )
            return _.merge(item, { group : count});
        return  _.merge(item, { group : ++count});
        }
    ), 'group'))
);

在这里试试 - lodash-group-consequtive

【讨论】：

【解决方案2】：

使用纯 js，您可以使用 forEach() 循环执行此操作，并将最后一个价格保存在变量中以检查最后插入的元素是否与当前元素的价格相同。

var data = [
  { product: '...', price: 12 },
  { product: '...', price: 12 },
  { product: '...', price: 14 },
  { product: '...', price: 12 }
]

var result = [], last = null
data.forEach(function(e, i) {
  if(!this[e.price]) {
    this[e.price] = [e];
    result.push(this[e.price])
  } else {
    this[e.price].push(e)
  }
  if(last != e.price && i != 0) delete this[last]
  last = e.price
}, {})

console.log(result)

【讨论】：

【解决方案3】：

您可以检查最后插入的数组并用实际价格测试第一个项目。如果匹配，则推送到最后一个数组，否则推送一个新数组到结果集。

var data = [{ product: '...', price: 12 }, { product: '...', price: 12 }, { product: '...', price: 14 }, { product: '...', price: 12 }],
    result = data.reduce(function (r, a) {
        var last = r[r.length - 1] || [{}];
        if (last[0].price === a.price) {
            last.push(a);
        } else {
            r.push([a]);
        }
        return r;
    }, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

【解决方案4】：

也许这段代码对你有帮助：

var myArray = [
  { product: '...', price: 12 },
  { product: '...', price: 12 },
  { product: '...', price: 14 },
  { product: '...', price: 12 }
]

var newArray = _.map(_.keyBy(myArray, "price"))

console.log(newArray)

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：