javascript - 如何使用 Javascript 对动态数组中的项目进行分组

Question

这是一个简单的 Javascript 问题。我有两个阵列水果和篮子。篮子总是排序的。

var fruits = [''];
var basket = ["Apple", "Apple", "Banana", "Orange", "Orange", "Orange"];

我希望篮子的每个元素都像这样分组。

Apple
I have Apple
I have Apple

Banana
I have Banana

Orange
I have Orange
I have Orange
I have Orange

代码 HTML

<div id="table"></div>

代码JS

var fruits = [''];
var basket = ["Apple", "Apple", "Banana", "Orange", "Orange", "Orange"];

for (var i = 0; i < basket.length; i++) { 
  var fruit = basket[i];

  for (var j = 0; j < fruits.length; j++) {
    if (fruit == fruits[j]) {
      // Existing fruit
      $("#table").append("I have " + fruit);
      break;
    } else {
      // New fruit
      $("#table").append("<h1>" + fruit + "</h1>");
      $("#table").append("I have " + fruit);
      fruits.push(fruit);
      break;
    }
}

此代码无效。它最终看起来像这样。我该如何解决？篮子里的水果可能不同，所以这应该是动态的。

Apple
I have Apple

Apple
I have Apple

Banana
I have Banana

Orange
I have Orange

Orange
I have Orange

Orange
I have Orange

Answer 1

您可以使用数组方法 reduce() . reduce 的工作方式是将函数应用于累加器和数组中的每一项，因此本质上它的目的是将数组“缩减”为单个对象。

var arr = ["Apple", "Apple", "Banana", "Orange", "Orange", "Orange"];
var groupedElements = arr.reduce(function(groups, item) {
    groups[item] = groups[item] || 0;
    groups[item]++;
    return groups;
  }, {});

console.log(groupedElements);
//is {Apple: 2, Banana: 1, Orange: 3}

打印输出应单独处理。