如何结合 lambda 和 javascript forEach 循环？答案

【问题标题】：How to combine lambda and javascript forEach loops?如何结合 lambda 和 javascript forEach 循环？
【发布时间】：2017-08-11 22:04:28
【问题描述】：

这是我尝试过的，但由于某种原因没有调用事件侦听器：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>Some sample text inside body
    <div id="log"></div>
    <script>
        var clipboardEventsHandler = ['beforecut', 'cut', 'beforecopy', 'copy', 'paste'].forEach((evt) => {
            document.addEventListener(evt, (e) => {
                log.innerHTML += ("-" + e.type + "-");
                log.innerHTML += (document.queryCommandSupported(e.type) ? "-" + e.type + " supported-" : "-" + e.type + " **not** supported-");
                log.innerHTML += (document.queryCommandEnabled(e.type) ? "-" + e.type + " enabled-" : "-" + e.type + " **not** enabled-");
                log.innerHTML += (document.queryCommandState(e.type) ? "-" + e.type " state:true-" : "-" + e.type + " state:false/null-");
                log.innerHTML += "<br>"
            })
        });
    </script>
</body>
</html>

我怀疑 evt 参数的类型传递给 addEventListener。我通过记录typeof evt 确认它是一个字符串，然后将其传递给addEventListener。它说它的string。但是，当我复制body 中的部分文本时，事件侦听器仍然没有被调用。谁能告诉我我做错了什么？

【问题讨论】：

你知道你在e.type " state:true-"之间缺少一个加号
否则看起来不错 -> jsfiddle.net/xc9rovk4 ..... 打错了！
修复语法问题后触发事件。始终检查控制台是否有错误:)
请在 Mac 上按 alt+cmd+J 或在 Windows/Linux 上按 alt+ctrl+J 在 Chrome 中检查您的开发控制台，或检查您的页面（在每个现代浏览器上）
你可以在 TypeScript 游乐场typescriptlang.org/play找到大部分问题

标签： javascript lambda foreach addeventlistener

【解决方案1】：

首先 - 你有一个语法错误 - 这里缺少 +：

e.type) ? "-" + e.type " state:true-"
                       ^----

第二 - 使用document.getElementById 而不是直接通过它们的 id 访问元素会更好：

document.getElementById('log')

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>Some sample text inside body
    <div id="log"></div>
    <script>
        var log = document.getElementById('log');
        var clipboardEventsHandler = ['beforecut', 'cut', 'beforecopy', 'copy', 'paste'].forEach((evt) => {
            document.addEventListener(evt, (e) => {
                log.innerHTML += ("-" + e.type + "-");
                log.innerHTML += (document.queryCommandSupported(e.type) ? "-" + e.type + " supported-" : "-" + e.type + " **not** supported-");
                log.innerHTML += (document.queryCommandEnabled(e.type) ? "-" + e.type + " enabled-" : "-" + e.type + " **not** enabled-");
                log.innerHTML += (document.queryCommandState(e.type) ? "-" + e.type + " state:true-" : "-" + e.type + " state:false/null-");
                log.innerHTML += "<br>"
            })
        });
    </script>
</body>
</html>

【讨论】：