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

Question

编辑：我必须在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'))

有什么办法可以做到这一点？ 谢谢

Answer 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 support为classList.add提供了多个参数，因此即使您Babel（将ES6 +语法转换为ES5的常用工具），也必须分别添加每个类：

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

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