Array.prototype.slice.call(arguments)、Array.prototype.shift.call(arguments)

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

猜你喜欢

转载自blog.csdn.net/weixin_43131046/article/details/120483743
今日推荐