Why use [].slice.call()

[ZhangChengLin]

https://github.com/twbs/bootstrap/blob/v5.0.0-alpha1/site/content/docs/5.0/components/navs.md#L529

https://github.com/twbs/bootstrap/blob/v5.0.0-alpha1/site/content/docs/5.0/components/list-group.md#L341

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))

---

Why use this way of writing, just use the following "document.querySelectorAll('#myTab a')"?
What is the difference between them?

[ZhangChengLin]

[rohit2sharma95]

Array.prototype.slice.call is one way to convert the NodeList into a real array so that you can use the methods from Array.prototype. NodeList acts like an array, but doesn’t have the methods from Array.prototype.

[ZhangChengLin]

Array.prototype.slice.call is one way to convert the NodeList into a real array so that you can use the methods from Array.prototype. NodeList acts like an array, but doesn’t have the methods from Array.prototype.

querySelectorAll returns an array.

[rohit2sharma95]

Nope @ZhangChengLin! querySelectorAll() does not return an Array instead it returns a NodeList. And NodeList is not Array.
As per MDN Docs:

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

You can use the Array.from as well, instead of Array.prototype.slice.call. These are the way of converting an array-like object to an array. You can not use the methods on Nodelist directly that are in the prototype of the Array. For example, you can not use the map() method on the NodeList directly until you convert it to an array. forEach is built-in in the NodeList though. And if you don't want to convert the NodeList to an array, you can use the classic for loop easily 😄

[ZhangChengLin]

Nope @ZhangChengLin! querySelectorAll() does not return an Array instead it returns a NodeList. And NodeList is not Array.
As per MDN Docs:

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

You can use the Array.from as well, instead of Array.prototype.slice.call. These are the way of converting an array-like object to an array. You can not use the methods on Nodelist directly that are in the prototype of the Array. For example, you can not use the map() method on the NodeList directly until you convert it to an array. forEach is built-in in the NodeList though. And if you don't want to convert the NodeList to an array, you can use the classic for loop easily 😄

https://codepen.io/zhangchenglin/pen/eYJWEWV?editors=1010

Doesn't affect use here? Is there any performance loss?
I am wondering why the for loop is not used directly.

[ZhangChengLin]

https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList

However, some older browsers have not implemented NodeList.forEach() nor Array.from(). This can be circumvented by using Array.prototype.forEach() — see this document's Example.