map vs reduce

Benchmark created on

Description

map vs reduce

Setup

const searchData = Array.from({ length: 1000 }, (_, i) => ({
  title: `Item ${i} - ${Math.random().toString(36).substring(2, 7)}`,
  description: Math.random() > 0.5 ? `Description ${i} - ${Math.random().toString(36).substring(2, 12)}` : undefined,
}));

const query = { value: "item 5" };
let filteredResults = [];
let searchExecuted = false;

function highlightMatch(text, term) {
  return text.replace(new RegExp(`(${term})`, "gi"), "[$1]");
}

Test runner

Ready to run.

Testing in
TestOps/sec
мапим
function handleInputMap() {
  searchExecuted = false;

  const term = query.value.trim().toLowerCase();
  if (!term) {
    filteredResults = [];
    return;
  }

  filteredResults = searchData
    .filter(
      item =>
        item.title.toLowerCase().includes(term) ||
        (item.description && item.description.toLowerCase().includes(term))
    )
    .map(item => ({
      ...item,
      title: highlightMatch(item.title, term),
      description: item.description ? highlightMatch(item.description, term) : undefined
    }));

  searchExecuted = true;
}
ready
редюсим
function handleInputReduce() {
  searchExecuted = false;

  const term = query.value.trim().toLowerCase();
  if (!term) {
    filteredResults = [];
    return;
  }

  filteredResults = searchData.reduce((acc, item) => {
    const titleMatch = item.title.toLowerCase().includes(term);
    const descriptionMatch = item.description && item.description.toLowerCase().includes(term);

    if (titleMatch || descriptionMatch) {
      acc.push({
        ...item,
        title: highlightMatch(item.title, term),
        description: item.description ? highlightMatch(item.description, term) : ""
      });
    }

    return acc;
  }, []);

  searchExecuted = true;
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.