Итак, я делал это 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');