Это быстрее, чтобы перебрать / цикл по объекту или массиву? - PullRequest
0 голосов
/ 04 июля 2019

Итак, я делал это ProductSearchPage, используя React, и у него есть набор значений фильтра, которые мне нужно установить, чтобы отфильтровать список продуктов и показать результаты.

До сих пор яобрабатывал мой список продуктов как массив (хотя я выбираю его как объект, я конвертирую его в массив), и я использовал много map, forEach и много filter перебирает эти массивы снова и снова.

  • Я получу productList, я отфильтрую на основе category
  • Я возьму новый filteredList и фильтр на основе priceFilters
  • Я возьму новый filteredList и фильтр на основе ratingFilter
  • И так далее для brandFilter, featuresFilters и т. Д..

Я начал думать, что я могу создать черную дыру итераций, и это может повредить моей производительности в какой-то момент.Я занимаюсь поиском и фильтрацией на стороне клиента.Мы говорим о максимуме 2k продуктов.

Поэтому я подумал, будет ли быстрее выполнять итерации и фильтровать объект вместо массива.По пути я буду удалять свойства и создавать новые объекты.

Поэтому я сделал этот фрагмент для проверки:

И, к моему удивлению, результаты оказались очень хорошимициклов массива.

Looping object with for...in: 0.31ms
Looping array with forEach: 0.08ms
Looping array with filter: 0.10ms
Looping array with map: 0.09ms

ВОПРОС

Является ли это достаточным доказательством того, что цикл по массивам быстрее, чем цикл по объектам, и я должен придерживаться forEach, map и filter методы?

ПРИМЕЧАНИЕ: Это действительно упрощено.В моем реальном случае каждый продукт - это объект с некоторыми свойствами (некоторые из них являются вложенными свойствами).Поэтому я могу сохранить список в виде массива объектов (как я это делал до сих пор), или я могу сохранить большой объект allProducts с каждым продуктом в качестве свойства этого объекта.Может ли это изменить результаты?

const myObject = {};
const myArray = []

for (let i=0; i<=2000; i++) {
  myObject['prop'+i] = i;
}

for (let k=0; k<=2000; k++) {
  myArray[k] = k;
}

const t0 = window.performance.now();

for (const key in myObject) {
  if (myObject[key] % 37 === 0) {
    //console.log(myObject[key] + ' is a multiple of 37');
  }
}

const t1 = window.performance.now();
console.log('Looping object with for...in: ' + (t1 - t0).toFixed(2) + 'ms');

const t2 = window.performance.now();

myArray.forEach((item) => {
  if (item % 37 === 0) {
    //console.log(item + ' is a multiple of 37');
  }
});

const t3 = window.performance.now();
console.log('Looping array with forEach: ' + (t3 - t2).toFixed(2) + 'ms');

const t4 = window.performance.now();

const newArray = myArray.filter((item) => item % 37 === 0);

const t5 = window.performance.now();
console.log('Looping array with filter: ' + (t5 - t4).toFixed(2) + 'ms');

const t6 = window.performance.now();

const newArray2 = myArray.map((item) => item*2);

const t7 = window.performance.now();
console.log('Looping array with map: ' + (t7 - t6).toFixed(2) + 'ms');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...