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

84

Мне было интересно узнать о различиях между Grep и Filter:

Фильтр:

Сократите набор совпадающих элементов до тех, которые соответствуют селектору, или пройдете проверку функции.

Grep:

Находит элементы массива, удовлетворяющие функции фильтрации. Исходный массив не изменяется.

Хорошо.

поэтому, если я сделаю это в 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);
});

В обеих ситуациях я все еще могу получить доступ к исходному массиву ...

так ... в чем разница?

jquery filter Ройи Намир
источник
4
Я думаю, что .grep()это вспомогательный метод для общей обработки массива, хотя .filter()обычно используется для сужения выбора элементов. Я не думаю, что .grep()возвращает объект jQuery, и вы не можете связать его ( jQuery.fn.grepне существует).
Феликс Клинг,
2
$(arr).filter<- это необязательно, arr.filterвместо этого сделайте .
Mahn
2
Ман не получил широкой поддержки
Рой Намир

Ответы:

135

Они оба функционируют одинаково, но по-разному используются.

Функция фильтра предназначена для использования с элементами html, и именно поэтому она представляет собой цепную функцию, которая возвращает объект jQuery и принимает такие фильтры, как «: даже», «: нечетный» или «: видимый» и т. Д. Сделайте это с помощью функции grep, которая предназначена для работы с массивами.

Omerkirk
источник
1
Просто хотел подчеркнуть, что .filter () не работает в IE, поэтому лучше использовать $ .grep (), если ваше приложение поддерживает все браузеры.
vohrahul
1
протестировал и обнаружил, что в настоящее время .filter () работает как в IE, так и в Microsoft Edge.
Умеш К.
19

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

GillesC
источник
Правда, обычно фильтр используется для передачи строки селектора. Вы также можете передать функцию фильтра, хотя аргументы (индекс, элемент) противоположны собственной функции фильтра (элемент, индекс). Кроме того, grep, похоже, очень похож на функцию фильтра собственного массива. Я подозреваю, что преимущество grep для jquery - совместимость со старыми браузерами ...
Брайан Мэтьюз,
6

Разница в его использовании:

Фильтр:

$(selector).filter(selector/function)

Grep:

$.grep(array,function,invert)

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

Я также предполагаю, что эта grepфункция быстрее, потому что она принимает только массивы.

jasonscript
источник
1

Для тех, кто заинтересован в том , как grepвыполняет против filterI написал этот тест:

TL; DR; Grep во много раз быстрее.

Скрипт, который я использовал для тестирования:

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>
Развернуть фрагмент

Матас Вайткявичюс
источник
0

@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>
Развернуть фрагмент

TL; DR: в firefox фильтр работает немного быстрее, в хроме все наоборот. Что касается только выступлений, вы можете использовать кого угодно.

Пьер Бонхур
источник