Javascript JS根据键值拼接数组值

下面的代码由三个不同的数组组成

红色水果、绿色水果和建议水果

我可以通过单击值将单个数组值从

建议水果

拼接并推送到

绿色水果

，反之亦然。但是现在我尝试做一些不同的事情，使用我新的

多维数组：fruits

拼接

suggestFruits

数组并将其值推送到我的

红色

和

绿色

水果数组，具体取决于

类型

，例如

类型：1

转到

红色水果

表格并

type:2

转到

绿色水果表

有什么简单的方法可以做到这一点吗？任何帮助都将不胜感激

var red={}；
var green={}；
var random={}；
风险值=[]；
变量fruits1={[“fruit”]：“Apple”，[“type”]：“1”}
var FROUTS2={[“水果”]：“番茄”，[“类型”]：“1”}
变量fruits3={[“fruit”]：“leme”，[“type”]：“2”}
var FROUTS4={[“水果”]：“番石榴”，[“类型”]：“2”}
水果。推（水果1、水果2、水果3、水果4）；
原木（水果）；
var suggestFruits=fruits.filter（x=>x.fruit）.map（x=>x.fruit）；
console.log（suggestFruits）；
var key=“红色水果”；
红色[钥匙]=[苹果'，'樱桃'，'草莓'，'石榴'，'蓝莓']；
var key2=“绿色水果”；
绿色[key2]=“西瓜”、“榴莲”、“鳄梨”、“酸橙”、“蜜露”；
var key3=“随机果实”；
随机[key3]=建议的结果；
函数重画（）{
var redString=''；
$.each（红色[键]、函数（索引）{
红色字符串+=（“”+红色[键][索引]+“”）；
});
$（'.redclass'）.html（redString）；
var greenString=''；
$.each（绿色[key2]，函数（索引）{
绿色字符串+=（''+绿色[key2][index]+''）；
});
$（'.greenclass'）.html（绿色字符串）；
var randomString=''；
$.each（随机[key3]，函数（索引）{
randomString+=（''+随机[key3][index]+''）；
});
$（'.randomclass'）.html（随机字符串）；
}
函数侦听器（）{
$（文档）.ready（函数（）{
$（文档）。在（“单击”，“随机ID div”，函数（）上）{
data=this.innerHTML；
k1=Object.keys（random）.find（k=>random[k].indexOf（data）>=0）
索引=随机[k1].indexOf（数据）；
随机[k1]。拼接（索引，1）；
绿色[key2]。推送（数据）；
$（“.total\u count\u Green\u Fruits”）.html（键2+：“+Green[key2].length）；
var元素=$（this.detach（）；
$（'#greenid'）.append（''+element.html（）+''）；
});
});
$（'body'）。在（'click'，'div.new-green-fruit'，function（）上{
data2=this.innerHTML；
console.log（data2）；
k2=Object.keys（绿色）.find（k=>green[k].indexOf（data2）>=0）
index2=绿色[k2].indexOf（数据2）；
绿色[k2]。拼接（index2，1）；
随机[key3]。推送（数据2）；
$（this.detach（）；
var element2=$（this.detach（）；
$（'#randomid'）.append（''+element2.html（）+''）；
});
}
重画（）；
监听器（）
.pilldiv{
填充：8px 15px；
文本对齐：居中；
字体大小：15px；
边界半径：25px；
颜色：黑色；
保证金：2倍；
}
雷德派尔先生{
背景颜色：粉红色；
游标：默认值；
}
格林皮尔先生{
背景色：春绿；
游标：默认值；
}
.随机药丸{
背景颜色：浅蓝色；
光标：指针；
}
.类{
字体系列：开放式SAN；
}
.中心{
显示器：flex；
证明内容：中心；
}
.包装盒{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.顶{
边际下限：20px
}
h3{
字体大小：正常；
}
.小组{
显示：表格；
身高：100%；
宽度：60%；
背景色：白色；
边框：1px纯黑；
左边距：自动；
右边距：自动；
}
.新的绿色水果{
背景颜色：浅蓝色；
光标：指针；
}
.顶{
边缘底部：30px；
}

红果
绿色水果
建议的水果
这个问题有很多问题，但从我收集的信息来看，您只是试图将
类型===“1”
的水果名称推送到红色水果数组，将
类型==“2”
推送到绿色水果数组

将
suggestedFruits
拆分为红色和绿色类别的主要问题是，当您创建
suggestedFruits
数组时，会丢失
类型
信息。不过，您可以做的是，您可以回顾原始的
fruits
数组以获取信息

以下是您可以实现这一目标的方法：


var=[
{水果：“苹果”，类型：“1”}，
{水果：“番茄”，类型：“1”}，
{水果：“莱姆”，类型：“2”}，
{水果：“番石榴”，类型：“2”}，
];
//映射，以便我们知道如何将fruit.type映射到正确的fructypes数组中
var-fruitTypeMap={“1”：“红色水果”，“2”：“绿色水果”}
//一个容器用于所有水果类型，因此我们可以动态访问
变种果实类型={
“红色水果”：[‘苹果’、‘樱桃’、‘草莓’、‘石榴’、‘蓝莓’]，
“绿色水果”：[‘西瓜’、‘榴莲’、‘鳄梨’、‘酸橙’、‘蜜露’]，
“随机水果”：Fruits.map（水果=>fruit.fruit）
};
//克隆元素，轻松制作水果丸
var clonePill=$（“.clone”）；
//初始化红色/绿色/随机药片
Object.key（水果类型）.forEach（key=>{
水果类型[key].forEach（水果=>{
var$newFruit=clonePill.clone（）；
//删除克隆类，使其可见且不会重新克隆
$newFruit.removeClass（“克隆”）；
//设置文本
$newFruit.text（水果）；
//附加到DOM中的正确列表
$（`[data fruits=“${key}”]`）.append（$newFruit）；
});
});
//用于来回移动水果的处理器
功能（e）{
//从父容器上的data fruits属性获取类别
var fruitCategory=$（this.parent（）.data（“fruits”）；
var fullname=$（this.text（）；