Преобразование массива в строки, разделенные запятыми

Question

add метод classList принимает только строки, а не массив (String [, String [, ...]]), поэтому мне интересно, есть ли элегантный способ преобразования массива в список строк без очевидного зацикливания:

var breakpoints = {
    "extraSmall"    : [ "only screen and (max-width: 575px)" ],
    "small"         : [ "only screen and (min-width: 576px) and (max-width: 767px)" ],
    "medium"        : [ "only screen and (min-width: 768px) and (max-width: 991px)" ],
    "large"         : [ "only screen and (min-width: 992px) and (max-width: 1199px)" ],
    "extraLarge"    : [ "only screen and (min-width: 1200px)" ],
}
Object.keys(breakpoints).map(feature => document.documentElement.classList.add(feature));

По сути, я хочу добавить несколько классов за один вызов.

javascript dom

1

eozzy 27 Окт 2019 в 11:29

Answer 1

Поскольку метод add принимает несколько классов в качестве параметров, вы можете использовать распространенный синтаксис ... для ключей объекта, чтобы передать каждый элемент из ключей как класс.

var breakpoints = { "extraSmall"    : [ "only screen and (max-width: 575px)" ], "small"         : [ "only screen and (min-width: 576px) and (max-width: 767px)" ], "medium"        : [ "only screen and (min-width: 768px) and (max-width: 991px)" ], "large"         : [ "only screen and (min-width: 992px) and (max-width: 1199px)" ], "extraLarge"    : [ "only screen and (min-width: 1200px)" ],}
const div = document.querySelector('div');
const classes = Object.keys(breakpoints);
div.classList.add(...classes);

<div>Div</div>

Для более старых версий браузеров, которые не поддерживают распространенный синтаксис, вы можете использовать метод apply.

var breakpoints = { "extraSmall"    : [ "only screen and (max-width: 575px)" ], "small"         : [ "only screen and (min-width: 576px) and (max-width: 767px)" ], "medium"        : [ "only screen and (min-width: 768px) and (max-width: 991px)" ], "large"         : [ "only screen and (min-width: 992px) and (max-width: 1199px)" ], "extraLarge"    : [ "only screen and (min-width: 1200px)" ],}
const div = document.querySelector('div');
const classes = Object.keys(breakpoints);
div.classList.add.apply(div.classList, classes)

<div>Div</div>

1

Nenad Vracar 27 Окт 2019 в 09:10

Answer 2

Поскольку вы не хотите создавать новый массив, не используйте .map. Скорее, вы хотите выполнять побочные эффекты, поэтому вы должны использовать вместо этого forEach или цикл for:

for (const newClass of Object.keys(breakpoints)) {
  document.documentElement.classList.add(newClass)
}

Чтобы полностью избежать зацикливания, вы могли бы (не элегантно) объединить с существующим className:

document.documentElement.className += ` ${Object.keys(breakpoints).join(' ')}`;

Если у тега <html> еще нет имени класса, начальный пробел не нужен. Если заранее неизвестно, будет ли у него имя класса или нет, вместо него будет проще использовать classList.add.

2

CertainPerformance 27 Окт 2019 в 08:33

Преобразование массива в строки, разделенные запятыми

2 ответа

Похожие вопросы

Новые вопросы

javascript