Grep проти фільтра в jQuery?

Мені було цікаво про відмінності між Grep та Filter:

Фільтр:

Зменшіть набір відповідних елементів до тих, що відповідають селектору або проходять перевірку функції.

Греп:

Знаходить елементи масиву, які задовольняють функції фільтра. На оригінальний масив це не впливає.

в порядку.

отже, якщо я роблю це в GREP:

var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];

myNewArray= jQuery.grep(arr, function(n, i){
  return (n != 5 && i > 4);
});

Я міг би також зробити:

 var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];

myNewArray= $(arr).filter( function(n, i){
  return (n != 5 && i > 4);
});

В обох ситуаціях я все ще можу отримати доступ до вихідного масиву ...

так ... де різниця?

Вони обидва функціонують однаково, проте різняться за своїм звичаєм.

Функція фільтра призначена для використання з елементами html, і саме тому це функція, яка підключається до мережі, яка повертає об'єкт jQuery, і вона приймає фільтри типу ": even", ": odd" або ": visible" тощо. Ви можете ' t зробити це за допомогою функції grep, яка призначена як функція утиліти для масивів.

Фільтр є частиною jQuery.fn, тому його метою є використання селектора, $('div').filterде grep - це метод інструменту jQuery ( jQuery.grep)

Різниця у його використанні:

Фільтр:

$(selector).filter(selector/function)

Греп:

$.grep(array,function,invert)

Так що у вашому випадку я вважав за краще б використовувати , grep()тому що з допомогою масиву таким чином , що не є необхідним: $(arr).

Я також вважаю, що ця grepфункція швидша, оскільки вона приймає лише масиви.

Для тих, хто цікавиться, як grepвиступає проти, filterя написав цей тест:

TLDR; Греп в рази швидший.

Сценарій, який я використовував для тестування:

function test(){
var array = [];
for(var i = 0; i<1000000; i++)
{
array.push(i);
}

var filterResult = []
for (var i = 0; i < 1000; i++){
var stime = new Date();
var filter = array.filter(o => o == 99999);
filterResult.push(new Date() - stime);
}

var grepResult = [];
var stime = new Date();
var grep = $.grep(array,function(i,o){
return o == 99999;
});
grepResult.push(new Date() - stime);

$('p').text('average filter - '+(filterResult.reduce((pv,cv)=>{ return pv +cv},0)/1000))
$('div').text('average grep - '+(grepResult.reduce((pv,cv)=>{ return pv + cv},0)/1000))
}
test();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p></p>
<div></div>

@Matas Vaitkevicius, розміщений фрагмент коду містить помилки, ось виправлена:

function test(){
var array = [];
for(var i = 0; i<1000000; i++)
{
    array.push(i);
}

var filterResult = []
for (var i = 0; i < 1000; i++){
    var stime = new Date();
    var filter = array.filter(o => o == 99999);
    filterResult.push(new Date() - stime);
}

var grepResult = [];
for (var i = 0; i < 1000; i++){
    var stime = new Date();
    var grep = $.grep(array,function(i,o){
        return o == 99999;
    });
    grepResult.push(new Date() - stime);
}

$('p').text('average filter - '+(filterResult.reduce((pv,cv)=>{ return pv +cv},0)/1000))
$('div').text('average grep - '+(grepResult.reduce((pv,cv)=>{ return pv + cv},0)/1000))
}
test();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p></p>
<div></div>

TLDR: У firefox фільтр трохи швидший, у хрому - все навпаки. Що стосується лише вистав, ви можете використовувати кого завгодно.