`

JavaScript 的怪癖 5:参数的处理

 
阅读更多

原文: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)的会用是需要多加小心的。 比如 false0 以及空字符串都被解析为缺失参数:

> 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)”]

14
0
分享到:
评论

相关推荐

    javaScript获取浏览器参数

    ### JavaScript 获取浏览器参数知识点详解 在Web开发过程中,经常需要从URL中提取查询字符串中的参数。这些参数可以用于用户身份验证、页面个性化等用途。本文将详细介绍如何利用JavaScript来实现这一功能。 #### ...

    [JavaScript权威指南(第6版)].(JavaScript:The.Definitive.Guide).David.Flanagan.文字版.pdf

    - **函数**: 函数是JavaScript中的第一类公民,可以作为参数传递,也可以从其他函数返回。 - **客户端JavaScript**: 主要在Web浏览器中执行的JavaScript代码,用于实现动态网页效果。 - **DOM操作**: DOM(Document...

    qt 调用javascript函数 带参数

    5. **接收JavaScript的返回值** 要从JavaScript获取返回值,可以重写`QWebFrame`的`javaScriptWindowObjectCleared()`信号,将一个C++对象暴露给JavaScript,然后在JavaScript中调用该对象的方法并将结果返回。例如...

    javascript处理json字符串和json对象的类(含示例)

    下面我们将详细讨论如何在JavaScript中处理JSON字符串和JSON对象。 一、JSON字符串转换为JSON对象 在JavaScript中,可以使用`JSON.parse()`方法将一个JSON格式的字符串转换为JavaScript对象。这个方法接收一个JSON...

    [JavaScript进阶]Professional JavaScript for Web Developers(3rd)

    5. 引用类型(Chapter 5: Reference Types):讲解了JavaScript中的引用类型数据,如对象、数组和函数等,以及如何通过引用类型操作数据。 6. 面向对象编程(Chapter 6: Object-Oriented Programming):涵盖了...

    JavaScript获取链接url参数并生成对象

    理解如何高效地处理URL参数是每个JavaScript开发者必备的技能之一。通过将参数转换为对象,我们可以利用JavaScript的对象特性,如属性访问、遍历和方法调用来操作这些参数,使得代码更简洁、易读。 标签"URL参数...

    JavaScript产品参数对比功能

    6. **错误处理**:为了提供良好的用户体验,应处理可能出现的错误,比如无产品选择、参数不全等情况,给出相应的提示。 7. **性能优化**:如果产品数量很大,要考虑性能问题。可以使用虚拟DOM或分页策略来减少内存...

    javascript中onclick(this)用法介绍

    本文将详细介绍JavaScript中一种常见的事件处理用法——onclick(this)。 首先,我们需要理解什么是onclick事件处理器。在HTML中,onclick是一个事件属性,用于指定当元素被点击时将调用的JavaScript代码。这个属性...

    有关JavaScript的10个怪癖和秘密分享

    在实际开发中,了解和掌握这些怪癖和秘密可以帮助开发者写出更加符合预期的JavaScript代码,避免一些常见的错误和疑惑。对于学习和应用JavaScript的朋友们,理解这些特点对于提高代码质量、解决bug和优化性能具有...

    JavaScript_Project:我的网站项目

    15. **错误处理**:良好的错误处理是稳健代码的关键,JavaScript的try...catch结构和Error对象可以帮助捕获和处理运行时错误。 在这个"JavaScript_Project"中,我们可以预期找到使用上述技术实现的网页交互功能、...

    用JavaScript写的PS图象处理软件脚本。用于图像处理自动化

    6. **函数与参数**:编写可复用的函数,接受参数以定制处理方式,使脚本更具灵活性。 7. **错误处理**:良好的错误处理机制可以确保即使在处理过程中出现问题,脚本也能优雅地终止,而不是完全崩溃。 8. **批处理...

    javascript

    1.jQuery:是一个轻量级的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。它提供了一种更简洁的API,使得开发者能更高效地编写JavaScript代码。 2.ExtJS:基于JavaScript和HTML,提供了一整套企业级的用户...

    JavaScript高阶第二天.xmind

    2.apply():参数以数组形式传递,会立即调用函数执行 3.bind():参数以逗号分隔,需要手动调用 4.call()的使用场景:数据类型判断 Object.prototype.toString.call(); 5.apply()的使用场景:求最值 Math.max() ...

    javascript_examples:javascript 示例和片段文件

    函数可以有参数,返回值,也可以作为参数传递或作为其他函数的返回值。 4. 对象与原型链: 对象是键值对的集合,可以通过花括号{}创建。原型链是JavaScript实现继承的方式,每个对象都有一个proto属性指向其构造...

    JS调用后台带参数的方法

    2. **POST方法**:参数放在请求体中,适用于需要发送大量数据或者安全性要求较高的场景。 3. **AJAX**:通过JavaScript发起异步请求,可以在不刷新页面的情况下与服务器通信,并且可以灵活地控制请求的方式、类型等...

    Advanced-JavaScript-Functions:JavaScript功能(Avançado)

    5. **函数默认参数(Default Parameters)** 在ES6中,可以为函数参数设置默认值,如果调用函数时不传入该参数,就会使用默认值。这简化了函数的编写,避免了空值检查。 6. **剩余参数(Rest Parameters)** 剩余...

    JavaScript程序设计ES之剩余参数rest参数共2

    在传统的JavaScript中,如果我们想处理不确定数量的参数,通常会使用数组来存储这些参数。例如: ```javascript function sum() { var args = Array.prototype.slice.call(arguments); var result = 0; for (var...

    javascript实例自学手册:486个实例电子版(包括例子)

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责实现客户端的交互效果,增强用户界面。作为“javascript实例自学手册”的一部分,这个压缩包包含486个实例,旨在帮助初学者通过实践来理解和...

    javascript-cheatsheet:了解JavaScript的基本术语,概念和语法

    第2页:函数-参数,调用,参数,返回等。 第3页:围绕变量和范围的词汇 , 第4页:运算符和强制 , 第5页:条件语句(如果/开关/三进制)+ Truthy Falsy , PDF 第6页:循环-对于,同时,同时执行PNG , PDF ...

    declare:明确声明Javascript函数中的参数类型

    在Javascript中,声明函数时,不能对其参数类型进行任何限制。 在执行过程中,您始终必须手动检查参数的类型。 这意味着您可以使用任何类型的参数调用相同的函数。 这可能会导致无法预料的行为。 例如,根据其参数...

Global site tag (gtag.js) - Google Analytics