原文:JavaScript quirk 5: parameter handling
译者:zhmengqing
此文是 javascript 的 12 个怪癖(quirks) 系列的第五篇。
JavaScript 参数处理的基本原理很简单,高级的任务都需要手动操作。 本文首先关注其基本原理然后再行扩展。
1、参数处理的基本原理
JavaScript 的参数处理包括两个要点
1.1、要点:你可以传递任意数量的参数
当调用一个 function
时,你想传递多少参数都可以,这与该函数声明了多少个正式的参数无关。 缺失参数的值是undefined
,多出来的参数则直接被忽略掉。
我们用以下的函数做个示范:
function f(x, y) {
console.log('x: '+x);
console.log('y: '+y);
}
你可以用任意数量的参数调用这个 function
:
> f()
x: undefined
y: undefined
> f('a')
x: a
y: undefined
> f('a', 'b')
x: a
y: b
> f('a', 'b', 'c')
x: a
y: b
1.2要点:所有传递的参数都储存在 arguments 中
所有传递的参数都储存在一个很特别、很像 Array
(继续看就能知道为什么了)的变量里,arguments
。 通过下面的function
我们来看下这个变量怎么用的:
function g() {
console.log('Length: '+arguments.length);
console.log('Elements: '+fromArray(arguments));
}
下面是 fromArray
函数,它把 arguments
转换成 array
这样就能存入数据了,调用 g()
:
> g()
Length: 0
Elements:
> g('a')
Length: 1
Elements: a
> g('a', 'b')
Length: 2
Elements: a,b
无论明确声明了多少个参数,arguments
是永远在那里的,它总是包含所有实际的参数。
2、参数传递了吗?
如果调用者没有提供参数,那么 undefined
就会传递给 function
。 因为 undefined
是一个虚拟值[1],你可以用一个 if
条件语句来检验它是否存在:
function hasParameter(param) {
if (param) {
return 'yes';
} else {
return 'no';
}
}
这样,你不传参数与传入 undefined
获得的结果是一样的:
'no'
> hasParameter(undefined)
'no'
测试代码对真实值(truthy)同样有效:
> hasParameter([ 'a', 'b' ])
'yes'
> hasParameter({ name: 'Jane' })
'yes'
> hasParameter('Hello')
'yes'
而对于虚拟值(falsy)的会用是需要多加小心的。 比如 false
、0
以及空字符串都被解析为缺失参数:
> hasParameter(false)
'no'
> hasParameter(0)
'no'
> hasParameter('')
'no'
这段代码足以证明。 你必须要多加注意,因为代码变得更加紧凑与调用者是否忽略了一个参数还是传递了 undefined
或者null
都无关。
3、参数的默认值
以下的 function
可以传入 0
或者其他参数,x
和 y
如果未传参数则会是 0
,以下是一种表现方式:
function add(x, y) {
if (!x) x = 0;
if (!y) y = 0;
return x + y;
}
交互后:
> add()
0
> add(5)
5
> add(2, 7)
9
你可以用 or
运算符(||)使 add()
更简洁。 如果为真这个运算符会返回第一个值否则返回第二个。
例如:
> 'abc' || 'def'
'abc'
> '' || 'def'
'def'
> undefined || { foo: 123 }
{ foo: 123 }
> { foo: 123 } || 'def'
{ foo: 123 }
我们用 ||
来指定参数默认值:
function add(x, y) {
x = x || 0;
y = y || 0;
return x + y;
}
4、任意数量的参数
你也可以用 arguments
来接收任意数量的参数,其中一个例子是以下的函数 format()
,它在 C 函数 sprintf
之后输出语句:
> format('Hello %s! You have %s new message(s).', 'Jane', 5)
'Hello Jane! You have 5 new message(s).'
第一个参数是一个样式,由 %s
标记空白,后面的参数则填入这些标记,简单的 format
函数实现如下:
function format(pattern) {
for(var i=1; i < arguments.length; i++) {
pattern = pattern.replace('%s', arguments[i]);
}
return pattern;
}
注意:循环跳过了第一个参数(arguments[0]
) 并且忽略了 pattern
。
5、强制执行一定数量的参数
如果你想要强制调用者执行一定数量的参数,你就要在运行阶段检查 arguments.length
:
function add(x, y) {
if (arguments.length > 2) {
throw new Error('Need at most 2 parameters');
}
return x + y;
}
6、arguments 不是 array
arguments
并不是 array
,它只是很像 array
,你可以获取第 i
个参数比如 arguments[i]
, 你也可以检查它有多少个参数比如 arguments.length
。 但是你不能用 Array
的方法如 forEach
或者 indexOf
。 更多详情与解答会在「怪癖8(未翻译)」中进行讨论,作为一个预习,以下函数能将一个类似 array
的值转换为 array
:
function fromArray(arrayLikeValue) {
return Array.prototype.slice.call(arrayLikeValue);
}
7、参考
[1] JavaScript quirk 1: implicit conversion of values [解释了“真实值(truthy)”与“虚拟值(falsy)”]
相关推荐
javaScript异常处理文档,当遇到JavaScript等异常问题时可翻阅本文档寻找答案
JavaScript凌厉开发:Ext详解与实践(下).pdf
二阶段:JavaScript程序设计二阶段:JavaScript程序设计二阶段:JavaScript程序设计二阶段:JavaScript程序设计二阶段:JavaScript程序设计二阶段:JavaScript程序设计二阶段:JavaScript程序设计二阶段:JavaScript...
遇到上述错误情况时,JavaScript引擎会抛出一个错误对象,我们可以利用try…catch语句来捕获错误对象,进而进行后续处理,我们刚才的代码稍作改动。 6.5.1 错误处理 示例 改进后的代码运行时,错误仍然发生了,但是...
JavaScript程序设计课件:第 5 章 事件和事件处理.ppt
微软的JavaScript调试工具:Script Debugger 这是英文版,中文版在实际运行过程中,无法捕捉异常,所以不怎么好用。
外部的数据通过参数传入函数内部进行处理,同时函数内部的数据也可以通过参数传到外界。 函数定义时圆括号里的参数称为形式参数,调用函数时传递的参数称为实际参数。 5.2.3 函数的参数 2、参数设置 无参函数:适用...
中文名: JavaScript权威指南 (第6版) 原名: JavaScript: The Definitive Guide: Activate Your Web Pages, 6th edition 作者: David Flanagan 版本: 英文文字版-pdf/EPUB + 完整书中源代码 出版社: O'Reilly 书号: ...
主要介绍了JavaScript函数参数使用带参数名的方式赋值传入的方法,实例分析了javascript函数传递参数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十五:事件处理。源码txt格式。
DHTML&javascript 使用手册 ... DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 ... ...微软允许用户自行设置对JavaScript处理模式。 JavaScript与Java、VBScript、JScript的关系: ...
Chapter 5: Objects Chapter 6: The Document Object Model Chapter 7: Events Chapter 8: Forms Chapter 9: The Window Object Chapter 10: Testing and Debugging Chapter 11: Further Functions Chapter 12: ...
Javascript_事件处理,讲解了JAVASCRIPT事件开发中注意的事项,步骤,有条理的讲解
资源名称:Javascript完全学习手册内容简介:本书分4篇14章,介绍Javascript的知识,全书内容包括:Javascript语法基础、流程控制、函数、内置对象编程、文档对象模型DOM与事件驱动、处理XML、...
这是一个JavaScript获取浏览器参数的方法,
Chapter 5: Javascript-An Object-Based Language Chapter 6: String Manipulation Chapter 7: Date, Time, And Timers Chapter 8: Programming The Browser Chapter 9: Dom Scripting Chapter 10: Events Chapter ...
《计算机操作系统》课程设计:实现处理机调度模块功能。包含二级调度,作业调度采用先来先服务策略,进程调度采用时间片轮转调度算法,资源分配采用银行家算法,JavaScript 实现.zip 《计算机操作系统》课程设计:...
HTML5 and JavaScript Presentation and Behavior (CSS and Event Handling) Common Uses of JavaScript: Image and Windows JavaScript and User Integration: Navigation and Forms Back-End Interaction with ...
深入理解JavaScript系列(5):强大的原型和原型链 深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP 深入理解JavaScript系列(7):S.O.L.I.D五大原则之开闭原则OCP 深入理解JavaScript系列(8):...