Javascript 在展平包含的对象数组的同时将对象项转换为数组的较短方法?(改进我的解决方案)

Javascript 在展平包含的对象数组的同时将对象项转换为数组的较短方法?(改进我的解决方案),javascript,ecmascript-6,Javascript,Ecmascript 6,我有一个这样的物体: export default { characters: { hero: { h: 1 }, boundaries: { b: 1 }, zombies: [{ z: 1 }, { z: 2 }, { z: 3 }], bullets: [{ b: 1 }, { b: 2 }, { b: 3 }], }, }; 我需要从中创建一个数组,看起来像这样,但顺序并不重要: [ { h: 1 }, { b: 1 }, { z: 1 },

我有一个这样的物体:

export default {
  characters: {
    hero: { h: 1 },

    boundaries: { b: 1 },

    zombies: [{ z: 1 }, { z: 2 }, { z: 3 }],
    bullets: [{ b: 1 }, { b: 2 }, { b: 3 }],
  },
};
我需要从中创建一个数组,看起来像这样,但顺序并不重要:

[ { h: 1 }, { b: 1 }, { z: 1 }, { z: 2 }, { z: 3 }, { b: 1 }, { b: 2 }, { b: 3 } ]
我目前的解决方案是可行的,但它似乎可以改进,变得更加雄辩,使用更少的代码行

import gameState from './modules/gameState.js';
let toRender = [];

Object.keys(gameState.characters).forEach(e => {
  if (Array.isArray(gameState.characters[e])) {
    toRender.push(...gameState.characters[e]);
  } else {
    toRender.push(gameState.characters[e]);
  }
});

renderScreen(toRender);

function renderScreen(theArgs) {
  theArgs.forEach(character => {
    character.draw();
  });
}

您可以使用
Object.values
上的
reduce
concat

const data={字符:{hero:{h:1},边界:{b:1},僵尸:[{z:1},{z:2},{z:3}],子弹:[{b:1},{b:2},{b:3},},};
const result=Object.values(data.characters).reduce((r,e)=>r.concat(e),[]);

console.log(result)
您可以在
对象的
值上使用
reduce
concat

const data={字符:{hero:{h:1},边界:{b:1},僵尸:[{z:1},{z:2},{z:3}],子弹:[{b:1},{b:2},{b:3},},};
const result=Object.values(data.characters).reduce((r,e)=>r.concat(e),[]);
console.log(result)
您也可以使用和来获得所需的结果

演示

const字符={
英雄:{h:1},
边界:{b:1},
僵尸:[{z:1},{z:2},{z:3}],
项目符号:[{b:1},{b:2},{b:3}],
};
log([].concat.apply([],Object.values(characters.map)(v=>v))
.as控制台包装{max height:100%!important;top:0;}
您也可以使用,并获得所需的结果

演示

const字符={
英雄:{h:1},
边界:{b:1},
僵尸:[{z:1},{z:2},{z:3}],
项目符号:[{b:1},{b:2},{b:3}],
};
log([].concat.apply([],Object.values(characters.map)(v=>v))

.as console wrapper{max height:100%!important;top:0;}
我也会使用一个数组作为英雄和边界,因此它变成了一个简单的:
对象。值(字符)。reduce((a,b)=>a.concat(b))因为你通常有多个边界,将来它们可以支持多个角色,即使你现在不支持。@Shilly谢谢,但我想访问gameState.characters.hero.xPos等的属性,并将其放入数组会让事情变得混乱。如果你对这类事情感兴趣,我建议你读书。像将事物的位置放在视图中而不是放在角色对象上这样的事情减少了我所需要的复杂的减少量。@Shilly谢谢!我对这些东西很感兴趣,我会查看你的链接。如果你也对无框架游戏编程感兴趣,那么看看这个,我只会使用一个数组来表示英雄和边界,所以它变得简单:
Object.values(characters).reduce((a,b)=>a.concat(b))因为你通常有多个边界,将来它们可以支持多个角色,即使你现在不支持。@Shilly谢谢,但我想访问gameState.characters.hero.xPos等的属性,并将其放入数组会让事情变得混乱。如果你对这类事情感兴趣,我建议你读书。像将事物的位置放在视图中而不是放在角色对象上这样的事情减少了我所需要的复杂的减少量。@Shilly谢谢!我对这些东西很感兴趣,我会查看你的链接。如果您也对无框架游戏编程感兴趣,那么请检查一下,您也可以使用
[].concat(…Object.values(characters))
@NenadVracar,这可能是最好的!您应该将其作为答案提交:)您也可以只使用
[].concat(…Object.values(characters))
@NenadVracar,这可能是最好的!您应将其作为答复提交:)