Javascript？运算符：如何传递多个参数答案

【问题标题】：Javascript ? operator: how to pass multiple parametersJavascript？运算符：如何传递多个参数
【发布时间】：2019-12-28 08:03:21
【问题描述】：

编辑：我必须在 IE11 上完成这项工作

我有以下代码：

span.classList.add(span.textContent === '\ ' ? 'char' : 'spaceChar')

它工作正常，但我想添加 2 个类以防万一，如下所示：

span.classList.add(span.textContent === '\ ' ? 'char','animated' : 'spaceChar')

我尝试使用括号但没有运气：

span.classList.add(span.textContent === '\ ' ? ('char','animated') : ('spaceChar'))

有什么方法可以实现吗？谢谢

【问题讨论】：

【解决方案1】：

您可以通过传递额外的参数来使用classList.add 添加多个类，因此一种选择是使用数组作为条件表达式，并将它们传播到.add 调用中：

span.classList.add(
  ...(span.textContent === '\ ' ? ['char','animated'] : ['spaceChar'])
);

这相当于

if (span.textContent === '\ ') {
  span.classList.add('char', 'animated');
} else {
  span.classList.add('spaceChar');
}

第一个版本可能更简洁，但 IMO 第二个版本更具可读性。

IE11 does not supportclassList.add 的多个参数，所以即使你 Babel（这是将 ES6+ 语法转换为 ES5 的常用工具），所以你必须单独添加每个类：

if (span.textContent === '\ ') {
  span.classList.add('char');
  span.classList.add('animated');
} else {
  span.classList.add('spaceChar');
}

对于大量的类名，您还可以使用辅助方法，该方法接受一个数组并调用.add。

【讨论】：