前言

  JavaScript 函数参数不同于其他编程语言,既不需要规定参数的类型,也不需要关心参数的个数,因此 JavaScript 因函数参数而变得十分灵活,本文总结一下 arguments 参数对象的相关知识点。

正文

  1、arguments参数对象是什么

  JavaScript 中函数既不需要关心传入的参数个数,也不需要关心这些参数的数据类型。正因为这一特性,JS函数没有重载。因此定义函数的时要接收两个参数,并不意味着就要传入两个参数,你可以传入一个、三个,甚至一个也不传,编译器都不会报错。arguments对象是一个类数组对象(但是不是Array 的实例),因此可以使用括号语法来访问其中的元素,要确定元素的个数,可以访问 arguments.length 属性。

    function foo() {
console.log(arguments);
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
foo(1, 2, 3, "a")
// 0: 1
// 1: 2
// 2: 3
// 3: "a"
// callee: ƒ foo()
// length: 4
// Symbol(Symbol.iterator): ƒ values()
// [[Prototype]]: Object
// 1 2 3 "a"

  ECMAScript 函数的参数只是为了方便才写出来的,并不是必须写出来的,可用通过arguments[0]...访问, arguments 对象可以跟命名参数一起使用。

    foo(1, 2, 3, "a")
function foo(name, age) {
console.log(name, arguments[1])
}
foo(1,2) // 1 2

  2、参数默认值

  JS 中函数可以接收任意数量的参数,而无视函数声明处的参数数量,但是有时候需要为传递参数设置默认值。在ES6 之前,我们的代码如下设置默认值:
       function getValue(value){
value = value || 100
return value
}
console.log(getValue())//100这里使用了默认值100
console.log(getValue(0))//100 这里入参为0的时候

  在ES6之后提供了非常方便的设置默认值方法:

        function getValue(value = 100) {
return value;
}
console.log(getValue()); //100
console.log(getValue(0)); //0
console.log(getValue(null)); //null null默认值是有效的

  3、参数传递和接收

  这里主要写一下ES6 之后常用的参数传递的快捷方法,先来看下面代码:

        function getSum() {
var sum = 0
for (let i = 0; i < arguments.length; ++i) {
sum += arguments[i];
}
return sum; }
console.log(getSum(...[1, 2, 3])); // 6

  上面的代码中,getSum方法入参为一个数组,通过扩展运算符分别传入,这种写法比较常见。前面我们提到arguments对象为一个类数组对象,下面的代码中通过扩展运算符将类数组对象转为数组,如下:

       function getSum(...values) {
console.log(arguments);
console.log(values);
// 顺序累加 values 中的所有值
// 初始值的总和为 0
return values.reduce((x, y) => x + y, 0);
}
console.log(getSum(1, 2, 3)); // 6

  运行结果如下:

  4、函数作为参数和返回值

  因为函数名在 JS 中就是变量,所以函数可以用在任何可以使用变量的地方。这意味着不仅可以把函数作为参数传给另一个函数,而且还可以在一个函数中返回另一个函数。

        function creatSum(addSum, num) {
return addSum(num)
}
function addSum(num) {
return num + 10
}
var sum = creatSum(addSum, 1)
console.log(sum);//11

  5、箭头函数中参数问题

  箭头函数中没有 arguments 对象,但可以在包装函数中把它提供给箭头函数。

  箭头函数虽然不支持 arguments 对象,但支持收集参数的定义方式,因此也可以实现与使用 arguments 一样的逻辑。

    function foo() {
let bar = () => {
console.log(arguments[0]); // 5
};
bar();
}
foo(5);

  6、arguments.callee 使得函数逻辑和函数名解耦

  解决上面的问题可以首先来看一道题:通过一个函数求传入参数的阶乘值。一般的解决思路如下:

       function foo(num) {
if (num <= 1) {
return 1;
} else {
return num * foo(num - 1);
}
}
console.log(foo(5));//120

  但是别的地方引用该函数的时候,不免会发生错误:

        function foo(num) {
if (num <= 1) {
return 1;
} else {
return num * foo(num - 1);
}
}
console.log(foo(5));//120
let anotherFoo = foo
foo = null
console.log(anotherFoo(5)); // 报错 foo is not a function

  在写递归函数时使用 arguments.callee 可以避免这个问题。

        function foo(num) {
if (num <= 1) {
return 1;
} else {
return num * arguments.callee(num - 1);
}
}
console.log(foo(5)); //120
let anotherFoo = foo
foo = null
console.log(anotherFoo(5)); //120

  不过,在严格模式下运行的代码是不能访问 arguments.callee 的,因为访问会出错。此时,可以使用命名函数表达式达到目的。

        let foo = (function f(num) {
if (num <= 1) {
return 1;
} else {
return num * f(num - 1);
}
});
console.log(foo(5));//120
let anotherFoo = foo
foo = null
console.log(anotherFoo(5));//120

  上面的代码创建一个函数表达式发 f()赋值给变量 foo ,即使函数赋值给了另一个变量,函数表达式f不变,因此递归就不会有调用的问题了。

写在最后

  以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。

js-arguments 函数参数对象详解的更多相关文章

  1. JavaScript进阶知识点——函数和对象详解

    JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...

  2. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  3. JS中的this对象详解

    JS中this关键字很常见,但是它似乎变幻莫测,让人抓狂.这篇文章就来揭示其中的奥秘. 借助阮一峰老师的话:它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.这句话看似平常,可是要非常注意 ...

  4. Java 函数参数传递方式详解 分类: Java Game 2014-08-15 06:34 82人阅读 评论(0) 收藏

    转:http://zzproc.iteye.com/blog/1328591 在阅读本文之前,根据自己的经验和理解,大家可以先思考并选择一下Java函数的参数传递方式:  A. 是按值传递的?  B. ...

  5. Java函数参数传递方式详解

    在阅读本文之前,根据自己的经验和理解,大家可以先思考并选择一下Java函数的参数传递方式: A. 是按值传递的? B. 按引用传递的? C. 部分按值部分按引用? 此处暂不宣布正确答案,我们通过一个简 ...

  6. 【js】event(事件对象)详解

    1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...

  7. JavaScript中的Function(函数)对象详解

    JavaScript中的Function对象是函数,函数的用途分为3类: 作为普通逻辑代码容器: 作为对象方法: 作为构造函数. 1.作为普通逻辑代码容器 function multiply(x, y ...

  8. Python中scatter函数参数用法详解

    1.scatter函数原型 2.其中散点的形状参数marker如下: 3.其中颜色参数c如下: 4.基本的使用方法如下: #导入必要的模块 import numpy as np import matp ...

  9. js对象详解(JavaScript对象深度剖析,深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

随机推荐

  1. httpd进程数统计,IP封禁,IP连接数量情况查看

    ps -ef|grep httpd|wc -l 统计httpd进程数,连个请求会启动一个进程,使用于Apache服务器. 查看Apache的并发请求数及其TCP连接状态:netstat -n | aw ...

  2. Shell系列(8)- 变量与变量分类(1)

    变量命名规则 开头为字符或下划线,名字中间中能有字母.数字和下划线组成; 变量的长度不超过255个字符; 变量名在有效的范围内必须是唯一的; 如再次定义则会替换上一个变量的值 在Bash中,变量的默认 ...

  3. vue three.js 结合tween.js 实现动画过渡

    参考地址:https://www.jianshu.com/p/d6e3b4b153bb https://www.jqhtml.com/10513.html 官方文档:https://github.co ...

  4. html jquery操作

    $(document).on('事件','元素',function(参数){ // 函数体 }) 元素获取方式:https://www.cnblogs.com/lixiuran/p/5316727.h ...

  5. P4173-残缺的字符串【FFT】

    正题 题目链接:https://www.luogu.com.cn/problem/P4173 题目大意 给出两个字符串\(S,T\),其中包含小写字母和一些\(?\),\(?\)可以匹配任何字符. 求 ...

  6. ARC122C-Calculator【乱搞,构造】

    正题 题目链接:https://atcoder.jp/contests/arc122/tasks/arc122_c 题目大意 一个数对开始是\((0,0)\),每次可以选择一个数加一或者让一个数加上另 ...

  7. windows环境下配置Kafaka

    一.安装Zookeeper(Kafaka依赖于zookeeper进行服务注册和管理) 1. 1   下载zookeeper:http://mirror.bit.edu.cn/apache/zookee ...

  8. Vue3 如何修改端口

    build哪里去了?config哪里去了?配置都消失了? 对比之前Vue2 发现项目目录改动较大 找了很久才找到配置文件:node_modules\@vue\cli-service\lib\comma ...

  9. mysql安装教程,mysql安装配置教程

    MySQL的安装教程 一.MYSQL的安装 首先登入官网下载mysql的安装包,官网地址:https://dev.mysql.com/downloads/mysql/ 一般下载这个就好,现在的最新版本 ...

  10. Http Only Cookie保护AccessToken

    前言 JWT认证方式目前已被广泛使用,一直以来我们将token放在请求头中的Authorization中,若通过此种方式,一旦token被恶意窃取,攻击者可肆意对用户可访问资源进行任意索取,我们大多都 ...