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

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

1 голос
/ 27 октября 2019

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));

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

Ответы [ 2 ]

2 голосов
/ 27 октября 2019

Поскольку вы не хотите создавать новый массив, не используйте .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.

1 голос
/ 27 октября 2019

Поскольку метод 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...