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() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。