classList.add()插入变量而不是字符串

Question

我试图创建一个循环，每次执行元素时都会更改它的类。问题是

classList.add('something')

需要字符串，我需要在那里放一个变量，这是我的代码：

const head = document.createElement('div');
function change_head() {
var head_class = [
{name: "bold"},
{name: "rainbow_head"},
{name: "hut_head"},
{name: "beats_head"}
];
for (let i = 0; i < head_class.length; i += 1){
diffrent_head = head_class[i];
head.classList.add(head_class[i]);
}
};

希望可以在这里以某种方式使用变量。

Answer 1

在您的head_class数组中，您有一个带有字段name的对象，该字段具有字符串值。使用：

for (let i = 0; i < head_class.length; i += 1){
head.classList.add(head_class[i].name);
}

Answer 2

问题是您需要访问.name属性才能访问字符串：

head.classList.add(head_class[i].name);

const head = document.createElement('div');
function change_head() {
var head_class = [
{name: "bold"},
{name: "rainbow_head"},
{name: "hut_head"},
{name: "beats_head"}
];
for (let i = 0; i < head_class.length; i += 1){
diffrent_head = head_class[i];
head.classList.add(head_class[i].name);
}
}
change_head();
console.log(head.className);

但还有一个更好看的选项-您可以将.map和head_class仅限于字符串(从每个字符串中提取.name属性(，然后将字符串数组扩展到.add中，导致.add只被调用一次：

const head = document.createElement('div');
function change_head() {
var head_class = [
{name: "bold"},
{name: "rainbow_head"},
{name: "hut_head"},
{name: "beats_head"}
];
head.classList.add(
...head_class.map(({ name }) => name)
);
}
change_head();
console.log(head.className);