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

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:130.0) Gecko/20100101 Firefox/130.0

Browser: Firefox 130

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 2 months ago

Test name	Executions per second
Map<number, object> - Index Search	1.2 Ops/sec
Map<number, object> - Index Search #2	0.3 Ops/sec
Map<number, object> - Key Search	7108.0 Ops/sec
Array<object> - Index Search	54812.4 Ops/sec
Array<object> - Key Search	3.5 Ops/sec
Array<object> - Key Search #2	2.0 Ops/sec
HTMLCollection - Index Search	4434.1 Ops/sec
HTMLCollection - Key Search	1189.0 Ops/sec
{Array, Map} - Index Search	6043.9 Ops/sec
{Array, Map} - Key Search	7098.0 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