JavaScript如何优雅拼接复选框元素的checked属性值？

报错原因 #

document.querySelectorAll返回的是NodeList类型的集合，它属于DOM集合对象，并非原生数组。虽然NodeList支持forEach方法，但没有内置map方法，所以直接调用map会抛出TypeError。

优雅解决方法 #

以下几种方式都能实现需求，比循环拼接更简洁易读：

1. 用Array.from转换为数组后调用map

const checks = document.querySelectorAll("#tableEvents input[type='checkbox']");
const joined = Array.from(checks).map(item => item.checked).join(',');

2. 用扩展运算符（...）将NodeList转为数组

const checks = document.querySelectorAll("#tableEvents input[type='checkbox']");
const joined = [...checks].map(item => item.checked).join(',');

3. 直接通过Array.prototype.map.call调用map方法
   不用转换数组，直接借助数组的map方法处理NodeList：

const checks = document.querySelectorAll("#tableEvents input[type='checkbox']");
const joined = Array.prototype.map.call(checks, item => item.checked).join(',');

以上三种方式最终都会得到你需要的"true,false,false,true"格式字符串，写法更简洁，符合现代JS的声明式编程风格。

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