如何在JavaScript中通过解构赋值直接获取DOM元素dataset属性的指定值？

嘿，我来帮你搞定这个解构赋值的小坑！

首先得说清楚你两次写法的问题：

• 第一次的const { textContent, dataset.value: dataValue } = dropDown;报错，是因为解构嵌套对象的语法不支持直接用.来访问深层属性，必须用嵌套的对象解构语法。
• 第二次的const { textContent, dataset: dataValue } = dropDown;能运行，但只是把整个dataset对象（也就是DOMStringMap）重命名成了dataValue，没有深入提取里面的value属性。

正确的写法 #

要直接把dropDown.dataset.value赋值给dataValue，你需要用两层解构：

const { textContent, dataset: { value: dataValue } } = dropDown;

语法解释 #

这个写法可以拆成两步理解：

1. 第一层解构：从dropDown中取出textContent属性，以及dataset对象。
2. 第二层解构：从取出的dataset对象中，把value属性重命名为dataValue。

这样执行后，textContent会拿到节点的文本内容，dataValue就直接是data-value属性的具体值，而不是整个dataset对象啦！

比如如果你的dropDown节点是：

<div data-value="selected-option">Choose Option</div>

执行解构后：

• textContent的值是 "Choose Option"
• dataValue的值是 "selected-option"

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