Array.prototype.slice.call(arguments)、Array.prototype.shift.call(arguments)
原创
©著作权归作者所有:来自51CTO博客作者wx6375cd1abf2fb的原创作品,请联系作者获取转载授权,否则将追究法律责任
Array.prototype.slice(begin, end)
作用:slice() 方法返回一个新的数组,由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
但今天的主题不是它。而是Array.prototype.slice.call(arguments)
Array.prototype.slice.call(arguments)
作用: 它的作用是把对象/集合转换成数组
例子1:
<div></div>
<div></div>
<div></div>
<div></div>
let divlist = document.querySelectorAll('div')
console.log(divlist) //NodeList(4) [div, div, div, div] 这个是伪数组
let res = [].slice.call(divlist)
console.log(res) // [div, div, div, div] 在ie里面没效果 输出的仍然是伪数组
原理:我们大胆猜测一下Array.prototype.slice里面的实现:
Array.prototype.slice = function (start, end) {
var start = start || 0
var end = end || this.length
let result = new Array()
for (let i = start; i < end; i++) { //this就是实现Array.prototype.slice.call(arguments)的关键
result.push(this[i])
}
return result
}
let arr = [1, 2, 3, 4, 5, 6, 7, 8]
let res = arr.slice()
console.log(res) //[1, 2, 3, 4, 5, 6, 7, 8]
//OK 下面 我们把获取到的所有dom元素(伪数组),转换成数组
//首先 页面上写4个div 然后进行下面的操作
let divlist = document.querySelectorAll('div')
let res = Array.prototype.slice.call(divlist)
console.log(res) // [div, div, div, div] 奇迹就在这里 它不再是伪数组 而是真的数组 因为call方法改变了this的指向 这就是它的实现原理
[].slice.call(arguments)
[]相当于Array的实例对象,调用Array的原型上的方法而已,即调用在Array.prototype上定义的方法
Array.prototype.shift.call(arguments)
shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。