如何将dataset属性中以空格分隔的多值转换为目标数组？

原因说明 #

Array.from()的作用是将可迭代对象/类数组对象转换为数组，你得到两种不同结果的核心原因是两次处理的目标数据类型完全不同：

• el.classList是内置的DOMTokenList类型，本身就是已经按空格拆分好的类名集合，属于类数组结构，每一项对应一个独立类名，因此Array.from()处理时会直接把集合中的每一项提取出来生成数组。
• el.dataset.customIcons取到的是普通字符串类型，字符串的默认迭代规则是逐字符遍历，因此Array.from()处理字符串时会把每个字符拆成单独的数组元素，这个表现和dataset本身无关，是字符串的迭代特性决定的。

实现方案 #

你需要的按空格拆分效果可以直接调用字符串的split方法实现，推荐加空值过滤逻辑，避免首尾空格、连续多空格的场景下出现空元素：

// 基础写法，适合确定属性值格式标准没有多余空格的场景
const icons = el.dataset.customIcons.split(' ');

// 更健壮的写法，兼容异常空格场景，同时加兜底避免属性未定义时报错
const icons = (el.dataset.customIcons || '').split(/\s+/).filter(Boolean);

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