Filter some values of big array in Javascript

user_10616820 0
Viewed 319

I have an array fetched from our server which holds 2400 objects (total size is about 7MB) and I want to filter some first values in it. Right now I'm using combination of filter and slice method:

 const keyword = 'whatever word';
 const recommendList =bigArray.filter(item => item.name.includes(keyword)).slice(0, 5);

What I know is filter method iterates all the element in array and I think it can impact to performance of my app (React Native) cause its large data. So is there any approach to filter the array for some values, without iterating all the elements ?

arrays javascript
4 Answers
const keyword = 'whatever word';
const recommendList = [];
for (let i=0; i<bigArray.length; i++) {
  if ( recommendList.length >= 5) 
    break;

  const item = bigArray[i];
  if (item.name.includes(keyword)) 
    recommendList.push(item);
}
user_82876670

If you simply want to to break(stop) the loop when you find 5th element then you can do the bellow:

const keyword = 'v';
const bigArray = ['a','v','a','v','a','v','a','v','a','v','a','v','a','v','a','v','a','v'];
const recommendList = [];
for (let i=0; i<bigArray.length; i++) { // loop till you reach end of big array index
  if (recommendList.length == 5) // if length is 5 this will break the loop
    { 
    break; 
    }
  
  if (bigArray[i].includes(keyword)) {
    recommendList.push(bigArray[i]); // add if you find 
    }
}
console.log(recommendList);

If you dont want to use lambda operation can simply use, some, find etc which only works till they return the first response as true

const bigArray = [{
    "name": "a"
  },
  {
    "name": "v"
  },
  {
    "name": "a"
  },
  {
    "name": "v"
  },
  {
    "name": "a"
  },
  {
    "name": "v"
  },
  {
    "name": "a"
  },
  {
    "name": "v"
  },
  {
    "name": "a"
  },
  {
    "name": "v"
  },
  {
    "name": "a"
  },
  {
    "name": "v"
  },
  {
    "name": "a"
  },
  {
    "name": "v"
  },
  {
    "name": "a"
  },
  {
    "name": "v"
  },
  {
    "name": "a"
  },
  {
    "name": "v"
  }
];

const keyword = 'v';
const recommendList = [];

// some operator only iterates till its condition returns true
// so if we get 5 recommended list before the bigArray end we return true and stop the iteration.
bigArray.some(obj => {
  if (obj.name.includes(keyword)) {
    recommendList.push(obj)
  }
  return recommendList.length === 5; // return true if 5 values are found, that will terminate the iteration
})


console.log(recommendList);

user_63847760

The most efficient approach is to process the array as an iterable sequence.

Example below is based on iter-ops library:

import {pipe, filter, take} from 'iter-ops';

const i = pipe(
    bigArray,
    filter(item => item.name.includes(keyword)),
    take(5)
);

console.log('matches:', [...i]);

This way, you won't be iterating through everything even once, it will stop just as the first 5 matches are found.

user_11020510

In this condition, I think filter (the complexity is O(n)) should be the best solution that lead to minimized performance impact.

Think of that, if you just filter some of the values among those 2400 objects, say 1500. Then you would only get filtered results of 1500 objects, and the rest 900 objects would never be used. So at least one loop is necessary.

user_174267540
Related