如何将JavaScript对象的值分别作为类添加到DOM元素？

你之前的写法存在逻辑问题：METADATA["foo","bar"] 里的逗号是逗号运算符，它会忽略前面的表达式，仅返回最后一个表达式的值，也就是METADATA["bar"]对应的test2，所以只会给<html>标签添加这一个类。

要实现把对象的每个值作为独立类添加，有以下几种可行方案：

使用jQuery的实现方式 #

1. 提取对象的所有值：通过Object.values(METADATA)可以得到包含所有值的数组['test1', 'test2']
2. jQuery的.addClass()方法支持传入空格分隔的类名字符串，将数组用空格拼接后传入即可：

const METADATA = {
    foo: 'test1',
    bar: 'test2'
};
$('html').addClass(Object.values(METADATA).join(' '));

如果只需要指定特定属性的值（比如仅提取foo和bar对应的值），可以手动筛选：

const targetValues = [METADATA.foo, METADATA.bar];
$('html').addClass(targetValues.join(' '));

原生JavaScript实现方式（无需jQuery） #

直接操作DOM元素的classList属性，它的.add()方法支持传入多个参数，用展开运算符把数组转成参数列表即可：

const METADATA = {
    foo: 'test1',
    bar: 'test2'
};
document.documentElement.classList.add(...Object.values(METADATA));

执行以上任意一种代码后，<html>标签就会同时拥有test1和test2两个类。

内容的提问来源于stack exchange，提问作者user22447054