Run results for: Search Performance: Map<number, object> vs Array<object> vs HTMLCollection vs {Array, Map}

Run details:

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1

Browser: Mobile Safari 18

Operating system: iOS 18.5

Device Platform: Mobile

Date tested: 10 months ago

Test name	Executions per second
Map<number, object> - Index Search	1.7 Ops/sec
Map<number, object> - Index Search #2	0.5 Ops/sec
Map<number, object> - Key Search	18566.5 Ops/sec
Array<object> - Index Search	93410.1 Ops/sec
Array<object> - Key Search	9.6 Ops/sec
Array<object> - Key Search #2	4.0 Ops/sec
HTMLCollection - Index Search	11.6 Ops/sec
HTMLCollection - Key Search	1001.7 Ops/sec
{Array, Map} - Index Search	11550.1 Ops/sec
{Array, Map} - Key Search	9976.3 Ops/sec

Script Preparation code:

var theMap = new Map();
var theArr = [];
var theHTML = document.createElement("ol");
var ArrAndMap = { order:[], data:new Map() };
var result;

var count = 10000;
var seeds = [];
let template = {
  class: "this is something",
  content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
  size: 33
}

// Map<number, object> setting
for(let i = 0; i <= count; i++) {
  let valueObj = { ...template };
  valueObj.index = i;
  theMap.set(i, valueObj);
}

// Array<object> setting
for(let i = 0; i <= count; i++) {
  let valueObj = { ...template };
  valueObj.key = i;
  theArr.splice(i, 0, valueObj);
}

// HTMLCollection setting
for(let i = 0; i <= count; i++) {
  const item = document.createElement("li");
  item.id = i;
  item.className = template.class;
  item.textContent = template.content;
  item.dataset.size = template.size;
  theHTML.insertAdjacentElement('beforeend', item);
}

// {Array, Map} setting
for(let i = 0; i <= count; i++) {
  ArrAndMap.order.splice(i, 0, i);
  ArrAndMap.data.set(i, { ...template});
}

// seed
for(let i = 0; i <= count; i++) {
  seeds[i] = Math.floor(Math.random() * count);
}

Tests:

Map<number, object> - Index Search
for(let i = 0; i <= count; i++) { for (let [key, value] of theMap) { if (value.index === seeds[i]) { result = theMap.get(key); break; } } }
Map<number, object> - Index Search #2
for(let i = 0; i <= count; i++) { result = [...theMap.values()][[...theMap.values()].map(function(o) { return o.index; }).indexOf(seeds[i])]; }
Map<number, object> - Key Search
for(let i = 0; i <= count; i++) { result = theMap.get(seeds[i]); }
Array<object> - Index Search
for(let i = 0; i <= count; i++) { result = theArr[seeds[i]]; }
Array<object> - Key Search
for(let i = 0; i <= count; i++) { result = theArr.find(o => o.key === seeds[i]); }
Array<object> - Key Search #2
for(let i = 0; i <= count; i++) { result = theArr[theArr.map(function(o) {return o.key; }).indexOf(seeds[i])]; }
HTMLCollection - Index Search
for(let i = 0; i <= count; i++) { result = theHTML.children[seeds[i]]; }
HTMLCollection - Key Search
for(let i = 0; i <= count; i++) { result = theHTML.children.namedItem(seeds[i]); }
{Array, Map} - Index Search
for(let i = 0; i <= count; i++) { result = ArrAndMap.data.get(ArrAndMap.order[seeds[i]]); }
{Array, Map} - Key Search
for(let i = 0; i <= count; i++) { result = ArrAndMap.data.get(seeds[i]); }

Run results for: Search Performance: Map<number, object> vs Array<object> vs HTMLCollection vs {Array, Map}

Compare the performance of the process of searching and getting specific data from large data sets.

Map<number, object> - Index Search

Map<number, object> - Index Search #2

Map<number, object> - Key Search

Array<object> - Index Search

Array<object> - Key Search

Array<object> - Key Search #2

HTMLCollection - Index Search

HTMLCollection - Key Search

{Array, Map} - Index Search

{Array, Map} - Key Search