Как передать дополнительный параметр в функцию обратного вызова в методе Javascript .filter ()?

Question

Я хочу сравнить каждую строку в массиве с заданной строкой.Моя текущая реализация:

function startsWith(element) {
    return element.indexOf(wordToCompare) === 0;
}
addressBook.filter(startsWith);

Эта простая функция работает, но только потому, что прямо сейчас wordToCompare устанавливается как глобальная переменная, но, конечно, я хочу избежать этого и передать еев качестве параметра.Моя проблема в том, что я не уверен, как определить startWith () , чтобы он принимал один дополнительный параметр, потому что я не совсем понимаю, как передаются параметры по умолчанию, которые он принимает.Я попробовал все возможные способы, и ни один из них не работает.

Если бы вы могли также объяснить, как передаваемые параметры «встроены» в функции обратного вызова (извините, я не знаю лучшего терминадля них) работа, которая была бы отличной

Answer 1

Заставить startsWith принять слово для сравнения и вернуть функцию , которая затем будет использоваться в качестве функции фильтра / обратного вызова:

function startsWith(wordToCompare) {
    return function(element) {
        return element.indexOf(wordToCompare) === 0;
    }
}

addressBook.filter(startsWith(wordToCompare));

Другой вариант - использовать Function.prototype.bind ^[MDN] (доступно только в браузере, поддерживающем ECMAScript 5, перейдите по ссылке для прокладки для более старых браузеров) и «исправьте» первый аргумент:

function startsWith(wordToCompare, element) {
    return element.indexOf(wordToCompare) === 0;
}

addressBook.filter(startsWith.bind(this, wordToCompare));

---

Я не совсем понимаю, как передаются необходимые параметры по умолчанию

В этом нет ничего особенного.В какой-то момент filter просто вызывает обратный вызов и передает текущий элемент массива.Так что это функция, вызывающая другую функцию, в данном случае обратный вызов, который вы передаете в качестве аргумента.

Вот пример аналогичной функции:

function filter(array, callback) {
    var result = [];
    for(var i = 0, l = array.length; i < l; i++) {
        if(callback(array[i])) {  // here callback is called with the current element
            result.push(array[i]);
        }
    }
    return result;
}

Answer 2

Второй параметр фильтра установит this внутри обратного вызова.

arr.filter(callback[, thisArg])

Так что вы можете сделать что-то вроде:

function startsWith(element) {
    return element.indexOf(this) === 0;
}
addressBook.filter(startsWith, wordToCompare);

Answer 3

function startsWith(element, wordToCompare) {
    return element.indexOf(wordToCompare) === 0;
}

// ...
var word = "SOMETHING";

addressBook.filter(function(element){
    return startsWith(element, word);
});

Answer 4

Для тех, кто ищет альтернативу ES6 с использованием функций стрелок, вы можете сделать следующее.

let startsWith = wordToCompare => (element, index, array) => {
  return element.indexOf(wordToCompare) === 0;
}

// where word would be your argument
let result = addressBook.filter(startsWith("word"));

Обновленная версия с использованием включает :

const startsWith = wordToCompare => (element, index, array) => {
  return element.includes(wordToCompare);
}

Answer 5

Вы можете использовать функцию стрелки внутри фильтра, например:

result = addressBook.filter(element => element.indexOf(wordToCompare) === 0);

Функции стрелки на MDN

Выражение функции стрелки имеетболее короткий синтаксис по сравнению с выражениями функций и лексически связывает значение this (не привязывает свое собственное this, arguments, super или new.target).Функции стрелок всегда анонимны.Эти функциональные выражения лучше всего подходят для не-методических функций и не могут использоваться в качестве конструкторов.

Answer 6

Для тех, кто интересуется, почему их функция жирной стрелки игнорирует [, thisArg], например, почему

["DOG", "CAT", "DOG"].filter(animal => animal === this, "DOG") возвращает []

, потому что this внутри этих функций стрелки связаны, когдафункция создана и для нее установлено значение this в более широкой охватывающей области, поэтому аргумент thisArg игнорируется.Я обошел это довольно легко, объявив новую переменную в родительской области видимости:

let bestPet = "DOG"; ["DOG", "CAT", "DOG"].filter(animal => animal === bestPet); => ["DOG", "DOG"]

Вот ссылка на еще одно чтение: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this

Answer 7

Существует простой способ использовать функцию фильтра, получить доступ ко всем параметрам и не усложнять ее.

Если для функции обратного вызова thisArg не установлен другой контекст, фильтр не создает свою собственную область, и мы можем получить доступ к параметрам в текущей области. Мы можем установить 'this', чтобы определить другую область видимости, чтобы получить доступ к другим значениям, если это необходимо, но по умолчанию она установлена ​​в область, из которой она вызывается. Вы можете видеть этот используемый для угловых областей в этом стеке .

Использование indexOf побеждает назначение фильтра и добавляет дополнительные издержки. Фильтр уже проходит через массив, так почему мы должны повторить его снова? Вместо этого мы можем сделать его простой чистой функцией .

Вот сценарий варианта использования в методе класса React, где у состояния есть массив с именем items , и с помощью фильтра мы можем проверить существующее состояние:

checkList = (item) => {  // we can access this param and globals within filter
  var result = this.state.filter(value => value === item); // returns array of matching items

  result.length ? return `${item} exists` : this.setState({
    items: items.push(item) // bad practice, but to keep it light
  });
}

Answer 8

на основе ответа oddRaven и https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Я сделал это 2 разными способами.1) используя функциональный способ.2) используя встроенный способ.

//Here  is sample codes : 

var templateList   = [
{ name: "name1", index: 1, dimension: 1 }  ,
{ name: "name2", index: 2, dimension: 1 }  ,
{ name: "name3", index: 3, dimension: 2 }  ];


//Method 1) using function : 

function getDimension1(obj) {
                if (obj.dimension === 1) // This is hardcoded . 
                    return true;
                else return false;
            } 

var tl = templateList.filter(getDimension1); // it will return 2 results. 1st and 2nd objects. 
console.log(tl) ;

//Method 2) using inline way 
var tl3 = templateList.filter(element => element.index === 1 || element.dimension === 2  ); 
// it will return 1st and 3rd objects 
console.log(tl3) ;