如何从我的监听器的回调 ES6 方式中获取返回值

Question

我输入了一个可以过滤 table 软件的输入。

<input type="text" id="softwares-search" class="form-control" aria-label="Input de recherche" aria-describedby="softwares-search">

然后在 javascript 如果我 console.log(....) 我的过滤器工作正常但是当我用 return 替换它时，什么都没有 returned。我认为这是由于我通过事件侦听器的 var 矫揉造作 :

const maxwell = () => {
  search = document.querySelector('#softwares-search').value;
  return softwares.filter(row => row.name.includes(search) || row.description.includes(search));
}

const softwaresSearch = document.querySelector('#softwares-search');
if (softwaresSearch) {
  var results = softwaresSearch.addEventListener('keyup', maxwell)
  console.log(results);
}

谢谢大家

编辑 1：

我气死了，眼瞎了，我眼里有S#!t，没必要用全局:(

const softwaresSearch = document.getElementById('softwares-search');
if (softwaresSearch) {
  softwaresSearch.addEventListener('keyup', (e) => {
    search = document.getElementById('softwares-search').value;
    var filtredSoftwares = softwares.filter(e => e.name.includes(search) || e.description.includes(search) );
    renderTable(filtredSoftwares);
  });
}

const renderTable = (softwares) => {
  Object.values(softwares).forEach(value=>{
    console.log(value);
  });
  // Todo build HTML table
}

Answer 1

addEventListener函数总是returnsundefined，所以你的results变量是未定义的。从回调函数（maxwell）返回也是没有用的。

您需要在回调中对数据进行处理，或者将数据传递给全局变量。

Answer 2

而不是返回我认为你只需要像这样替换当前数组

const maxwell = () => {
  search = document.querySelector('#softwares-search').value;
  softwares = softwares.filter(row => row.name.includes(search) || row.description.includes(search));
}

并且不需要结果：

const softwaresSearch = document.querySelector('#softwares-search');
if (softwaresSearch) {
  softwaresSearch.addEventListener('keyup', maxwell)
}

Answer 3

据我所知，softwareSearch.addEventListener 不会 return 任何东西，因为它是一个事件侦听器，不会 return 任何值。它只是执行传入第二个参数的函数。您可以尝试这样做

softwaresSearch.addEventListener('keyup', () => {
        var results = maxwell();
        console.log(results);
});

它会做的是，它会在 keyup 事件时调用你的 maxwell 函数，因为这看起来就是你正在尝试做的。

Answer 4

请在发布问题之前分享所有相关代码，此代码包括存在于我们可见范围之外的变量“软件”。

此外，您的代码存在一些问题。

我不明白你对麦克斯韦函数的命名。您应该将函数命名为动词，而不是其他任何东西。函数是一台正在做某事，并且可能 return 正在做某事的机器。它应该以它正在做的事情命名。
在第二行，你说“search = ...”，但你没有将其声明为变量。
您正在 return 基于未验证的值（'search' 在这种情况下可以是未定义的或字符串值），因此，您的return 很可能只是 return 未定义，根本没有任何值。
你的函数可能根本 return 没有任何东西，因为你在你的 if 语句中 returning 某些东西。您可以始终使用闭包 return 某些东西。
我还建议将搜索字符串作为变量传递给您的函数，该函数应该 return 基于搜索查询的列表。养成使用预期 inputs/outputs 的简短函数的习惯，将使您的代码更具可读性，更不容易出错，并且不太可能产生不需要的副作用。
我不知道你的其余代码，但我不建议在全局范围内分配变量。您的“maxwell”、“softwareSearch”变量都存在于全局 space 中，除非您已经将它们包装在另一个功能块中（例如 jquerys $(document).ready(() => { ...everything这里是范围 })
您在代码中的两个不同位置获得相同的元素。

这是更新后的代码示例，但我无法对其进行测试，因为我不知道您的其余代码。

/* 
 * Executing the whole thing in this IIFE will make all variables declared inside here scoped to this block only, 
 * thus they can't interfere with other code you may write
 */

(() => {
    const listOfSoftwares = softwares; // --- get your softwares variable here somehow, I don't know where "software" comes from.

    // input element
    const search = document.querySelector('#softwares-search');

    /**
     * Filter search results
     * @param {string} query Search query
     * @returns {Array} The results array
     */
    const filterSoftwareSearchResults = (query) => {
        let results = [];

        results = listOfSoftwares.filter(software => software.description.includes(query) || software.title.includes(query))

        // Verify
        console.log(results); 
    
        // Should return array of results, even if empty
        return results; 
    }

    if (search) {
        search.addEventListener('keyup', () => {
            filterSoftwareSearchResults(search.value) 
        })
    }
})()

如何从我的监听器的回调 ES6 方式中获取返回值

How to get returned values from my listener's callback ES6 way

javascript

addeventlistener

ecmascript-6