Как добавить классы к элементу (classList.add)?

Question

[Анатолий]

Имеются 2 переменные с классами:

let class1 = 'test1 test2';
let class2 = 'test3';

Нужно добавить их к элементу, но не пойму как.
Классически это выглядит так: element.classList.add('test1', 'test2', 'test3');
1) Пробую так:

class1 = class1 + ' ' + class2;
element.classList.add(class1);

не работает.
2) Пробую так:

class1 = class1.split(' ');
class1.push(class2);
element.classList.add(class1);

работает, но в коде получаю class='test1,test2,test3', а хотелось бы разделение через пробел

как сделать, чтобы было нормально?

Answer 1

[Дмитрий]

let class1 = 'test1 test2';
let class2 = 'test3';
const classes = class1.split(' ').concat(class2);
element.classList.add(...classes);

Comments

[Анатолий]

а что делает оператор (...)? поискал в интернете, ничего толком не нашел

[Andrew]

Анатолий, https://developer.mozilla.org/ru/docs/Web/JavaScri...
UPD: https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Анатолий]

Andrew, не совсем понимаю, дело в том что:
console.log выводит строку, что так:
1) let aaa='test1 test2 test3';
console.log(aaa);

что так:
2) let bbb= ['test1', 'test2', 'test3'];
console.log(...bbb);

почему же в моем примере не сработало сложение строк?

[Andrew]

Анатолий, оно сработало, но в названии класса не может быть пробела.
ну т.е

element.classList.add(...classes);//element.classList.add(classes[0],classes[1]...classes[classes.length-1])

[Анатолий]

Andrew, ошибка:
Failed to execute 'add' on 'DOMTokenList': The token provided ('test1 test2 test3') contains HTML space characters, which are not valid in tokens.
но ведь ...classes это тоже строка из массива?

[Andrew]

Анатолий, у вас ведь написано, что нельзя использовать space.
...classes ~== classes[0],classes[1]...classes[classes.length-1];
те через запятую,а не в виде строки.

[Анатолий]

Andrew, в console.log выводится одно и тоже, что так, что так. Поэтому мне и интересно, ведь массив выведенный через (...) это тоже строка с пробелами?!

[Andrew]

Анатолий, При spread операторе, на выходе у вас не обычная строка, что-то типа строки, которую можно передавать в качестве аргументов, причем с кол-вом>1.Сделали, чтобы не играться с преобразованием массива, а просто сразу передать

[Анатолий]

Andrew, я совсем уже не понимаю о чем речь ))
"необычная строка"
окей, ладно, работает и ладно, не совсем разобрался со spread

[Дмитрий]

Анатолий, не строка это.

someFunction(...[1, 2, 3]);
эквивалентно
someFunction(1, 2, 3);

Оператор spread разворачивает массив в последовательность значений.