javascript - 在 javascript 中将 map\reduce 与嵌套元素一起使用

Question

我有一个搜索表单，允许用户添加任意​​数量的搜索词。当用户输入所有搜索词及其搜索值并单击搜索时，将使用搜索词更新一个文本框。我已经使用 for 循环进行了此操作，但我正在努力提高我的开发技能，并且正在寻找一种方法来改为使用 map\filter 来执行此操作。

这是我要替换的代码:

var searchTerms = $("#search-form").find(".mdc-layout-grid__inner");

var searchString = "";    

for(var i = 0; i < searchTerms.length - 1; i ++)
{

    var select = $(searchTerms[i]).find(".select2-selection")[0];

    var selectText = $(select).select2('data')[0].text + ":";        

    var textBox = $(searchTerms[i]).find(".mdc-text-field__input")[0];

    searchString = searchString += selectText.replace(/\./g,"").replace(/ /g,"") + textBox.value;

    if(i < searchTerms.length - 1)
    {
        searchString = searchString += " ";
    }

}

$("#er-search-input").val(searchString);

这是一个 codepen当前解决方案。

我正在尝试下面的方法，但我觉得我离自己很远:

const ret = searchTerms.map((u,i) => [

    $($(u[i]).find(".select2-selection")[0]).select2('data')[0].text + ":",
    $(u[i]).find(".mdc-text-field__input")[0].value,
  ]);

我的问题是，是否可以使用 map 来做到这一点？

Answer 1

首先，您重复创建一个 jQuery 对象，通过索引访问它以获得一个 Element 对象，然后从中创建另一个 jQuery 对象。您可以使用 eq() 通过索引获取 jQuery 对象中的特定元素，而不是这样做。

但是，如果您使用 map() 循环遍历 jQuery 对象，那么您可以通过使用 this 来引用迭代中的当前元素来完全避免这种情况。从那里您可以访问所需的元素。 map() 的使用也会为您构建数组，因此您需要做的就是将结果join() 在一起构建所需的字符串输出。

最后，请注意，您可以使用 | 运算符以及 \s 来组合 replace() 调用中的正则表达式比使用空白字符更健壮。试试这个:

var $searchTerms = $("#search-form").find(".mdc-layout-grid__inner");
var searchString = $searchTerms.map(function() {
  var $searchTerm = $(this);
  var selectText = $searchTerm.find('.select2-selection').select2('data')[0].text + ':';
  var $textBox = $searchTerm.find('.mdc-text-field__input:first');
  return selectText.replace(/\.|\s/g, "") + $textBox.val();  
}).get().join(' ');

$("#er-search-input").val(searchString);