如何在JavaScript中将嵌套数组转为单个DOM元素的多个data属性

假设你的嵌套数组是键值对形式的子数组（比如 [['cat', 'comedy'], ['genre', 'romance']]），可以通过遍历数组，逐个给DOM元素设置独立的data属性，实现你要的效果：

代码示例 #

// 你的嵌套数据数组
const dataPairs = [
  ['cat', 'comedy'],
  ['genre', 'romance']
];

// 获取目标DOM元素
const targetEl = document.querySelector('.your-element-selector');

// 遍历数组设置独立data属性
dataPairs.forEach(([attrSuffix, value]) => {
  // 使用dataset API（推荐，符合HTML5标准）
  targetEl.dataset[attrSuffix] = value;
  
  // 也可以用setAttribute方式，效果一致
  // targetEl.setAttribute(`data-${attrSuffix}`, value);
});

效果说明 #

执行这段代码后，目标DOM元素会生成两个独立的data属性：

<div class="your-element-selector" data-cat="comedy" data-genre="romance"></div>

如果你的嵌套数组结构不同（比如包含多层嵌套或其他格式），只需要调整遍历逻辑，提取出每个data属性的后缀名和对应值，再重复上述设置步骤即可。

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