时间戳

首页 > 解决方案 > 在 javascript 中使用带有嵌套元素的 map\reduce

javascript - 在 javascript 中使用带有嵌套元素的 map\reduce

问题描述

我有一个搜索表单，允许用户添加任意​​数量的搜索词。当用户输入所有搜索词及其搜索值并单击搜索时，将使用搜索词更新文本框。我已经使用 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);

这是当前解决方案的代码笔。

我正在尝试以下方法，但我觉得我很遥远：

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,
  ]);

我的问题是，可以用地图做到这一点吗？

标签： javascriptjquery

解决方案

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

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

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

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);

推荐阅读