Javascript 将对象文字展开为html5数据-属性

是否可以将对象文本扩展为html5数据属性

具有以下目的：

const requirements = {
    'data-description': 'some text...',
    'data-pointer': true,
    'data-speaker': true
}

我想在锚定标记中展开它，以获得如下内容：

<a href="#" class="show-modal" data-description="some-text" data-pointer="true" data-speaker="true">Show modal</a>

这个函数可以完成这项工作，但我想知道是否可以使用扩展语法

---

提前感谢

spread语法无法满足您的需要。这实际上是为了将一个对象中的键/值对包含到另一个对象中，或者是为了解构赋值

您可以将

Object.entries（）

与

.map（）

和

.join（）

一起使用在模板文本中

const要求={
“数据说明”：“某些文本…”，
“数据指针”：true，
“数据演讲者”：正确
};
常数s=`；
控制台日志来自

扩展语法允许使用数组表达式等iterable
在零个或多个参数的位置展开（用于函数调用）
或元素（用于数组文字），或对象表达式
在零个或多个键值对（用于
应为对象文本）

由于您正试图构建一个将需求作为参数（而不是键/值对）的函数，因此数组结构比对象结构更有意义


const要求=[
{'data-description'：'some text…}，
{'data-pointer'：true}，
{'data-speaker'：true}
];
（函数填充（）{
var anchor=document.createElement（“a”）；
//将arguments对象转换为数组并枚举它
//这样，每个对象关键点都可以成为一个属性和
//相应的值可以成为以下值：
Array.prototype.slice.call（参数）.forEach（函数（arg）{
for（参数中的var prop）{
setAttribute（prop，arg[prop]）；
}
});
控制台日志（锚）；
})（……要求）
您可以将
data-*
属性定义为单个
JSON
字符串，然后使用
JSON.parse（）
创建
.dataset
属性的JavaScript对象表示

请注意，模板文本中围绕着valid
JSON
at HTML字符串的属性值的单引号


const要求={
“说明”：“某些文本…”，
“指针”：true，
“演讲者”：对
}
常数a=`click`；
document.body.insertAdjacentHTML（“beforeed”，a）；
让data=JSON.parse（document.querySelector（“a”）.dataset.requirements）；
console.log（data、data.description、data.pointer、data.speaker）
直接使用一个，然后通过
对象为其分配一个简化的配置对象。分配
。。。像


var要求={
“说明”：“某些文本…”，
“指针”：true，
“演讲者”：对
};
var elmLink=document.createElement（'a'）；
elmLink.href=''；
分配（elmLink.dataset，需求）；
log（'elmLink:'，elmLink）
作为控制台包装{max height:100%！important；top:0；}
排列用于数组。你有一个对象。我可以在mdn中读到，也可以在对象中使用。是的，但是为了你的使用（一个构建元素的函数），你需要一个数组。请澄清，你是说这个问题唯一重要的是使用扩展语法的能力，还是说你只是想要一个好的、简短的，干净的解决方案？…标题Expand object literal as html5 data-attributes（扩展对象文字为html5数据-属性）似乎给出了一个明确的总结，即您实际上关心现实世界问题的现实世界解决方案，但我想这对一些人来说仍然是一个紧迫的问题…这个答案可行，但回避了问题的全部要点，使用扩展语法。@ScottMarcus。。。OP的问题和被选中的标题都说明了其他一些事情。。。“是否有可能将一个对象文字扩展为html5数据属性？”然而，问题的最后一行是：这个函数可以完成任务，但我想知道是否有可能使用扩展语法。@ScottMarcus:他问的是如何在现有的数据结构中使用它。当然，您可以更改他的需求，但这并不意味着他可以更改他的需求。说spread仅用于阵列是错误的。这是为了让对象文本像您自己的文档链接中所描述的那样。此外，它还避免了问题的关键，即使用现有的数据结构。@guest271314:在这一点上，它实际上是分散的，因为它将现有的集合“分散”到另一个集合中。Rest是您接收参数的“Rest”（余数）的地方。所以“spread”发送一个项目列表，“rest”接收它们。尽管他可以在函数参数中使用“rest”语法<代码>函数填充（…args）{
，从而避免了对
数组.原型.切片.调用（参数）.forEach（…
）的需要，因为
args
将是一个实际数组。@guest271314:the
…requirements
不是一个参数。它是在IIFE之上创建的数组，因此它们将作为参数传递。记住，“参数”在函数定义中，而“参数”在函数调用中……这里有一个相关的问题与解答：@guest271314:因为它没有定义任何新的标识符。它只是将现有数据传递给函数。使用扩展语法，它基本上等同于执行
foo（需求[0]，需求[1]，需求[2]）
，除了在IIFE中，而不是在名为
foo的函数中。
function buildAnchor(requirements) {
    const anchor = document.createElement('a');

    anchor.setAttribute('class', 'show-modal');
    anchor.setAttribute('href', '#');
    anchor.textContent = 'More info';

    Object.keys(requirements).forEach(data => {
        anchor.setAttribute(data, requirements[data]);
    });

    return anchor.outerHTML;
}