从数组检索信息并以html显示的最快方法

Question

我正在用html5移动版创建一个应用程序，并且在包含887个条目的数组中拥有了项的所有信息。每个条目都有32个带值的键，有些具有多个值。

我正在使用for循环来迭代数组，当我找到与html元素匹配的条目时，它会使用html块显示项目信息。

我发现，缓存要在for循环中使用的数组长度会更有效。因此，不要这样做：

for (var i = 0; i < array.length; i++){//code};

我这样做的速度更快：

var array_len = array.length;
for (var i = 0; i < array_len; i++){//code};

我测试过的另一个想法是为数组创建索引以避免循环，就像这样：

var index = {
  "strawberry": 0,
  "pear": 1,
  "orange": 2,
  "watermelon": 3,
  "fruit_salad": 4,
  "water": 5,
  "orange_juice": 6,
  "pear_juice": 7,
  "strawberry_juice": 8,
  "watermelon_juice": 9,
  "potato": 10,
  "french_fries": 11
}

然后使用如下函数调用商品信息：

var singleItem = $('.item');
singleItem.each(function() {
  var item = $(this).attr('class').split(' ')[1];
  var n = index[item];
  var a_items = array[n];
$(this).html(CODE DO DISPLAY THE ITEM INFORMATION HERE)
}

因此，当我使用这样的代码：<div class="item watermelon"></div>时，它应该检索项目信息，而无需遍历数组。

下面是我编写的代表情况的示例代码，其中包含简短的项目数组。在实际应用中，保存商品信息的主数组长为887个商品。而且我在另一个for循环中执行了一些for循环，以检索诸如stats和used in示例之类的信息。

因此，它是一个for循环中的一个for循环。

问题是，有一种更有效的方法吗？ 因为有些页面显示一种类别的项目，大约需要100项项目才能加载5、6秒，所以我需要使其更快。

编辑：使用两个代码显示性能时间的Codepen代码：

https://codepen.io/anon/pen/YBVjKV

// icons: https://www.flaticon.com/search/2?word=food&style_id=28
var array = [
  {
    "name": "strawberry",
    "price": "2.00",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"4"},
      {"type":"thirst","val":"2"},
      {"type":"bladder","val":"-2"}
    ],
    "used_in":["strawberry_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135717.png"
  },
  {
    "name": "pear",
    "price": "1.50",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"6"},
      {"type":"thirst","val":"4"},
      {"type":"bladder","val":"-2"}
    ],
    "used_in":["pear_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167260.png"
  },
  {
    "name": "orange",
    "price": "0.80",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"6"},
      {"type":"thirst","val":"5"},
      {"type":"bladder","val":"-3"}
    ],
    "used_in":["orange_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/415/415734.png"
  },
  {
    "name": "watermelon",
    "price": "5.50",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"4"},
      {"type":"thirst","val":"8"},
      {"type":"bladder","val":"-6"}
    ],
    "used_in":["watermelon_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/415/415731.png"
  },
  {
    "name": "fruit_salad",
    "price": "6.50",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"3"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["strawberry","pear","orange","watermelon"],
    "icon": "https://image.flaticon.com/icons/png/128/415/415744.png"
  },
  {
    "name": "water",
    "price": "1.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"8"},
      {"type":"bladder","val":"-3"}
    ],
    "used_in":["orange_juice","pear_juice","strawberry_juice","watermelon_juice"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135662.png"
  },
  {
    "name": "orange_juice",
    "price": "6.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"6"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients":["orange","water"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167612.png"
  },
  {
    "name": "pear_juice",
    "price": "6.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"6"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients":["pear","water"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167623.png"
  },
  {
    "name": "strawberry_juice",
    "price": "6.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients":["strawberry","water"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167254.png"
  },
  {
    "name": "watermelon_juice",
    "price": "6.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"6"},
      {"type":"bladder","val":"-3"}
    ],
    "ingredients":["watermelon","water"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167620.png"
  },
  {
    "name": "potato",
    "price": "1.00",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"4"},
      {"type":"bladder","val":"-2"}
    ],
    "used_in":["french_fries"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135676.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  }


]

var array_len = array.length;
function gen(){
  var allitems = "";
  for (var i = 0; i < array_len; i++){
    var item = array[i];
    var name = item.name;
    var price = item.price;
    var type = item.type;
    var icon = item.icon;
    allitems += '<div class="item '+name+'"></div>';
  }
  $('.total').html(array_len);
  $('.allitems').html(allitems);
}

function gen2(){
  for (var j = 0; j < array_len; j++){
    var item = array[j];
    var name = item.name;
    var formatted_name = name.replace(/_/g,' ');
    var price = item.price;
    var type = item.type;
    var icon = item.icon;
    var ing = item.ingredients;
    var used_in = item.used_in;
    var stats = item.stats;
    var stats_info = "";
    var ingredients = "";
    var used = "";
    var stat_item = "";
    if(stats != undefined){
      for(var s in stats){
        var stat = stats[s];
        var type = stat.type;
        var val = stat.val
        stat_item += '<div class="stat">'+
          '<i class="'+type+'"></i>'+
          '<span class="stat_val">'+val+'</span>'+
          '</div>'
      }
      stats_info = '<div class="stats_info">'+
        stat_item+
        '</div>';
    }
    for(var i in ing){
      var ing_item = ing[i];
      var format_ing = ing_item.replace(/_/g,' ');
      ingredients += '<div class="ingredient"><i class="'+ing_item+'"></i>'+
        '<span class="ing_txt">'+format_ing+'</span>'+
        '</div>';
    }
    for(var k in used_in){
      var ing_item = used_in[k];
      var format_ing = ing_item.replace(/_/g,' ');
      used += '<div class="ingredient"><i class="'+ing_item+'"></i>'+
        '<span class="ing_txt">'+format_ing+'</span>'+
        '</div>';
    }
    var ing_block = "";
    if(ing != undefined){
      ing_block = '<div class="ingredients_block">'+
        '<div class="ingredient_txt">Uses:</div>'+
        ingredients+
        '</div>';
    }
    if(used_in != undefined){
      ing_block = '<div class="ingredients_block">'+
        '<div class="usedngredient_txt">Used in:</div>'+
        used+
        '</div>';
    }

    $('.item.'+name).html
    ('<div class="items">'+
     '<div class="itemblock">'+
     '<i class="'+name+'"></i>'+
     '<span class="name">'+formatted_name+'</span>'+
     '<span class="price">$ '+price+'</span>'+
     '<span class="type">'+type+'</span>'+
     '</div>'+
     stats_info+
     ing_block+
     '</div>')
  }
}
gen()
gen2()

.strawberry{background-image:url(https://image.flaticon.com/icons/png/128/135/135717.png);}
.pear{background-image:url(https://image.flaticon.com/icons/png/128/167/167260.png);}
.orange{background-image:url(https://image.flaticon.com/icons/png/128/415/415734.png);}
.watermelon{background-image:url(https://image.flaticon.com/icons/png/128/415/415731.png);}
.fruit_salad{background-image:url(https://image.flaticon.com/icons/png/128/415/415744.png);}
.water{background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);}
.orange_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167612.png);}
.pear_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167623.png);}
.strawberry_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167254.png);}
.watermelon_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167620.png);}
.potato{background-image:url(https://image.flaticon.com/icons/png/128/135/135676.png);}
.french_fries{background-image:url(https://image.flaticon.com/icons/png/128/135/135589.png);}
.hunger {background-image:url(https://image.flaticon.com/icons/png/128/608/608857.png);}
.thirst {background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);}
.bladder {background-image:url(https://image.flaticon.com/icons/png/128/1402/1402847.png);}

body {
  background-color: #a3d5d3;
  font-family: arial;
}
.totalitems {
  display: block;
  background: #131313;
  color: #fff;
  margin-bottom: 2px;
  text-align: center;
}
.totalitems .total_txt {
  margin: 5px;
  display: inline-block;
}
.allitems {
  display: block;
}
.item {
  display: inline-block;
  margin-right: 2px;
  box-sizing: border-box;
  background-image: none;
  vertical-align: top;
  width: 320px;
}
.items {
  border: 1px solid #000;
  margin-bottom: 2px;
  background-color: #000;
  padding: 1px;
}
.itemblock {
  display: flex;
  background-color: #333;
  padding: 5px;
  margin-bottom: 2px;
  min-height: 40px;
}
.itemblock .items {
  display: block;
  background-color: #333;
  padding: 5px;
  margin-bottom: 2px;
}
.itemblock i{
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  align-items: center;
  flex-shrink: 0;
  margin: 2px;
}
.itemblock .name {
  display: flex;
  align-items: center;
  margin: 0 5px 0 5px;
  text-transform: capitalize;
  color: #fff;
  width: 100px;
  flex-shrink: 0;
}
.itemblock .price {
  display: flex;
  align-items: center;
  margin: 0 2px;
  color: #ffc107;
  width: 50px;
  flex-shrink: 0;
}
.itemblock .type {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 15px;
  color: #9E9E9E;
  text-transform: capitalize;
  flex-shrink: 0;
}
.stats_info {
  display: flex;
  background-color: #333;
  padding: 8px;
  justify-content: center;
  border-bottom: 2px solid #000;
}
.stats_info .stat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
}
.stats_info .stat i {
  display: flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  background-size: contain;
  background-repeat: no-repeat;
}
.stats_info .stat .stat_val {
  display: flex;
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
  margin: 0 5px;
  text-transform: capitalize;
  justify-content: center;
}
.ingredients_block {
  display: block;
  background-color: #333;
  padding: 5px;
  text-align: center;
  min-height: 82px;
}
.ingredients_block .usedngredient_txt,
.ingredients_block .ingredient_txt{
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-size: 12px;
  text-align: left;
}
.ingredients_block .ingredient {
  display: inline-block;
  align-items: center;
  width: 75px;
}
.ingredients_block .ingredient i {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
}
.ingredients_block .ingredient .ing_txt {
  display: flex;
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
  margin-top: 5px;
  text-transform: capitalize;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="totalitems">
  <span class="total_txt">Total items:</span>
  <span class="total"></span>
</div>
<div class="allitems"></div>
<!-- SEE THIS CODE IN FULL PAGE FOR BETTER VISUALIZATION -->

Answer 1

这是filter , map or find，for，$.each和reduce之间的比较。 在代码中，更改map to filter or find以查看区别。 对于find，代码在此处https://jsfiddle.net/ibrth/3awoj1b9/3/

var index = {
  "strawberry": 0,
  "pear": 1,
  "orange": 2,
  "watermelon": 3,
  "fruit_salad": 4,
  "water": 5,
  "orange_juice": 6,
  "pear_juice": 7,
  "strawberry_juice": 8,
  "watermelon_juice": 9,
  "potato": 10,
  "french_fries": 11
}

var array = [
  {
    "name": "strawberry",
    "price": "2.00",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"4"},
      {"type":"thirst","val":"2"},
      {"type":"bladder","val":"-2"}
    ],
    "used_in":["strawberry_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135717.png"
  },
  {
    "name": "pear",
    "price": "1.50",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"6"},
      {"type":"thirst","val":"4"},
      {"type":"bladder","val":"-2"}
    ],
    "used_in":["pear_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167260.png"
  },
  {
    "name": "orange",
    "price": "0.80",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"6"},
      {"type":"thirst","val":"5"},
      {"type":"bladder","val":"-3"}
    ],
    "used_in":["orange_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/415/415734.png"
  },
  {
    "name": "watermelon",
    "price": "5.50",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"4"},
      {"type":"thirst","val":"8"},
      {"type":"bladder","val":"-6"}
    ],
    "used_in":["watermelon_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/415/415731.png"
  },
  {
    "name": "fruit_salad",
    "price": "6.50",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"3"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["strawberry","pear","orange","watermelon"],
    "icon": "https://image.flaticon.com/icons/png/128/415/415744.png"
  },
  {
    "name": "water",
    "price": "1.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"8"},
      {"type":"bladder","val":"-3"}
    ],
    "used_in":["orange_juice","pear_juice","strawberry_juice","watermelon_juice"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135662.png"
  },
  {
    "name": "orange_juice",
    "price": "6.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"6"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients":["orange","water"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167612.png"
  },
  {
    "name": "pear_juice",
    "price": "6.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"6"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients":["pear","water"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167623.png"
  },
  {
    "name": "strawberry_juice",
    "price": "6.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients":["strawberry","water"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167254.png"
  },
  {
    "name": "watermelon_juice",
    "price": "6.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"6"},
      {"type":"bladder","val":"-3"}
    ],
    "ingredients":["watermelon","water"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167620.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  }
]

var array_len = array.length;
// Function used to create the index of the items

//createindex();

function gen(){
  var allitems = "";
  array.reduce((i, item) =>{
 
    var name = item.name;
    var price = item.price;
    var type = item.type;
    var icon = item.icon;
    allitems += '<div class="item '+name+'"></div>'
  });
  $('.total').html(array_len);
  $('.allitems').html(allitems);
}

var currentDates = array.filter(function(obj) {
  return obj;
});

function gen2(){
  array.reduce((j, item) =>{

    var name = item.name;
    var formatted_name = name.replace(/_/g,' ');
    var price = item.price;
    var type = item.type;
    var icon = item.icon;
    var ing = item.ingredients;
    var used_in = item.used_in;
    var stats = item.stats;
    var stats_info = "";
    var ingredients = "";
    var used = "";
    var stat_item = "";
    if(stats != undefined){
      for(var s in stats){
        var stat = stats[s];
        var type = stat.type;
        var val = stat.val
        stat_item += '<div class="stat">'+
          '<i class="'+type+'"></i>'+
          '<span class="stat_val">'+val+'</span>'+
          '</div>'
      }
      stats_info = '<div class="stats_info">'+
        stat_item+
        '</div>';
    }
    for(var i in ing){
      var ing_item = ing[i];
      var format_ing = ing_item.replace(/_/g,' ');
      ingredients += '<div class="ingredient"><i class="'+ing_item+'"></i>'+
        '<span class="ing_txt">'+format_ing+'</span>'+
        '</div>';
    }
    for(var k in used_in){
      var ing_item = used_in[k];
      var format_ing = ing_item.replace(/_/g,' ');
      used += '<div class="ingredient"><i class="'+ing_item+'"></i>'+
        '<span class="ing_txt">'+format_ing+'</span>'+
        '</div>';
    }
    var ing_block = "";
    if(ing != undefined){
      ing_block = '<div class="ingredients_block">'+
        '<div class="ingredient_txt">Uses:</div>'+
        ingredients+
        '</div>';
    }
    if(used_in != undefined){
      ing_block = '<div class="ingredients_block">'+
        '<div class="usedngredient_txt">Used in:</div>'+
        used+
        '</div>';
    }

    $('.allitems .item.'+name).html
    ('<div class="items">'+
     '<div class="itemblock">'+
     '<i class="'+name+'"></i>'+
     '<span class="name">'+formatted_name+'</span>'+
     '<span class="price">$ '+price+'</span>'+
     '<span class="type">'+type+'</span>'+
     '</div>'+
     stats_info+
     ing_block+
     '</div>')
  });
}


function gen3(){
  var allitems = "";
  array.reduce((i, item) =>{
 
    var name = item.name;
    var price = item.price;
    var type = item.type;
    var icon = item.icon;
    allitems += '<div class="item '+name+'"></div>'
  });
  $('.total').html(array_len);
  $('.allitems').html(allitems);
}



function gen4(){
  array.reduce((j, item) =>{

    var name = item.name;
    var formatted_name = name.replace(/_/g,' ');
    var price = item.price;
    var type = item.type;
    var icon = item.icon;
    var ing = item.ingredients;
    var used_in = item.used_in;
    var stats = item.stats;
    var stats_info = "";
    var ingredients = "";
    var used = "";
    var stat_item = "";
    if(stats != undefined){
      for(var s in stats){
        var stat = stats[s];
        var type = stat.type;
        var val = stat.val
        stat_item += '<div class="stat">'+
          '<i class="'+type+'"></i>'+
          '<span class="stat_val">'+val+'</span>'+
          '</div>'
      }
      stats_info = '<div class="stats_info">'+
        stat_item+
        '</div>';
    }
    for(var i in ing){
      var ing_item = ing[i];
      var format_ing = ing_item.replace(/_/g,' ');
      ingredients += '<div class="ingredient"><i class="'+ing_item+'"></i>'+
        '<span class="ing_txt">'+format_ing+'</span>'+
        '</div>';
    }
    for(var k in used_in){
      var ing_item = used_in[k];
      var format_ing = ing_item.replace(/_/g,' ');
      used += '<div class="ingredient"><i class="'+ing_item+'"></i>'+
        '<span class="ing_txt">'+format_ing+'</span>'+
        '</div>';
    }
    var ing_block = "";
    if(ing != undefined){
      ing_block = '<div class="ingredients_block">'+
        '<div class="ingredient_txt">Uses:</div>'+
        ingredients+
        '</div>';
    }
    if(used_in != undefined){
      ing_block = '<div class="ingredients_block">'+
        '<div class="usedngredient_txt">Used in:</div>'+
        used+
        '</div>';
    }

    $('.allitems .item.'+name).html
    ('<div class="items">'+
     '<div class="itemblock">'+
     '<i class="'+name+'"></i>'+
     '<span class="name">'+formatted_name+'</span>'+
     '<span class="price">$ '+price+'</span>'+
     '<span class="type">'+type+'</span>'+
     '</div>'+
     stats_info+
     ing_block+
     '</div>')
  });
}

function gen6(){
  var allitems = "";
  array.map(( item) =>{
 
    var name = item.name;
    var price = item.price;
    var type = item.type;
    var icon = item.icon;
    allitems += '<div class="item '+name+'"></div>'
  });
  $('.total').html(array_len);
  $('.allitems').html(allitems);
}

var currentDates = array.filter(function(obj) {
  return obj;
});

function gen7(){
  array.map(( item) =>{

    var name = item.name;
    var formatted_name = name.replace(/_/g,' ');
    var price = item.price;
    var type = item.type;
    var icon = item.icon;
    var ing = item.ingredients;
    var used_in = item.used_in;
    var stats = item.stats;
    var stats_info = "";
    var ingredients = "";
    var used = "";
    var stat_item = "";
    if(stats != undefined){
      for(var s in stats){
        var stat = stats[s];
        var type = stat.type;
        var val = stat.val
        stat_item += '<div class="stat">'+
          '<i class="'+type+'"></i>'+
          '<span class="stat_val">'+val+'</span>'+
          '</div>'
      }
      stats_info = '<div class="stats_info">'+
        stat_item+
        '</div>';
    }
    for(var i in ing){
      var ing_item = ing[i];
      var format_ing = ing_item.replace(/_/g,' ');
      ingredients += '<div class="ingredient"><i class="'+ing_item+'"></i>'+
        '<span class="ing_txt">'+format_ing+'</span>'+
        '</div>';
    }
    for(var k in used_in){
      var ing_item = used_in[k];
      var format_ing = ing_item.replace(/_/g,' ');
      used += '<div class="ingredient"><i class="'+ing_item+'"></i>'+
        '<span class="ing_txt">'+format_ing+'</span>'+
        '</div>';
    }
    var ing_block = "";
    if(ing != undefined){
      ing_block = '<div class="ingredients_block">'+
        '<div class="ingredient_txt">Uses:</div>'+
        ingredients+
        '</div>';
    }
    if(used_in != undefined){
      ing_block = '<div class="ingredients_block">'+
        '<div class="usedngredient_txt">Used in:</div>'+
        used+
        '</div>';
    }

    $('.allitems .item.'+name).html
    ('<div class="items">'+
     '<div class="itemblock">'+
     '<i class="'+name+'"></i>'+
     '<span class="name">'+formatted_name+'</span>'+
     '<span class="price">$ '+price+'</span>'+
     '<span class="type">'+type+'</span>'+
     '</div>'+
     stats_info+
     ing_block+
     '</div>')
  });
}


function gen8(){
  var allitems = "";
  
 

// This is a function of current date, so will be empty at some point.


$.each(array, function(i, item) {
   var name = item.name;
    var price = item.price;
    var type = item.type;
    var icon = item.icon;
    allitems += '<div class="item '+name+'"></div>';
});

 

  $('.total').html(array_len);
  $('.allitems').html(allitems);
}

function gen9(){
  $.each(array, function(j, item) {
   
    var name = item.name;
    var formatted_name = name.replace(/_/g,' ');
    var price = item.price;
    var type = item.type;
    var icon = item.icon;
    var ing = item.ingredients;
    var used_in = item.used_in;
    var stats = item.stats;
    var stats_info = "";
    var ingredients = "";
    var used = "";
    var stat_item = "";
    if(stats != undefined){
      for(var s in stats){
        var stat = stats[s];
        var type = stat.type;
        var val = stat.val
        stat_item += '<div class="stat">'+
          '<i class="'+type+'"></i>'+
          '<span class="stat_val">'+val+'</span>'+
          '</div>'
      }
      stats_info = '<div class="stats_info">'+
        stat_item+
        '</div>';
    }
    for(var i in ing){
      var ing_item = ing[i];
      var format_ing = ing_item.replace(/_/g,' ');
      ingredients += '<div class="ingredient"><i class="'+ing_item+'"></i>'+
        '<span class="ing_txt">'+format_ing+'</span>'+
        '</div>';
    }
    for(var k in used_in){
      var ing_item = used_in[k];
      var format_ing = ing_item.replace(/_/g,' ');
      used += '<div class="ingredient"><i class="'+ing_item+'"></i>'+
        '<span class="ing_txt">'+format_ing+'</span>'+
        '</div>';
    }
    var ing_block = "";
    if(ing != undefined){
      ing_block = '<div class="ingredients_block">'+
        '<div class="ingredient_txt">Uses:</div>'+
        ingredients+
        '</div>';
    }
    if(used_in != undefined){
      ing_block = '<div class="ingredients_block">'+
        '<div class="usedngredient_txt">Used in:</div>'+
        used+
        '</div>';
    }

    $('.item.'+name).html
    ('<div class="items">'+
     '<div class="itemblock">'+
     '<i class="'+name+'"></i>'+
     '<span class="name">'+formatted_name+'</span>'+
     '<span class="price">$ '+price+'</span>'+
     '<span class="type">'+type+'</span>'+
     '</div>'+
     stats_info+
     ing_block+
     '</div>')
  });
}

var t0 = performance.now();
$('.allitems').each(function() {
  gen();
  gen2()
});
var t1 = performance.now();
var milliseconds = (t1 - t0);
var seconds = (milliseconds / 1000).toFixed(6);
var method = "Using  reduce  ";
$('.function_time_1').html("Using reduce " + seconds + " seconds.")
console.log("%c "+method+" took " + seconds + " seconds.", 'background: #000; color: #89ff00');

var t2 = performance.now();
$('.individual_items').each(function() {
  gen8();
  gen9()
});

var t3 = performance.now();
var milliseconds2 = (t3 - t2);
var seconds2 = (milliseconds2 / 1000).toFixed(6);
var method = "Using each without looping";
$('.function_time_2').html("Using each without looping took " + seconds2 + " seconds.");
console.log("%c "+method+" took " + seconds2 + " seconds.", 'background: #000; color: #89ff00');


var t4 = performance.now();
$('.allitems').each(function() {
  gen3();
  gen4()
});
var t5 = performance.now();
var milliseconds4 = (t5 - t4);
 var seconds4 = (milliseconds4 / 1000).toFixed(6);
var method5 = "Using for loops ";
$('.function_time_3').html("Using for loops   " + seconds4 + " seconds.")
console.log("%c "+method5+" took " + seconds4 + " seconds.", 'background: #000; color: #89ff00');


 t4 = performance.now();
$('.allitems').each(function() {
  gen6();
  gen7()
});
 t5 = performance.now();
 milliseconds4 = (t5 - t4);
  seconds4 = (milliseconds4 / 1000).toFixed(6);
 method5 = "Using filter ";
$('.function_time_4').html("Using filter   " + seconds4 + " seconds.")
console.log("%c "+method5+" took " + seconds4 + " seconds.", 'background: #000; color: #89ff00');

.strawberry{background-image:url(https://image.flaticon.com/icons/png/128/135/135717.png);}
.pear{background-image:url(https://image.flaticon.com/icons/png/128/167/167260.png);}
.orange{background-image:url(https://image.flaticon.com/icons/png/128/415/415734.png);}
.watermelon{background-image:url(https://image.flaticon.com/icons/png/128/415/415731.png);}
.fruit_salad{background-image:url(https://image.flaticon.com/icons/png/128/415/415744.png);}
.water{background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);}
.orange_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167612.png);}
.pear_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167623.png);}
.strawberry_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167254.png);}
.watermelon_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167620.png);}
.potato{background-image:url(https://image.flaticon.com/icons/png/128/135/135676.png);}
.french_fries{background-image:url(https://image.flaticon.com/icons/png/128/135/135589.png);}
.hunger {background-image:url(https://image.flaticon.com/icons/png/128/608/608857.png);}
.thirst {background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);}
.bladder {background-image:url(https://image.flaticon.com/icons/png/128/1402/1402847.png);}

body {
  background-color: #a3d5d3;
  font-family: arial;
}
.debug {
  background-color: #000;
  font-family: consolas;
  color: #ffed00;
  font-size: 13px;
}
.debug div {
  padding: 5px;
}
.totalitems {
  display: block;
  background: #131313;
  color: #fff;
  margin-bottom: 2px;
  text-align: center;
}
.totalitems .total_txt {
  margin: 5px;
  display: inline-block;
}
.allitems {
  display: block;
}
.item {
  display: inline-block;
  margin-right: 2px;
  box-sizing: border-box;
  background-image: none;
  vertical-align: top;
  width: 320px;
}
.items {
  border: 1px solid #000;
  margin-bottom: 2px;
  background-color: #000;
  padding: 1px;
}
.itemblock {
  display: flex;
  background-color: #333;
  padding: 5px;
  margin-bottom: 2px;
  min-height: 40px;
}
.itemblock .items {
  display: block;
  background-color: #333;
  padding: 5px;
  margin-bottom: 2px;
}
.itemblock i{
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  align-items: center;
  flex-shrink: 0;
  margin: 2px;
}
.itemblock .name {
  display: flex;
  align-items: center;
  margin: 0 5px 0 5px;
  text-transform: capitalize;
  color: #fff;
  width: 100px;
  flex-shrink: 0;
}
.itemblock .price {
  display: flex;
  align-items: center;
  margin: 0 2px;
  color: #ffc107;
  width: 50px;
  flex-shrink: 0;
}
.itemblock .type {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 15px;
  color: #9E9E9E;
  text-transform: capitalize;
  flex-shrink: 0;
}
.stats_info {
  display: flex;
  background-color: #333;
  padding: 8px;
  justify-content: center;
  border-bottom: 2px solid #000;
}
.stats_info .stat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
}
.stats_info .stat i {
  display: flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  background-size: contain;
  background-repeat: no-repeat;
}
.stats_info .stat .stat_val {
  display: flex;
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
  margin: 0 5px;
  text-transform: capitalize;
  justify-content: center;
}
.ingredients_block {
  display: block;
  background-color: #333;
  padding: 5px;
  text-align: center;
  min-height: 82px;
}
.ingredients_block .usedngredient_txt,
.ingredients_block .ingredient_txt{
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-size: 12px;
  text-align: left;
}
.ingredients_block .ingredient {
  display: inline-block;
  align-items: center;
  width: 75px;
}
.ingredients_block .ingredient i {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
}
.ingredients_block .ingredient .ing_txt {
  display: flex;
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
  margin-top: 5px;
  text-transform: capitalize;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="debug">
  <div class="function_time_1"></div>
  <div class="function_time_2"></div>
  <div class="function_time_3"></div>
  <div class="function_time_4"></div>
</div>

<div class="totalitems">
  <span class="total_txt">Total items:</span>
  <span class="total"></span>
</div>
<div class="allitems"></div>

<div class="individual_items">
  <div class="item strawberry"></div>
  <div class="item pear"></div>
  <div class="item orange"></div>
  <div class="item watermelon"></div>
  <div class="item fruit_salad"></div>
  <div class="item water"></div>
  <div class="item orange_juice"></div>
  <div class="item pear_juice"></div>
  <div class="item strawberry_juice"></div>
  <div class="item watermelon_juice"></div>
  <div class="item potato"></div>
  <div class="item french_fries"></div>
</div>