javascript - Javascript？运算符:如何传递多个参数

编辑:我必须使这项工作在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'))

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

最佳答案

您可以通过传递其他参数来添加带有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。