JavaScript进阶讲解五—＞js中的arguments

96 阅读 0 评论 64 点赞

我是靠谱客的博主辛勤曲奇，最近开发中收集的这篇文章主要介绍JavaScript进阶讲解五—＞js中的arguments，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

我们本节来了解下js中的arguments

一、定义

arguments 是一个对应于传递给函数的参数的 类数组(array-like)对象。

我们这里提到了类数组，那么什么又是类数组呢？

类数组(array-like)：白话的解释就是一个像数组的东西，比如他拥有数组的一些特性，比如说length，比如可以通过index索引来访问，但是它却没有数组的一些方法，比如forEach、map等。

二、演示

function foo() {
    console.log(arguments);// Arguments(3) -> [1,2,3]
}

foo(1,2,3)

例如上面这段代码我们是可以打印出arguments的，这个是默认绑定到AO上的，所以我们是可以打印的。

二、常见操作

function foo() {
    // 1.获取长度
    console.log(arguments.length);
    
    // 2. 根据索引获取某个参数
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
    // callee 获取arguments所在的函数 如这里就是foo
    console.log(arguments.callee);
}
foo(1,2,3)

三、转成真正的数组

因为arguments是个类数组，所以他是没有forEach、map这些方法的，所以一般我们需要把它做成真正的数组来使用

function foo() {
    // 转换方法1
    // var arr = []
    // for (let i = 0; i < arguments.length; i++) {
    //     const item = arguments[i];
    //     arr.push(item)
    // }
    // console.log(arr); // [1,2,3]

    // 转换方法2
    // var arr1 = Array.prototype.slice.call(arguments)
    // var arr2 = [].slice.call(arguments)
    // console.log(arr1); // [1,2,3]
    // console.log(arr2); // [1,2,3]

    // 转换方法3 (这两个是es6的方法)
    var arr1 = Array.from(arguments)
    var arr2 = [...arguments]
    console.log(arr1); // [1,2,3]
    console.log(arr2); // [1,2,3]
}
foo(1,2,3)

上面用了原型链和es6的方法，其实在es6之后，我们不在使用arguments了，而已使用剩余参数，后面会详细讲。

四、箭头函数中的arguments

先说结果：箭头函数不绑定arguments

var foo = () => {
    console.log(arguments); 
}
foo(1,2,3)

其实这个和this是一样的：箭头函数是不绑定arguments的，所以我们在箭头函数中使用arguments会去上层作用域查找（刚这段代码，如果在浏览器中执行会报错arguments is not defined，说明浏览器中顶层的的GO中是没有arguments的，但是如果在node中执行，他是不会报错的，说明node中初始化的时候时有初始化arguments的）

function foo(x,y,z) {
    console.log(arguments); // Arguments(3) [1,2,3]
    return (m, n) => {
        console.log(arguments); // Arguments(3) [1,2,3]
    }
}
var bar = foo(1,2,3)
bar(4,5)