时间戳

首页 > 解决方案 > 在一个简单的翻牌JS函数中解析turned = !turned的逻辑

javascript - 在一个简单的翻牌JS函数中解析turned = !turned的逻辑

问题描述

我正在审查 Codepen 上一个可点击的双面抽认卡的相当简单的 ES6 实现。

我能够解析 99% 的代码，但这个toggleTurn函数让我摸不着头脑。

具体来说，我想知道：

(1)在此函数的开头将turned值设置为其逻辑相反 ( ) 的目的是什么？!turned

（2）为什么要把event对象作为参数传递给这个函数？toggleTurn()在事件侦听器中调用函数不是更简单、更容易吗？

function toggleTurn(e) {
  turned = !turned;
  if (turned) {
    this.classList.add("turned");
  } else {
    this.classList.remove("turned");
  }
}

我敢肯定这里的答案是显而易见的，非常感谢您的时间和耐心！

标签： javascript

解决方案

在此函数的开头将转值设置为其逻辑相反 (!turned) 的目的是什么？

如果在"turned"html 元素上添加了类，则表示turned为真。否定它的值将给出false哪个将执行该else块。

类似地，如果"turned"没有在 html 元素上添加类，则表示turned为 false。否定它的值将给出true哪个将执行该if块。

您可以使用切换方法简化功能：

function toggleTurn() {
  this.classList.toggle("turned");
}

为什么需要将事件对象作为参数传递给这个函数？在事件侦听器中调用 toggleTurn() 函数不是更简单、更容易吗？

如果它没有在函数中使用，则不需要它。如果你愿意，你可以删除它。但是，它确实可以提醒您该函数用作事件侦听器。

推荐阅读