JS 函数式过滤器映射 vs for-loop，结果不一样答案

【问题标题】：JS functional filter map vs for-loop, results not the sameJS 函数式过滤器映射 vs for-loop，结果不一样
【发布时间】：2019-09-08 06:37:33
【问题描述】：

如果你运行下面的代码snipper，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')

【问题讨论】：

标签： javascript arrays object for-loop functional-programming

【解决方案1】：

将过滤器的谓词函数中的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"

【讨论】：

【解决方案2】：

如果要将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')

【讨论】：

【解决方案3】：

箭头函数使用“词法作用域”，意思是“this”指的是当前作用域，而不是更远的作用域。更新您的 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')

【讨论】：