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

下面是一个简单的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

---

如果对数组进行了排序，那么在第一次遇到新组时，可以很容易地将最后一个“groupName”保存在一边并打印出来。 如果未排序，请在此之前调用

.sort

var basket=[“苹果”、“苹果”、“橙色”、“橙色”、“橙色”、“香蕉”]；
设lastGroup=''；
对于（变量i=0；i

div{
空白：预处理；
}

---

如果将水果更改为计数对象，则可以执行以下操作

var水果={}；
var basket=[“苹果”、“苹果”、“香蕉”、“橙色”、“橙色”、“橙色”]；
美元。每只（篮子，（u，水果）=>水果中的水果？水果[水果]+：水果[水果]=1）；
美元每种（水果，（k，v）=>{
$（“#表”）。追加（“+k+”）；
$.each（数组（v）.fill（0），（）=>$（“#表”）.append（“I have”+k+”
”）；
});
如何，只需更改console.log行以附加html：

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

for (var i = 0; i < basket.length; i++) { 
  if (basket[i] == basket[i-1]) {
    continue;
  }  
  console.log(basket[i])

  j = i;
  while (basket[i] === basket[j]) {
    console.log(`I have ${basket[i]}`);
    j++;
  }
}

var basket=[“苹果”、“苹果”、“橙色”、“橙色”、“橙色”、“香蕉”]；
对于（var i=0；i
我认为解决这个问题的方法之一是从篮子数组中创建一个对象。对象可以将水果名称作为键，将水果编号作为值

然后在

中使用for..将结果追加到表中

var fruits=['']；
var basket=[“苹果”、“苹果”、“香蕉”、“橙色”、“橙色”、“橙色”]；
变量fruitObject={}
篮子。forEach（功能（项目）{
if（fruitObject.hasOwnProperty（项））{
水果对象[项目]=水果对象[项目]+1
}否则{
子对象[项]=1；
}
})
for（对象中的变量键）{
$（“#表”）.append（“+keys+”）；
对于（var i=0；i）；
}
}

---

也许您需要使用

if（fruits.indexOf（fruit）！==-1）

而不是for循环来检查数组中是否存在水果：

var fruits=['']；
var basket=[“苹果”、“苹果”、“香蕉”、“橙色”、“橙色”、“橙色”]；
（我在篮子里）{
var水果=篮子[i]；
如果（水果指数）（水果）！=-1）{
//现存果实
$（“#表”）。追加（“我有”+水果）；
}否则{
//新水果
$（“#表”）。追加（“+水果+”）；
$（“#表”）。追加（“我有”+水果）；
水果。推（水果）；
}
}

您的代码有问题：

当您进入内部循环时，问题就会发生。该循环不进行搜索，它只是将数组的第一个元素

fruits

与

basket

数组中当前的

fruit

进行比较。由于

if

和

else

中都存在

break

语句，循环只在第一个元素上迭代并终止。因此，循环是无用的，您的代码等于：

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

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

---

您可以使用数组方法。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}

---

打印输出应该单独处理。

不要在循环中将标记附加到DOM中（除非不可避免）。首先构建整个标记，然后立即添加它

var basket=[“橙色”、“苹果”、“橙色”、“苹果”、“香蕉”、“橙色”]；
//首先生成标记。。。
var标记=篮子
//不要改变原始数组
.slice（）.sort（）
//为已排序篮子中的每个项目生成标记
.map（函数（水果、索引、数组）{
//检查它是否是一个新的组
var title=（！index | | fruit！==数组[index-1]）？
“+水果+”\n”：
"";
//只是为了好玩
var article=/^[aeiou]/i.test（水果）？“an”：“a”；
//返回此行的整个标记
返回标题+“我有”+文章+“+水果+”\n；
})
.join（“”）
//... 然后立即附加整个标记
$（“#表”）。附加（标记）
#表{
空白：预处理；
}
我在您的代码中看到两个错误：

第一个是：
var-fruits=[''您创建了第一个元素为空字符串的数组。在for（var j=0；j中，您总是将篮子中的水果与空字符串进行比较（并认为它是新水果），然后从循环中中断

当你打破时，篮子里的下一个水果会再次与空串相比较（再次被认为是新的）。您永远无法将篮子中的水果与超过索引0的水果数组中的任何元素进行比较

在索引0处有空字符串

如果您更改
var fruits=[''”至
var=[]这个东西不会再工作了，因为在其中显示结果的for循环永远不会运行

无论如何，console.log是你的朋友。如果你把这条线

console.log('fruit=' + fruit, 'j=' + j, 'fruits[j]=' + fruits[j]);
console.log('fruits=', fruits);

就在（var j=0；j之后{
一切都将变得清晰：

fruit=Apple j=0 fruits[j]=  
fruits= Array [ "" ]  
fruit=Apple j=0 fruits[j]=  
fruits= Array [ "", "Apple" ]  
fruit=Banana j=0 fruits[j]=  
fruits= Array [ "", "Apple", "Apple" ]  
fruit=Orange j=0 fruits[j]=  
fruits= Array [ "", "Apple", "Apple", "Banana" ]  
fruit=Orange j=0 fruits[j]=  
fruits= Array [ "", "Apple", "Apple", "Banana", "Orange" ]  
fruit=Orange j=0 fruits[j]=  
fruits= Array [ "", "Apple", "Apple", "Banana", "Orange", "Orange" ]

我不会发布正确的代码，因为许多其他人已经发布了工作版本。
所以我猜
篮子
并不总是排序的？总是排序的sorted@adeneo它可以是var basket=[“苹果”、“苹果”、“香蕉”、“龙果”]；那么，你能用字典来代替吗？水果是由拥有水果的人的数组组成的吗？“{Orange:[]，…}@axlj篮子是动态的，所以每次包含不同的水果时都可能不同这是第一个答案和答案
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}

console.log('fruit=' + fruit, 'j=' + j, 'fruits[j]=' + fruits[j]);
console.log('fruits=', fruits);

fruit=Apple j=0 fruits[j]=  
fruits= Array [ "" ]  
fruit=Apple j=0 fruits[j]=  
fruits= Array [ "", "Apple" ]  
fruit=Banana j=0 fruits[j]=  
fruits= Array [ "", "Apple", "Apple" ]  
fruit=Orange j=0 fruits[j]=  
fruits= Array [ "", "Apple", "Apple", "Banana" ]  
fruit=Orange j=0 fruits[j]=  
fruits= Array [ "", "Apple", "Apple", "Banana", "Orange" ]  
fruit=Orange j=0 fruits[j]=  
fruits= Array [ "", "Apple", "Apple", "Banana", "Orange", "Orange" ]