arguments.callee_arguments.callee_arguments.callee

请注意,JavaScript 和其它语言不同, 它是在函数被调用时,才去求参数的默认值。

arguments.callee_arguments.callee_arguments.callee

浏览器对默认参数的支持情况

桌面浏览器:

arguments.callee_arguments.callee_arguments.callee

移动端浏览器:

arguments.callee_arguments.callee_arguments.callee

解构赋值

解构赋值是ES6的新特性。我们可以从数组和对象中提取值,对变量进行赋值。这种语法清晰且易于理解,尤其是在给函数传参时特别有用。

在ES5里面,我们经常用一个配置对象来处理大量的可选参数, 特别是当对象属性的顺序可变时:

arguments.callee_arguments.callee_arguments.callee

这种方式实现起来很好,已经被许多JS开发者所采用。 只是我们必须看函数内部,才知道函数预期需要哪些参数。结合解构赋值,我们就可以在函数声明中清晰地表示这些参数:

arguments.callee_arguments.callee_arguments.callee

在该函数中,我们没有传入一个配置对象,而是以对象解构赋值的方式,给它传参数。这样做不仅使这个函数更加简明,可读性也更高。

我们也可以把解构赋值传参和其它规则的参数一起使用:

arguments.callee_arguments.callee_arguments.callee

注意如果函数调用时,参数被省略掉,则会抛出错误,如下:

arguments.callee_arguments.callee_arguments.callee

当我们需要让参数都是必填时,这种方法能够得到我们想要的结果,但如果我们希望参数是可选的时候呢?想要让参数缺失时不会报错,我们就需要给默认参数设定一个默认值:

arguments.callee_arguments.callee_arguments.callee

上面这个函数中,需要解构赋值的参数有了一个默认值,这个默认值就是一个空对象。这时候,函数被调用时,即使没有传入参数,也不会报错了。

我们也可以给每个被解构的参数设定默认值,如下:

arguments.callee_arguments.callee_arguments.callee

在这个例子中,每个属性都有一个默认值,我们不需要手动去检查哪个参数值是 undefined ,然后在函数中给它设定默认值了。

浏览器对解构赋值的支持情况

桌面浏览器:

arguments.callee_arguments.callee_arguments.callee

移动端浏览器:

arguments.callee_arguments.callee_arguments.callee

参数传递

参数能通过引用或值传递给函数。修改按引用传递的参数,一般反映在全局中,而修改按值传递的参数,则只是反映在函数内部。

在像 Visual Basic 和 PowerShell 这样的语言中,我们可以选择是按引用还是按值来传递参数,但是在 JavaScript 中则不行。

按值传递参数

从技术上来讲,JavaScript 只允许按值传参。当我们给函数按值传递一个参数时,该函数的作用域内就已经复制了这个值。因此,这个值的改变,只会在函数内部反映出来。请思考下面这个列子:

arguments.callee_arguments.callee_arguments.callee

这里,修改函数里面的参数 a = ++a,是不会影响到原来a的值。 所以在函数外面打印 a 的值,输出仍然是 5。

按引用传递参数

在JavaScript中,一切都是按值传递的。但当我们给函数传一个变量,而这个变量所指向的是一个对象(包括数组)时,这个 变量 就是对象的一个引用。通过这个变量来改变对象的属性值,是会从根本上改变这个对象的。

来看下面这个例子:

arguments.callee_arguments.callee_arguments.callee

如你所见,对象的属性值在函数内部被修改了,被修改的值在函数外面也是可见的。

当我们传递一个没有初始值的参数时,如数组或对象,会隐形地创建了一个变量,这个变量指向记忆中原对象所在的位置。这个变量随后被传递给了函数,在函数内部对这个变量进行修改将会影响到原对象。

参数类型检测、参数缺失或参数多余

在强类型语言中,我们必须在函数声明中明确参数的类型,但是 JavaScript 没有这种特性。在JavaScript中,我们传递给函数的参数个数不限,也可以是任何类型的数据。

假设现在有一个函数,这个函数只接受一个参数。但是当函数被调用时,它本身没有限制传入的参数只能是一个,我们可以随意地传入一个、两个、甚至是更多。我们也可以什么都不传,这样都不会报错。

形参(arguments)和 实参(parameters)的个数不同有两种情况:

缺失的参数都会等同于 undefined。

多余的参数都将被忽略,但它们会以数组的形式保存于变量 arguments 中(下文会讨论到)。

必填参数

如果一个参数在函数调用时缺失了,它将被设为 undefined。基于这一点,我们可以在参数缺失时抛出一个错误:

arguments.callee_arguments.callee_arguments.callee

在 ES6 中,我们可以更好地利用这个特性,使用默认参数来设定必填参数:

arguments.callee_arguments.callee_arguments.callee

参数对象

为了取代参数对象,rest参数在 ECMAScript 4 中就已经得到支持,但是 ECMAScript 4 没有落实。随着 ECMAScript 6 版本的发布,JS 正式支持rest参数。它也拟定计划,准备抛弃 对参数对象 arguments object 的支持。

参数对象是一个类数组对象,可在一切函数内使用。它允许通过数字而不是名称,来找回被传递给函数的参数值。这个对象使得我们可以给函数传递任何参数。思考以下代码段:

arguments.callee_arguments.callee_arguments.callee

该函数预期接收一个参数。但是当我们给它传入两个参数并且调用它时,第一个参数通过名为 param1 的形参或者参数对象 arguments[0] 被函数所接受,而第二个参数只能被放在argument[1] 里面。此外,请注意,参数对象可以与命名参数一起使用。

参数对象给每个被传递给函数的参数提供了一个入口,并且第一个入口的下标从 0 开始。如果我们要给上面这个函数传递更多的参数,我们可以写 arguments[2],arguments[3] 等等。

我们甚至可以跳过设定命名参数这一步,直接使用参数对象:

arguments.callee_arguments.callee_arguments.callee

事实上,命名参数只是为了方便使用,并不是必须的。类似地,rest参数也可用于反映被传递的参数:

arguments.callee_arguments.callee_arguments.callee

参数对象是一个类数组的对象,只是它没有数组本身具备的方法,如slice() 和 foreach()。 如果要在参数对象中使用数组的方法,首先要把它转换成一个真正的数组。

arguments.callee_arguments.callee_arguments.callee

在该函数中,采用了 Array.prototype.slice.call() 来快速地把参数对象转换成一个数组。接着,在 sort() 方法中,为这个数组排序并且把它返回。

ES6 新增了更直接的方法,用 Array.from() 把任何类数组对象转换成数组:

arguments.callee_arguments.callee_arguments.callee

长度属性

尽管参数对象从技术上来讲,不算是一个数组,但仍有一个长度属性,来检测传递给函数的参数个数:

arguments.callee_arguments.callee_arguments.callee

通过 length 属性,我们可以更好地控制传递给函数的参数个数。举个例子,如果一个函数只要求两个参数,那么我们就可以使用 length 属性来检测所传入的参数个数,如果少于要求的个数,则抛出错误:

arguments.callee_arguments.callee_arguments.callee

rest参数是数组,所以他们都有 length 属性。 所以上面的代码,在ES6里面可以用rest参数写成下面这样:

arguments.callee_arguments.callee_arguments.callee

被调用属性与调用属性

被调用 属性指向当前正在执行的函数,而 调用 属性则指向那个调用了 当前正在执行的函数 的函数。 在ES5的严格模式下,这些属性是不被支持的,如果尝试使用它们,则会报错。

arguments.callee 这个属性在递归函数中很有用,尤其在匿名函数中。因为匿名函数没有名称,只能通过 arguments.callee 来指向它。

arguments.callee_arguments.callee_arguments.callee

严格模式和非严格模式下的参数对象

在ES5非严格模式下,参数对象 有个不一般的特性:它能使 自身的值 跟 与之相对应的命名参数的值 保持同步。

请看下面这个例子:

arguments.callee_arguments.callee_arguments.callee

在这个函数里面,arguments[0] 被重新赋值为 500。由于 arguments 的值总是和对应的命名参数保持同步,所以改变了arguments[0] 的值,也就相应的改变了 param 的值。实际上,他们就像是同一个变量,拥有两个不同的名字而已。而在 ES5严格模式下,参数对象的这种特性则被移除了。

arguments.callee_arguments.callee_arguments.callee

加上 严格模式, 现在改变 arguments[0] 的值是不会影响到 param 的值了,打印出来的值也跟预期的一致。 在 ES6中 该函数的输出跟在 ES5 严格模式下是一样的。需要记住的是,当函数声明中使用了默认值时,参数对象是不会受到影响的:

arguments.callee_arguments.callee_arguments.callee

在这个函数中,尽管 param3 有默认值 20,但是 arguments[2] 仍然是 undefined, 因为函数调用时只传了两个值。换言之,设定默认值对参数对象是没有任何影响的。

总结

ES6 给 JS 带来了上百个大大小小的改进。 越来越多的开发者正使用ES6的新特性, 所以我们都需要去了解它们。在本教程中,我们学习了ES6是如何改善JS的参数处理的,但我们仍只是知晓了ES6的皮毛。更多新的、有趣的特性值得我们去探讨。

关于本文

原文链接:

欢迎投稿到前端早读课

投稿邮箱:181422448@qq.com

限 时 特 惠: 本站每日持续更新海量各大内部创业教程,一年会员只需98元,全站资源免费下载 点击查看详情
站 长 微 信: lzxmw777

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注