如何使用解构赋值结合页面元素查询精简JavaScript代码

嗨，我来帮你理清这个问题～首先得先明确你到底想要实现的效果：是和原来的代码一样，分别获取所有.check元素的集合和所有.label元素的集合？还是想获取单个.check和单个.label元素？这两种情况的写法是不一样的，我来逐个分析：

先说说你原来的代码逻辑 #

你原来的代码是分别查询两个类对应的所有元素，得到两个NodeList：

let c = document.querySelectorAll(".check"),
    l = document.querySelectorAll(".label");

如果你想保留原逻辑（获取两个元素集合），用解构写一行的正确方式 #

你尝试的几种写法里，只有把两个独立的查询结果放进数组再解构，才能和原代码功能一致：

let [c, l] = [document.querySelectorAll(".check"), document.querySelectorAll(".label")];

这样c还是所有.check元素的NodeList，l还是所有.label元素的NodeList，完全等价于你原来的代码，而且是一行写法。

如果你其实想获取单个元素（比如第一个匹配的） #

那可以用querySelector（它返回第一个匹配的元素），同样用解构写一行：

let [c, l] = [document.querySelector(".check"), document.querySelector(".label")];

分析你尝试的几种写法的问题 #

• let [c, l] = document.querySelectorAll([".check", ".label"])：虽然数组会被隐式转成字符串".check,.label"，结果可能看似正常，但这不是规范写法，querySelectorAll的参数应该直接传逗号分隔的选择器字符串，而不是数组。而且更关键的是，这样得到的c和l是DOM中第一个和第二个匹配.check或.label的元素，和你原来获取所有元素集合的逻辑完全不同。
• let [c, l] = document.querySelectorAll(".check, .label")：这个写法本身语法没问题，但同样，它返回的是所有匹配.check或.label的元素按DOM顺序排列的NodeList，解构后c是第一个匹配的元素，l是第二个，和原代码的“获取两个独立集合”逻辑不一致，而且元素顺序取决于DOM结构，很容易出问题。
• 用getElementsByClassName的两种写法都是错的：这个方法只能接受单个类名（不带点），或者多个用空格分隔的类名（表示元素同时拥有这些类），不能用逗号分隔的“或”逻辑，也不能传数组，更不能带.前缀，所以完全不符合你的需求。

总结一下：如果你要保留原代码的功能，就用[document.querySelectorAll(".check"), document.querySelectorAll(".label")]来解构；如果是要单个元素，就用querySelector的数组解构写法～

备注：内容来源于stack exchange，提问作者sae67