將數組轉換為逗號分隔的字符串

Question

classList的add方法只接受字符串而不接受數組（ 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));

基本上，我希望在一次調用中添加多個類。

Answer 1

由於您不想創建新數組，因此請勿使用.map 。 相反，您想要執行副作用，因此您應該使用forEach或for循環：

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

為了避免完全循環，您可以（不雅地）與現有的className連接：

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

如果<html>標記還沒有 class 名稱，則不需要前導空格。 如果事先不確定它是否具有 class 名稱，則改用classList.add會更容易。

Answer 2

由於add方法接受多個類作為參數，您可以在 object 鍵上使用擴展語法...將鍵中的每個元素作為 class 傳遞。

 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>

將數組轉換為逗號分隔的字符串

問題描述

2 個解決方案

解決方案1
2 2019-10-27 08:33:04

解決方案2
1 已采納 2019-10-27 08:37:48

將數組轉換為逗號分隔的字符串

問題描述

2 個解決方案

解決方案1 2 2019-10-27 08:33:04

解決方案2 1 已采納 2019-10-27 08:37:48

解決方案1
2 2019-10-27 08:33:04

解決方案2
1 已采納 2019-10-27 08:37:48