原文地址:how-to-use-arguments-and-parameters-in-ecmascript-6

ES6是最新版本的ECMAScript标准,而且显著的改善了JS里的参数处理。我们现在可以在函数里使用rest参数、默认值,结构赋值,等等语法

在这个教程里,我们将会仔细的探索实参和形参,看看ES6是如何升级他们的。

实参和形参

arguments 和 parameters经常被混为一谈,为了这个教程我们还是做一个2者的区分。在大多数标准中,parameters是我们定义函数时设置的名字(形参),arguments (或者是实参)是我们传入函数的参数,看下如下的函数

function foo(param1, param2) {
// do something
}
foo(10, 20);

在这个函数里,param1 和 param2 是函数的形参,而我们传入函数的值10,20是实参

扩展运算符

在ES5里,apply方法接收一个数组,并且把把数组的每一项作为函数的参数传入函数里。比如,我们经常用到 Math.max 方法,来找到一个数组里最大的那个值。

var myArray = [5, 10, 50];
Math.max(myArray); // Error: NaN
Math.max.apply(Math, myArray); // 50

Math.max 方法并不接收数组类型的参数,它只接收数值类型的参数。当使用 Array 类型的参数传入时,会抛出一个异常。但是当我们使用 apply 方法来调用 Math.max 方法时,数组会被拆开为一个个独立的数值传入函数里,这样就能顺利的使用 Math.max

幸运的是在ES6里,我们有扩展运算符,我们不再需要使用 apply 方法来拆分数组的每一项了。通过扩展运算符,我们可以把数组的每一项分开,

var myArray = [5, 10, 50];
Math.max(...myArray); // 50

我们把 myArray 拆为一个个单独的值,然后再传入函数里。扩展运算符不仅好用,而且还有更多功能。比如他可以在函数调用时使用多次。

function myFunction() {
for(var i in arguments){
console.log(arguments[i]);
}
}
var params = [10, 15];
myFunction(5, ...params, 20, ...[25]); // 5 10 15 20 25

另一个扩展运算符的好处是:可以方便的在构造函数里使用

new Date(...[2016, 5, 6]);    // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

当然,我们用ES5的语法也可以干同样的事,但是ES6更简单

new Date.apply(null, [2016, 4, 24]);    // TypeError: Date.apply is not a constructor
new (Function.prototype.bind.apply(Date, [null].concat([2016, 5, 6]))); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

剩余参数

rest参数的语法和展开运算符一样的,但是和展开运算符不一样的是:展开运算符是展示数组的每一项变为参数,rest参数是把多个参数变为一个数组。

function myFunction(...options) {
return options;
}
myFunction('a', 'b', 'c'); // ["a", "b", "c"]

如果没有传参,rest参数会变为一个空数组

function myFunction(...options) {
return options;
}
myFunction(); // []

rest参数在创建可变参数函数是尤其有用(一个函数可以接收多个、不固定的参数)。因为 rest parameter,可以方便替换函数里的 arguments 对象,看看如下用ES5书写的函数。

function checkSubstrings(string) {
for (var i = 1; i < arguments.length; i++) {
if (string.indexOf(arguments[i]) === -1) {
return false;
}
}
return true;
}
checkSubstrings('this is a string', 'is', 'this'); // true

这个函数是用来检测多个字符串是否在一个字符串内。这个函数有两个问题,第一个问题是为了知道参数的意义我们不得不去查看代码,第二个是,参数的遍历是从 arguments 的1开始,因为 arguments[0] 代表的是第一个参数。如果我们后续打算在第一个参数后再加一个参数,那么这段逻辑就有问题了。

function checkSubstrings(string, ...keys) {
for (var key of keys) {
if (string.indexOf(key) === -1) {
return false;
}
}
return true;
}
checkSubstrings('this is a string', 'is', 'this'); // true

这个函数的输出和上一个是一直的。参数string是第一个值,剩下的参数都赋值给 keys 数组了

使用rest参数来替代arguments提高了代码的阅读性,而且避免了一些由于arguments带来的性能问题。当然rest参数也有局限性,它必须定义为最后的参数,否则会产生语法错误。

function logArguments(a, ...params, b) {
console.log(a, params, b);
}
logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter

另外的一个局限是rest参数只能在函数里定义一次。

function logArguments(...param1, ...param2) {
}
logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter

参数的默认值

ES5里的参数默认值

js在ES5版本里不支持默认值,但是有一个解决方案,在函数里使用或操作符来hack这个。我们可以在ES5里模拟默认值。

function foo(param1, param2) {
param1 = param1 || 10;
param2 = param2 || 10;
console.log(param1, param2);
}
foo(5, 5); // 5 5
foo(5); // 5 10
foo(); // 10 10

这个函数期望2个参数,但是当没有参数传入时,将会使用默认值。在函数里,缺失的实参将会被设置为 undefined。所以我们可以检测实参是否为 undefined ,并且设置默认值。检测和设置实参时,我们用逻辑操作符||,这个操作符检测第一个参数,如果是存在的则返回这个值,否则的会返回第二个参数

这个方法是很常用的,但是它有缺陷,比如当参数的值为0或者nul时,会导致第二个参数的返回。所以当我们要传入0或者null时,我们还需要检测这个参数是否真正的没传入。

function foo(param1, param2) {
if(param1 === undefined){
param1 = 10;
}
if(param2 === undefined){
param2 = 10;
}
console.log(param1, param2);
}
foo(0, null); // 0, null
foo(); // 10, 10

在这个函数里,为了防止默认值被设置,先检测参数的类型是否为undefined,这个方法需要大量的代码。但是它还是很安全的。

ES6里的默认值

在ES6里的,我们不再需要检测参数是否为 undefined,然后来模拟默认值。我们在函数定义时就可以使用默认值。

function foo(a = 10, b = 10) {
console.log(a, b);
}
foo(5); // 5 10
foo(0, null); // 0 null

正如你看到的,没有传值时参数被设置了默认值,即使设置了0和null也不会触发默认的。我们甚至可以把函数作为默认值设置到函数的定义里。

function getParam() {
alert("getParam was called");
return 3;
}
function multiply(param1, param2 = getParam()) {
return param1 * param2;
}
multiply(2, 5); // 10
multiply(2); // 6 (also displays an alert dialog)

注意到 getParam 函数只有在缺少第二个参数时才会被调用。当我们传入2个参数时,alert并不会被执行。

另一个有趣的特性是,默认值在同一个函数里相互引用。

function myFunction(a=10, b=a) {
console.log('a = ' + a + '; b = ' + b);
}
myFunction(); // a=10; b=10
myFunction(22); // a=22; b=22
myFunction(2, 4); // a=2; b=4

我们甚至可以在函数定义时执行操作符。

function myFunction(a, b = ++a, c = a*b) {
console.log(c);
}
myFunction(5); // 36

注意:和别的语言不一样,JS执行默认值在执行时。

function add(value, array = []) {
array.push(value);
return array;
}
add(5); // [5]
add(6); // [6], not [5, 6]

结构赋值

结构赋值是ES6的一个新特性,通过它你可以把数组、对象的每一项变为形参,类似对象和数组的迭代器。这个语法很干净而且很好理解,而且非常好用。

在ES5里,一个具有配置信息的对象经常被用来处理大量数据。

function initiateTransfer(options) {
var protocol = options.protocol,
port = options.port,
delay = options.delay,
retries = options.retries,
timeout = options.timeout,
log = options.log;
// code to initiate transfer
}
options = {
protocol: 'http',
port: 800,
delay: 150,
retries: 10,
timeout: 500,
log: true
};
initiateTransfer(options);

这个模式经常被JS开发者所使用,而且它非常管用,但是当我们想参数的定义时,我们就必须查看函数的源码了。但是通过结构赋值,我们可以清晰的在函数里表明参数定义。

function initiateTransfer({protocol, port, delay, retries, timeout, log}) {
// code to initiate transfer
};
var options = {
protocol: 'http',
port: 800,
delay: 150,
retries: 10,
timeout: 500,
log: true
}
initiateTransfer(options);

在这个函数里的,我们使用结构赋值模式来代替配置对象。这不仅让我们的函数清晰,而且还易读。

我们还可以将普通的参数定义和结构赋值一起使用。

function initiateTransfer(param1, {protocol, port, delay, retries, timeout, log}) {
// code to initiate transfer
}
initiateTransfer('some value', options);

但是,如果没有传出,将会报出一个错误。

function initiateTransfer({protocol, port, delay, retries, timeout, log}) {
// code to initiate transfer
}
initiateTransfer(); // TypeError: Cannot match against 'undefined' or 'null'

使用了结构赋值语法,在调用函数时就必须要赋值,但是如果我们想让这个参数变为可选项怎么办?为了方式没有传参是抛出的错误,我们使用默认值语法。

function initiateTransfer({protocol, port, delay, retries, timeout, log} = {}) {
// code to initiate transfer
}
initiateTransfer(); // no error

在这个函数里,一个空的对象被设置为参数的默认值。现在,如果在函数调用时没有传值将会有默认值被赋予,从而避免了报错的发生。

我们甚至可以为结构赋值里的每一项设置一个默认值

function initiateTransfer({
protocol = 'http',
port = 800,
delay = 150,
retries = 10,
timeout = 500,
log = true
}) {
// code to initiate transfer
}

在这个实例里,每一个属性都一个默认值。消除人工判断赋值的过程。

传参

参数的传递有个2种方式:引用传参值传参

在别的语言里,例如VB,PowerShell,我们有选项来指定参数的类型,引用传参还是值传参。但是在JS里没有这个功能。

值传参

技术上,JS可以只能按值传参。当我们传入函数一个值是,我们复制一份值,在函数的作用域里。从而,这个值的变化只是在函数体内完成。

var a = 5;
function increment(a) {
a = ++a;
console.log(a);
}
increment(a); // 6
console.log(a); // 5

这里,在函数体内改变这个值,并不会对值的原本值有影响。那么,当这个值外部所使用时,输出的还是5

引用传参

在JavaScript中,一切都按值传递,但是当我们传递了一个指向对象的引用时,这个是指向这个对象的地址。改变这个值的指向的对象属性,就真的改变这个对象。

function foo(param){
param.bar = 'new value';
}
obj = {
bar : 'value'
}
console.log(obj.bar); // value
foo(obj);
console.log(obj.bar); // new value

正如你看到的,在函数里对象的属性被改变了,而且这个改变的值也影响到了函数之外。

类型检测,参数的缺失和多余传入

在强类型语言里,我们可以通过函数的定义来指定参数的类型,但是在JS里是缺乏这种机制的,在JS里,无论你的传入何种类型的参数,多少个参数都是可以的。

假设我们有一个函数,我们希望它只能接收一个参数,当我们调用这个函数时,我们没有办法限制只传入一个函数,我们可以传一个、两个,或者多个。我们甚至可以一个参数都不传入,而且调用时不会有个报错。

实参和形参的数量可以这样比较

  • 实参少于形参

    形参会被赋值为undefined

  • 实参多于形参

    多传入的参数会被忽略,但是可以通过类数组对象argument获取到

强制参数

当调用函数时缺少实参,那么参数会被设置为undefined,我们可以针对这种抛出一个错误

function foo(mandatory, optional) {
if (mandatory === undefined) {
throw new Error('Missing parameter: mandatory');
}
}

在ES6里,我们可以使用默认值来进一步优化这个场景。

function throwError() {
throw new Error('Missing parameter');
}
function foo(param1 = throwError(), param2 = throwError()) {
// do something
}
foo(10, 20); // ok
foo(10); // Error: missing parameter

arguments对象

ES4标准里就对rest参数进行了支持,目的就是用来替代arguments,但是ES4标准没有被实现。通过ES6标准的发布,JS现在官方的支持了rest参数。并且计划机制支持arguments对象的实现。

arguments对象是一个类数组的对象。在所有的函数里都有这个对象。你可以通过arguments的脚标来获取传入函数的实参。

function checkParams(param1) {
console.log(param1); // 2
console.log(arguments[0], arguments[1]); // 2 3
console.log(param1 + arguments[0]); // 2 + 2
}
checkParams(2, 3);

这个函数本来希望只接收一个参数,但是我们也可以传入2个参数。第一个参数可以通过param1形参获取到,或者使用arguments[0]的形式。但是第二个参数只能通过arguments[1]的方式获取到了。arguments获取实参的方式可以和形参一起使用。

arguments对象包含了传入函数的每一个实参,第一个实参从arguments的第一位开始。如果我们想获得后面的值,则可以通过角标方式读取,比如 arguments[2]arguments[3]等等。

function checkParams() {
console.log(arguments[1], arguments[0], arguments[2]);
}
checkParams(2, 4, 6); // 4 2 6

事实上,形参方便,但是不是必须的。同样的rest参数可以反射出传入实参。

function checkParams(...params) {
console.log(params[1], params[0], params[2]); // 4 2 6
console.log(arguments[1], arguments[0], arguments[2]); // 4 2 6
}
checkParams(2, 4, 6);

arguments 对象是一个类数组对象,但是缺少了数组的方法。例如slice,foreach。为了使用数组的特性,我们可以把 arguments 转为一个真正的数组。

function sort() {
var a = Array.prototype.slice.call(arguments);
return a.sort();
}
sort(40, 20, 50, 30); // [20, 30, 40, 50]

在这个函数里,Array.prototype.slice.call() 可以快速的把arguments转为一个数组,接下来sort方法就可以使用了。

ES6甚至有一个Array.from方法,可以使用类数组对象创建一个新数组。

function sort() {
var a = Array.from(arguments);
return a.sort();
}
sort(40, 20, 50, 30); // [20, 30, 40, 50]

arguments的长度属性

尽管arguments对象不是严格意义上的数组,但是它有length属性。通过length属性你可以用来检测传入函数的实参个数。

function countArguments() {
console.log(arguments.length);
}
countArguments(); // 0
countArguments(10, null, "string"); // 3

通过length属性,我们可以很好的控制传入函数参数的个数。如果一个函数只接收2个参数。那么我们可以检测length的大小来控制是否合法调用。

function foo(param1, param2) {
if (arguments.length < 2) {
throw new Error("This function expects at least two arguments");
} else if (arguments.length === 2) {
// do something
}
}

rest参数是一个数组,所以它有length属性。之前的代码在ES6标准下可以这样写:

function foo(...params) {
if (params.length < 2) {
throw new Error("This function expects at least two arguments");
} else if (params.length === 2) {
// do something
}
}

callee和caller属性

callee 属性是指向正在执行的函数,caller 指向当前执行函数的调用体函数。在ES5的严格模式下,这些属性都是被禁止的,如果你试图获取他们的话,会抛出一个错误。

arguments.callee 属性在递归时非常有用,尤其当函数是一个匿名函数时。因为匿名函数没有名字,这时你只有通过 arguments.callee 来获取。

var result = (function(n) {
if (n <= 1) {
return 1;
} else {
return n * arguments.callee(n - 1);
}
})(4); // 24

严格和非严格模式下的Arguments对象

在ES5的严格模式下,arguments 对象有一个不常用的特性,它的值和形参的值是保持同步的。

function foo(param) {
console.log(param === arguments[0]); // true
arguments[0] = 500;
console.log(param === arguments[0]); // true
return param
}
foo(200); // 500

在这个函数里,一个新的值被赋予了arguments[0] ,由于同步的原因,param 参数的值也变化了。事实上他们的这种行为更像,两个不同名字的参数,指向同一个值。在ES5的严格模式下,这个令人困惑的行为被移除了。

"use strict";
function foo(param) {
console.log(param === arguments[0]); // true
arguments[0] = 500;
console.log(param === arguments[0]); // false
return param
}
foo(200); // 200

在这种情况下,改变arguments[0]的值,并不会影响param参数的值,并且输出结果和我们想象的一致。在ES6下输出的值和ES5严格模式一致,记住一点:当设置了函数参数的默认值时,arguments的值并不会受到影响。

function foo(param1, param2 = 10, param3 = 20) {
console.log(param1 === arguments[0]); // true
console.log(param2 === arguments[1]); // true
console.log(param3 === arguments[2]); // false
console.log(arguments[2]); // undefined
console.log(param3); // 20
}
foo('string1', 'string2');

在这个函数里,即使 param3 被设置了默认值,但它的值和 arguments[2] 也不一样,因为在调用函数时只有2个参数被传入。换句话说,设置默认值并不会改变 arguments 对象。

总结

ES6给JS带来了几百个大大小小的改进,越来越多的程序员正在使用这些新特性,而且这些新特性也会变得不可或缺了。在这个教程中,我们学习了ES6是如何升级了参数处理,但是我们只是才划开了ES6的面纱。还有更多的新功能值得我们探索。

在ES6中如何优雅的使用Arguments和Parameters的更多相关文章

  1. 【译】在ES6中如何优雅的使用Arguments和Parameters

    原文地址:how-to-use-arguments-and-parameters-in-ecmascript-6 ES6是最新版本的ECMAScript标准,而且显著的改善了JS里的参数处理.我们现在 ...

  2. ES6中Arguments和Parameters用法解析

    原文链接 译文 ECMAScript 6 (也称 ECMAScript 2015) 是ECMAScript 标准的最新版本,显著地完善了JS中参数的处理方式.除了其它新特性外,我们还可以使用rest参 ...

  3. ES6中的模板字符串和新XSS Payload

    ES6中的模板字符串和新XSS Payload 众所周知,在XSS的实战对抗中,由于防守方经常会采用各种各样严格的过滤手段来过滤输入,所以我们使用的XSS Payload也会根据实际情况作出各种各样的 ...

  4. ES6中的Class

    对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重 ...

  5. ES5和ES6中对于继承的实现方法

    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

  6. ES6中的类

    前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScri ...

  7. ES6中的模块

    前面的话 JS用"共享一切"的方法加载代码,这是该语言中最容出错且容易令人感到困惑的地方.其他语言使用诸如包这样的概念来定义代码作用域,但在ES6以前,在应用程序的每一个JS中定义 ...

  8. ES6中函数新增的方式方法

    ---恢复内容开始---   绪 言 ES6 大家对JavaScript中的函数都不陌生.今天我就为大家带来ES6中关于函数的一些扩展方式和方法. 1.1函数形参的默认值 1.1.1基本用法 ES6 ...

  9. es6中一些基本的使用方法

    es6中一些基本的使用方法 const 定义常量 let 块级变量 用let定义的变量只在块当中起作用,离开变量外界的块(括号)就会被销毁. 模板字面量 用于字符串拼接和写模板,使用 ` (反引号,左 ...

随机推荐

  1. kafka补充

     

  2. 禅道与bugfree区别

    bugfree更偏重bug管理, 禅道是以项目管理为目标, 所以出发点不一样. 我们bug追踪管理使用bugfree,项目管理计划使用禅道,配置管理使用svn bugfree很low,安装需要环境特别 ...

  3. 【实战】JBOSS反序列化Getshell

    一.JBOSS4.0.5_GA,5.x,6.x 需要JavaDeserH2HC(https://github.com/joaomatosf/JavaDeserH2HC) 操作起来 javac -cp ...

  4. wusir FTP与HTTP文件传输之TCP Packet解析

    向服务器传输文件(上传或下载)时,FTP与HTTP是两种最常用的应用层协议,这两个协议都是基于TCP协议之上.如果深入到数据包内(Packet)进行查看时,FTP与HTTP进行文件传输时有什么特征代码 ...

  5. java容器类1:Collection,List,ArrayList,LinkedList深入解读

    1. Iterable 与 Iterator Iterable 是个接口,实现此接口使集合对象可以通过迭代器遍历自身元素. public interface Iterable<T> 修饰符 ...

  6. 【Markdown】Markdown相关问题

    1.显示多行代码 将代码用一个tab缩进或者四个空格缩进

  7. mysql-常用注入渗透手法

    mysql: 内置函数常用函数:left(), mid(), ord(),  length(), benchmark(),load_file(), outfile(), concat(), 系统重要信 ...

  8. centOS 7下无法启动网络(service network start)错误解决办法(应该是最全的了。。。)

    今天在centOS 7下更改完静态ip后发现network服务重启不了,翻遍了网络,尝试了各种方法,终于解决了. 现把各种解决方法归纳整理,希望能让后面的同学少走点歪路... 首先看问题:执行serv ...

  9. Python制作回合制手游外挂简单教程(中)

    接着上篇的博文,今天我们讲如何实现自动组队刷道 引入: 自动组队刷道的流程是先点击刷道按钮.再点击前往按钮.再点击便捷组队······ 这些操作上篇博文已经告诉我们怎么做了,利用picpick丈量坐标 ...

  10. ASP.NET MVC Core的TagHelper(基础篇)

    TagHelper又是一个新的名词,它替代了自之前MVC版本的HtmlHelper,专注于在cshmlt中辅助生成html标记. 通过使用自定义的TagHelper可以提供自定义的Html属性或元素, ...