使用JavaScript从对象映射复合数组

我试图创建一个simngle数组，其中包含从对象的输入数组中获取的多个值。理想情况下，我希望使用ES5功能来实现这一点

我需要变换这样的对象：

{
  image: "bat",
  count: 5
}

进入这个阵型[棒，棒，棒，棒，棒]

我认为代码是最快的解释方式：

//游戏对象状态 var gameObj={ 对象：[ { 图片：蝙蝠， 计数：5 }, { 图片：蜘蛛， 计数：4 }, { 图片：弗兰基， 计数：3 } ], 成像仪：[]， } 函数gameObjectArrayBuilderobj{ var resultar=[]； resultar=obj.mapbuildArr； 函数buildArrprop{ var image=prop.image； var count=prop.count； 而prop.count>0{ 道具计数- 返回道具图像 } } 返回结果器； } gameObj.imagesArr=gameObjectArrayBuildergameObj.objects； //查看结果 var html=document.querySelectorcontent； html.innerHTML=gameObj.imagesar； console.loggameObj.imagesar //结果应该是 //[蝙蝠，蝙蝠，蝙蝠，蝙蝠，蝙蝠，蜘蛛，蜘蛛，蜘蛛，蜘蛛，蜘蛛，弗兰基，弗兰基，弗兰基]

---

要获取重复字符串值的数组ie bat，其中数组的长度对应于提供的变量ie obj.count，可以执行以下操作：

const obj={image:bat，count:5}； const arr=Array.from{length:obj.count}，=>obj.image；

---

console.logarr 要获取重复字符串值的数组ie bat，其中数组的长度对应于提供的变量ie obj.count，可以执行以下操作：

const obj={image:bat，count:5}； const arr=Array.from{length:obj.count}，=>obj.image； console.logarr 您的示例的解决方案

//游戏对象状态 var gameObj={ 对象：[ { 图片：蝙蝠， 计数：5 }, { 图片：蜘蛛， 计数：4 }, { 图片：弗兰基， 计数：3 } ], 成像仪：[]， } 函数gameObjectArrayBuilderobj{ var resultar=[]； obj.forEachele=>{resultar.push…buildarele}； 函数buildArrprop{ var image=prop.image； var count=prop.count； var temp=[] 而prop.count>0{ 道具计数- 临时图像 } 返回温度 } 返回结果器； } gameObj.imagesArr=gameObjectArrayBuildergameObj.objects； //查看结果 var html=document.querySelectorcontent； html.innerHTML=gameObj.imagesar； console.loggameObj.imagesar //结果应该是 //[蝙蝠，蝙蝠，蝙蝠，蝙蝠，蝙蝠，蜘蛛，蜘蛛，蜘蛛，蜘蛛，蜘蛛，弗兰基，弗兰基，弗兰基] 您的示例的解决方案

//游戏对象状态 var gameObj={ 对象：[ { 图片：蝙蝠， 计数：5 }, { 图片：蜘蛛， 计数：4 }, { 图片：弗兰基， 计数：3 } ], 成像仪：[]， } 函数gameObjectArrayBuilderobj{ var resultar=[]； obj.forEachele=>{resultar.push…buildarele}； 函数buildArrprop{ var image=prop.image； var count=prop.count； var temp=[] 而prop.count>0{ 道具计数- 临时图像 } 返回温度 } 返回结果器； } gameObj.imagesArr=gameObjectArrayBuildergameObj.objects； //查看结果 var html=document.querySelectorcontent； html.innerHTML=gameObj.imagesar； console.loggameObj.imagesar //结果应该是 //[蝙蝠，蝙蝠，蝙蝠，蝙蝠，蝙蝠，蜘蛛，蜘蛛，蜘蛛，蜘蛛，蜘蛛，弗兰基，弗兰基，弗兰基]

---

您可以针对您的案例使用新阵列和方法的组合：

var gameObj={ 对象：[{ 图片：蝙蝠， 计数：5 }, { 图片：蜘蛛， 计数：4 }, { 图片：弗兰基， 计数：3 } ], 成像仪：[]， }; 函数repeatImagesacc，项，idx{ if！acc instanceof数组{ acc=[]； } 返回acc.concatnew Arrayitem.count.fillitem.image； } gameObj.imagesar=gameObj.objects.reducerepeatImages，[]；

---

console.loggameObj.imagesar 您可以针对您的案例使用新阵列和方法的组合：

var gameObj={ 对象：[{ 图片：蝙蝠， 计数：5 }, { 图片：蜘蛛， 计数：4 }, { 图片：弗兰基， 计数：3 } ], 成像仪：[]， }; 函数repeatImagesacc，项，idx{ if！acc instanceof数组{ acc=[]； } 返回acc.concatnew Arrayitem.count.fillitem.image； } gameObj.imagesar=gameObj.objects.reducerepeatImages，[]；

---

console.loggameObj.imagesar 您可以获取计数并循环此计数，只要它具有真实值

我将减少数组，而不是映射，因为结果集是一个包含项目计数的数组。在新的用户代理中，可以使用累加器，但这里需要累加器来获取所有相同的项

函数gameObjectArrayBuilderarray{ 函数生成器数组累加器，对象{ var count=object.count； 而计数-累加器.pushobject.image； 回流蓄能器； } 返回array.reducebuildArr，[]； } var gameObj={objects:[{image:bat，count:5}，{image:spider，count:4}， {图像：frankie，计数：3}]，图像器：[]}； gameObj.imagesArr=gameObjectArrayBuildergameObj.objects； var html=document.querySelectorcontent； html.innerHTML=gameObj.imagesar； console.loggameObj.imagesar

---

您可以获取计数并循环此计数，只要它具有真实值

我将减少数组，而不是映射，因为结果集是一个包含项目计数的数组。在新的用户代理中，可以使用累加器，但这里需要累加器来获取所有相同的项

函数gameObjectArrayBuilderarray{ 函数生成器数组累加器，对象{ var count=object.count； 而计数-累加器.pushobject.image； 回流蓄能器； } 返回array.reducebuildArr，[]； } var gameObj={objects:[{image:bat，count:5}，{image:spider，count:4}，{image:frankie，count:3}]，imagesar:[]}； gameObj.imagesArr=gameObjectArrayBuildergameObj.objects； var html=document.querySelectorcontent； html.innerHTML=gameObj.imagesar； console.loggameObj.imagesar 您可以使用flatMap以更少的代码生成相同的结果

//游戏对象状态 var gameObj={ 对象：[ { 图片：蝙蝠， 计数：5 }, { 图片：蜘蛛， 计数：4 }, { 图片：弗兰基， 计数：3 } ], 成像仪：[]， } 函数gameObjectArrayBuilderobj{ var resultar=obj.flatMap f=>{ return[…Arrayf.count.fillf.image] }; 返回结果器； } gameObj.imagesArr=gameObjectArrayBuildergameObj.objects； //查看结果 var html=document.querySelectorcontent； html.innerHTML=gameObj.imagesar； console.loggameObj.imagesar //结果应该是 //[蝙蝠，蝙蝠，蝙蝠，蝙蝠，蝙蝠，蜘蛛，蜘蛛，蜘蛛，蜘蛛，蜘蛛，弗兰基，弗兰基，弗兰基] 您可以使用flatMap以更少的代码生成相同的结果

//游戏对象状态 var gameObj={ 对象：[ { 图片：蝙蝠， 计数：5 }, { 图片：蜘蛛， 计数：4 }, { 图片：弗兰基， 计数：3 } ], 成像仪：[]， } 函数gameObjectArrayBuilderobj{ var resultar=obj.flatMap f=>{ return[…Arrayf.count.fillf.image] }; 返回结果器； } gameObj.imagesArr=gameObjectArrayBuildergameObj.objects； //查看结果 var html=document.querySelectorcontent； html.innerHTML=gameObj.imagesar； console.loggameObj.imagesar //结果应该是 //[蝙蝠，蝙蝠，蝙蝠，蝙蝠，蝙蝠，蜘蛛，蜘蛛，蜘蛛，蜘蛛，蜘蛛，弗兰基，弗兰基，弗兰基] 您只需使用for循环将项目添加到tmp数组，然后返回它：

//游戏对象状态 var gameObj={ 对象：[ { 图片：蝙蝠， 计数：5 }, { 图片：蜘蛛， 计数：4 }, { 图片：弗兰基， 计数：3 } ], 成像仪：[]， } 函数gameObjectArrayBuilderobj { var resultar=[]； resultar=obj.mapbuildArr； 函数buildArrprop { var image=prop.image； var count=prop.count； //使用TMP阵列 让tmpArr=[] 对于let j=0；j您可以使用for循环将项目添加到tmp数组，然后返回它：

//游戏对象状态 var gameObj={ 对象：[ { 图片：蝙蝠， 计数：5 }, { 图片：蜘蛛， 计数：4 }, { 图片：弗兰基， 计数：3 } ], 成像仪：[]， } 函数gameObjectArrayBuilderobj { var resultar=[]； resultar=obj.mapbuildArr； 函数buildArrprop { var image=prop.image； var count=prop.count； //使用TMP阵列 让tmpArr=[]

---

对于let j=0；jj，您总是在第一次迭代时返回，最好的答案是：const arr=gameObj.objects.flatMap=>Arraye.count.fille.image；您总是在第一次迭代时返回，最好的答案是：const arr=gameObj.objects.flatMap=>Arraye.count.fille.image；您不需要.map…flatMap，只是.flatMap…您不需要.map…flatMap，just.flatMap…由于OP使用ES5，您还必须为fill提供一个polyfill。为什么要在reduce迭代中检查acc instanceof Array和设置是否为空数组？由于OP使用ES5，您还必须为fill提供一个polyfill。为什么要检查acc instanceof Array和设置是否为空arr是在reduce迭代中吗？谢谢大家！我将它用于您的解决方案。将返回此线程以更好地理解map、reduce、filter和while循环。谢谢大家！我将它用于您的解决方案。将返回此线程以更好地理解map、reduce、filter和while循环。