使用Array.from包裹querySelectorAll()返回结果有何优势

你直接在querySelectorAll返回结果上调用forEach能正常运行，是因为ES2015标准落地后，现代浏览器给querySelectorAll返回的NodeList类型原生加了forEach方法，但这个特性不是一开始就有的，Array.from的写法能沿用至今，有实际的历史原因和优势：

• 兼容性更稳妥
  在ES2015普及之前，NodeList本身没有挂载任何数组原型方法，直接调forEach会直接报「xxx.forEach is not a function」的错误，这也是早年DOM相关代码都会先把类数组DOM集合转成真数组的核心原因。哪怕是现在，如果项目需要兼容IE这类老旧浏览器，不转数组直接调forEach一定会出错。很多写教程的老开发者踩过这类兼容性坑，已经形成了拿到DOM集合先转数组的肌肉记忆，写内容时自然会用更稳妥的写法。
• 可以直接使用全套数组方法
  直到现在，绝大多数环境里的NodeList也只实现了forEach这一个数组方法，map、filter、reduce、find、some这类常用方法在NodeList上都是不存在的。用Array.from转成真正的数组之后，你可以直接链式调用所有数组API，不用每次都写Array.prototype.xxx.call(节点集合, 回调)这种冗余的代码来借用数组方法，代码简洁度高很多。
• 避免动态集合导致的意外bug
  虽然querySelectorAll返回的是静态NodeList，不会随DOM变动自动更新，但getElementsByClassName、getElementsByTagName这类查询方法返回的HTMLCollection是和DOM实时绑定的，如果遍历过程中增删DOM节点，集合内容会同步变化，很容易出现死循环、漏遍历/重复遍历元素的问题。Array.from会对类数组做一次浅拷贝，生成一个完全独立的普通数组，遍历过程中不管怎么修改原DOM，都不会影响已经生成的数组内容，逻辑稳定性更高。
• 统一类数组的处理逻辑
  前端场景里有很多类数组对象：比如函数内置的arguments、元素classList返回的DOMTokenList、上传文件拿到的FileList等等，统一用Array.from转成普通数组再处理，不用特意区分当前拿到的对象是什么类型，能减少很多不必要的心智负担。

如果你的项目只需要适配近几年的现代浏览器，且当前逻辑只需要做简单遍历，直接调用NodeList自带的forEach完全没问题，两种写法的运行结果没有差异。

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