JSFiddle - React, Tailwind, and code Playground

by Anton Spirin

JavaScript

// test data preparing
const checkboxGroup = (new Array(1000000))
  .fill({
    checked : true,
    value : 'Изменение администратором'
  }).reduce((a, e, i) => (a['key-' + i] = e, a), {});
  
  
// reduce
const t1_0 = performance.now();
const values1 = Object.getOwnPropertyNames(checkboxGroup).reduce((result, key) => {
  const {checked, value} = checkboxGroup[key];
  if(checked) {
    result.push(value);
  }
  return result;
}, []);
const t1_1 = performance.now();


// filter + map
const t2_0 = performance.now();
const values2 = Object.keys(checkboxGroup)
     .filter(name => checkboxGroup[name].checked === true)
     .map(name => checkboxGroup[name].value);
const t2_1 = performance.now();


// map + filter + map
const t3_0 = performance.now();
const values3 = Object.keys(checkboxGroup)
    .map(key => checkboxGroup[key])
    .filter(item => item.checked)
    .map(item => item.value)
const t3_1 = performance.now();


// for operator
const t4_0 = performance.now();
const values4 = [];
const dataKeys = Object.keys(checkboxGroup);
for (let i = 0; i < dataKeys.length; i++) {
  if(checkboxGroup[dataKeys[i]].checked === true) {
    values4.push(checkboxGroup[dataKeys[i]].value);
  }
}
const t4_1 = performance.now();


// for operator
const t5_0 = performance.now();
const values5 = [];
for (let prop in checkboxGroup ) {
  if (checkboxGroup.hasOwnProperty(prop) && checkboxGroup[prop]['checked']) {
    values5.push(checkboxGroup[prop]['value']);
  }
}
const t5_1 = performance.now();

alert(`
  reduce: ${t1_1 - t1_0} ms
  map + filter: ${t2_1 - t2_0} ms
  map + filter + map: ${t3_1 - t3_0} ms
  for operator: ${t4_1 - t4_0} ms
  for in operator: ${t5_1 - t5_0} ms
  is data length equal: ${values1.length === values2.length && values2.length === values3.length && values3.length === values4.length && values4.length === values5.length}
`);