js高级-arguments

104 阅读1分钟

arguments 是什么?

arguments 是一个对应于传递给函数的参数的类数组(array-like)对象。我们可以在函数中通过这个对象,获取到函数调用时传递的参数。

    function foo(x,y,z) {
        //[Arguments] {'0':10,'1':20,'2':30}
        console.log(arguments)
    }
    foo(10,20,30)

array-like 意味着他不是一个数组类型,而是一个对象类型:

但是它却拥有数组的一些特性,比如说length,比如可以通过index 索引来访问。 但是它没有一些数组的 方法,比如forEach,map等

function foo(x,y,z) {
       
        console.log(arguments) // //[Arguments] {'0':10,'1':20,'2':30}
        console.log(arguments.length) //3
        console.log(arguments[0])//10
        console.log(arguments[1])//20
        console.log(arguments[2])//30
    }
    foo(10,20,30)

arguments 转化array

由于arguments 不是数组,如果我们需要在函数中像数组像使用数组一样使用它,可以将它转化为数组。

转化方式一:

function foo(a,b,c,d,e)  {
        var length = arguments.length
        var arr = []
        for( var i = 0;i < length; i++){
        arr.push(arguments[i])
        )}
        console.log(arr) //[ 10, 20, 30, 40, 50 ]
}
    foo(10,20,30,40,50)

转化方式二:利用Array原型的slice函数实现转化

array.slice(startend) // start,不传值,缺省值为0,代表从0开始获取数组中的元素,并返回新数组。

function foo(a,b,c,d,e) {
    var arr1 = Array.prototype.slice.call(arguments);
    var arr2 = [].slice.call(arguments) //上述语法的字面量使用方法
    console.log(arr1) //[ 10, 20, 30, 40, 50 ]
    console.log(arr2) //[ 10, 20, 30, 40, 50 ]

}

foo(10,20,30,40,50)

Array中slice函数的简单实现

    Array.prototype.zhSlice = function(start,end) {
        var arr = this
        start = start || 0
        end = end || arr.length
        var newArray = []
        for(var i = start ; i < end; i++){
        newArray.push(arr[i])
        }
        
        return newArray
    }

转化方式三:利用es6 语法实现转化

   function foo(a,b,c,d,e) {
       var newArr = Array.from(arguments)
       console.log(newArr)
       var newArr2 = [...arguments]
       console.log(newArr2)
   }
   foo(10,20,30,40,50)

箭头函数中不存在arguments

在es6中, 箭头函数是不绑定arguments的,所以我们在箭头函数中使用arguments会去上层作用域查找。 这里需要注意,在浏览器中,直接查找arguments 是会报错。

var foo = () =>{
console.log(arguments)
}

截屏2022-04-29 下午5.03.16.png

在node环境中的处理不一样,会打印node环境中加载文件等等信息。

截屏2022-04-29 下午5.04.49.png