javascript - Mapping a compounded array from objects with JavaScript

Question

I am trying to create a simngle array of multiple values obtained from an input array of objects. Ideally I'd like to use "ES5" features to do this.

I need to transform an object such as this:

{
  image: "bat",
  count: 5
}

into this array [bat, bat, bat, bat, bat]

I think the code is the fastest way to explain:

//game object state
var gameObj = {
objects: [
  {
    image: "bat",
    count: 5
  },
  {
    image: "spider",
    count: 4
  },
  {
    image: "frankie",
    count: 3
  }
],
imagesArr: [],
}

function gameObjectArrayBuilder(obj) {
  var resultArr = [];
  resultArr = obj.map(buildArr);

  function buildArr(prop) {
    var image = prop.image;
    var count = prop.count;
    while (prop.count > 0) {
      prop.count--
      return prop.image
    }
  }
  return resultArr;

}

gameObj.imagesArr = gameObjectArrayBuilder(gameObj.objects);

//View result
var html = document.querySelector("#content");
html.innerHTML = gameObj.imagesArr;
console.log(gameObj.imagesArr)

//Result should be
//[bat, bat, bat, bat, bat, spider, spider, spider, spider, frankie, frankie, frankie]

<div id="content">

</div>

标签： javascript

Answer 1

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

const obj = { image: "bat", count: 5 };

const arr = Array.from({ length : obj.count }, () => (obj.image));

console.log(arr);

然后，您可以在此基础上构建基于多个输入对象的数组，如下所示：

var gameObj = {
  objects: [{
      image: "bat",
      count: 5
    },
    {
      image: "spider",
      count: 4
    },
    {
      image: "frankie",
      count: 3
    }
  ],
  imagesArr: [],
}

// Use reduce to obtain compounded array from all input objects
gameObj.imagesArr = gameObj.objects.reduce((acc, obj) => {

  // Concat acc array with resulting array from current obj
  return acc.concat(Array.from({ length: obj.count }, () => (obj.image)))

}, []);


console.log(gameObj.imagesArr);