Карта функциональных фильтров JS и цикл for, результаты не совпадают

Question

Если вы запустите приведенный ниже фрагмент кода, результаты цикла for и функционального подхода filter (). Map () не совпадают.

Что я сделал не так с функциональным подходом и каков функциональный подход этого цикла for, если мой метод совершенно неверен?

var data_obj_arr = [{"Size": "<1000", "Type": "Detached", "Location": "Northern", "Configuration": "Downflow", "Age": "Built Before 1980", "Collection_Name": "test"}, {"Size": "<1000", "Type": "Detached", "Location": "Northern", "Configuration": "Downflow", "Age": "Built Before 1980", "Collection_Name": "test"}, {"Size": "<1000", "Type": "Detached", "Location": "Northern", "Configuration": "Downflow", "Age": "Built Before 1980", "Collection_Name": "test"}]


    function updateChosenOption(category_choice, category) {

        var arr = [];
        for (let i in data_obj_arr) {
            if (data_obj_arr[i][category] === category_choice) {
                arr.push(data_obj_arr[i]["Collection_Name"]);
            }
        }

        console.log(`Array: ${arr}`);

        var results = data_obj_arr.filter((el => el[this.curr_category] === category_choice), {curr_category: category} )
        .map(el => el["Collection_Name"]);

        console.log(`Results: ${results}`);        
    }
        
        updateChosenOption('Built Before 1980','Age')

Answer 1

Если вы хотите передать значение this в обратный вызов фильтра в качестве второго параметра, вы не можете использовать функцию жирной стрелки (() =>), потому что вы не можете перепривязать this в функциях стрелки.Так что если вам нравится этот стиль, вам нужно использовать обычную функцию в качестве обратного вызова:

var data_obj_arr = [{"Size": "<1000", "Type": "Detached", "Location": "Northern", "Configuration": "Downflow", "Age": "Built Before 1980", "Collection_Name": "test"}, {"Size": "<1000", "Type": "Detached", "Location": "Northern", "Configuration": "Downflow", "Age": "Built Before 1980", "Collection_Name": "test"}, {"Size": "<1000", "Type": "Detached", "Location": "Northern", "Configuration": "Downflow", "Age": "Built Before 1980", "Collection_Name": "test"}]


function updateChosenOption(category_choice, category) {

  var arr = [];
  for (let i in data_obj_arr) {
    if (data_obj_arr[i][category] === category_choice) {
      arr.push(data_obj_arr[i]["Collection_Name"]);
    }
  }

  console.log(`Array: ${arr}`);
  //                                 v -- needs to be a regular funtion
  var results = data_obj_arr.filter(function(el) {
      return el[this.curr_category] === category_choice
    }, {curr_category: category}) // < -- to pass in this
    .map(el => el["Collection_Name"]);

  console.log(`Results: ${results}`);
}

updateChosenOption('Built Before 1980', 'Age')

Answer 2

Функции стрелок используют «лексическую область видимости», что означает «это» относится к текущей области, а не к дальнейшей. Обновление подхода filter (). Map () (как показано ниже) даст вам те же результаты.

var data_obj_arr = [{"Size": "<1000", "Type": "Detached", "Location": "Northern", "Configuration": "Downflow", "Age": "Built Before 1980", "Collection_Name": "test"}, {"Size": "<1000", "Type": "Detached", "Location": "Northern", "Configuration": "Downflow", "Age": "Built Before 1980", "Collection_Name": "test"}, {"Size": "<1000", "Type": "Detached", "Location": "Northern", "Configuration": "Downflow", "Age": "Built Before 1980", "Collection_Name": "test"}]


    function updateChosenOption(category_choice, category) {

        var arr = [];
        for (let i in data_obj_arr) {
            if (data_obj_arr[i][category] === category_choice) {
                arr.push(data_obj_arr[i]["Collection_Name"]);
            }
        }

        console.log(`Array: ${arr}`);

        var results = data_obj_arr.filter(el => el[category] === category_choice)
        .map(el => el["Collection_Name"]);

        console.log(`Results: ${results}`);        
    }
        
        updateChosenOption('Built Before 1980','Age')

Answer 3

Заменить this.curr_category в функции предиката фильтра на category

var data_obj_arr = [{"Size": "<1000", "Type": "Detached", "Location": "Northern", "Configuration": "Downflow", "Age": "Built Before 1980", "Collection_Name": "test"}, {"Size": "<1000", "Type": "Detached", "Location": "Northern", "Configuration": "Downflow", "Age": "Built Before 1980", "Collection_Name": "test"}, {"Size": "<1000", "Type": "Detached", "Location": "Northern", "Configuration": "Downflow", "Age": "Built Before 1980", "Collection_Name": "test"}];


function updateChosenOption(category_choice, category) {

    var arr = [];
    for (let i in data_obj_arr) {
        if (data_obj_arr[i][category] === category_choice) {
            arr.push(data_obj_arr[i]["Collection_Name"]);
        }
    }

    console.log(`Array: ${arr}`);

    var results = data_obj_arr.filter((el => el[category] === category_choice))
                              .map(el => el["Collection_Name"]);

    console.log(`Results: ${results}`);        
}

updateChosenOption('Built Before 1980','Age');

Результат:

"Array: test,test,test"
"Results: test,test,test"