Bootstrap 5中为何使用[].slice.call()处理querySelectorAll返回结果？

先看Bootstrap 5文档里的这段初始化代码：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

为什么要用[].slice.call()？ #

document.querySelectorAll()返回的是NodeList，这是个类数组对象——看着像数组，但本质不是标准的JavaScript数组。在IE11及更早的旧版浏览器里，NodeList并没有内置map()这类数组专属的方法。

[].slice.call()的作用就是把这个类数组的NodeList转换成真正的JS数组，这样就能稳定调用数组的map()方法，遍历每个元素并初始化工具提示。

能不能直接用document.querySelectorAll()？ #

要看你的浏览器兼容需求：

• 如果只需要支持Chrome、Firefox、Edge等现代浏览器，完全可以直接用NodeList自带的forEach()方法遍历，不用转数组：

  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (tooltipTriggerEl) {
    new bootstrap.Tooltip(tooltipTriggerEl)
  })
  

• 但NodeList的map()方法是ES6之后才支持的，旧浏览器里没法直接用。示例代码转数组，就是为了在所有目标兼容浏览器里都能正常使用map()方法。

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