Preface
js there are many concepts more difficult to understand, such as js prototype and inheritance . I've seen early on knowledge prototypes of js, and at the time wrote a blog as a record, it is clear that at the time I just rote. Recently I used the spare time to some relatively more in-depth js re-learn the concept and usage, and create a column depth javascript for recording and sharing. Why do the following to analyze the [].slice.call()can NodeListinto the array :
concept
Some concepts need to be understood before analysis:
Pseudo-arrays are also called class-arrays. They cannot directly call array methods or expect any special behavior of the length property, but they can still be traversed using real array traversal methods. Typically, the arguments parameter of the function, as well as the NodeList objects returned by calling querySelectorAll, are all pseudo-arrays.
An array of slicebasic grammar is array.slice(start, end)more specific usage much to say, with the following piece of code to explore its default behavior:
const arr = [1, 2, 3, 4, 5]
arr.slice(0, arr.length) // [1, 2, 3, 4, 5]
arr.slice() // [1, 2, 3, 4, 5]
As can be seen from the above code result, the slicedefault value of the method start parameter is 0 , and the default value of the end parameter is the length of the slice caller .
Implement a simple slice method
<ul>
<li>F</li>
<li>O</li>
<li>O</li>
</ul>
<script>
Array.prototype.slice2 = function (start = 0, end = this.length) {
console.log(`打印看看当前的 this： ${
this}`) // [object NodeList]
const result = []
for (let i = start; i < end; i++) {
result.push(this[i])
}
return result
};
// 试一试效果
const nodeArr = [].slice2.call(document.querySelectorAll('li')) // [li, li, li]
const nodeArr2 = [].slice2.call(document.querySelectorAll('li'), 0, 2) // [li, li]
</script>
The above referenced section describes the dummy array can be forcirculated, in the above code, we define the starting point of start and the end point END will be within a specified range NodeList child element pushinto a new array, so that the dummy array conversion It's done Array. It is operation of lengthattribute change number of array elements, the various methods may be used in the array.
to sum up
[] .slice2.call (NodeList) the NodeListmethod used into an array of at least several times in my career, but have to search almost every time before you want to use it, obtaining the result of the completion of the project hastily, It doesn't mean anything. But really calm down to explore its principles and found that it was so simple. Although there is an easier way NodeListinto an array [...document.querySelectorAll('li')], but take the time to look in-depth js something really interesting.