当前位置：首页 > news >正文

ECMAScript6语法：默认参数和rest参数

news 来源：原创 2024/9/19 13:36:43

1、默认参数

默认参数即在定义函数的参数列表中指定了默认值的参数。在 ES5 中，并没有提供在参数列表中指定参数默认值的语法，要想为函数的参数指定默认值，只能在函数体中实现，示例代码如下：

function table(width, height, rows, cols){width = width || 300;height = height || 200;rows = rows || 6;cols = cols || 3;
}

在 ES6 中，简化了为参数设置默认值的方法，可以直接在参数列表中设置参数的默认值，示例代码如下：

function table(width=300, height=200, rows=6, cols=3){//函数体
}

在调用 table() 函数时，如果没有传递实参，则使用4个参数的默认值；如果传递了一个实参，则使用后3个参数的默认值；如果传递了4个实参，则不使用默认值。

2、rest 参数

在 JavaScript 中，无论在定义函数时设置了多少个形参，在调用函数时都可以传入任意数量的实参，在函数内部可以使用 arguments 对象获取传入的实参。

【实例】定义一个获取最大值的函数。

function compare(){let maxValue = 0;for(let i = 0; i < arguments.length; i++){if(arguments[i] > maxValue){maxValue = arguments[i];}}return maxValue;
}
document.write(compare(3,7,6,9,2,5)); //输出结果：9

在 ES6 中引入了 rest 参数，在函数的形参前添加3个点，就表示这是一个 rest 参数。例如，将上述代码修改为使用 rest 参数的形式，代码如下：

function compare(...args){let maxValue = 0;for(let i = 0; i < args.length; i++){if(args[i] > maxValue){maxValue = args[i];}}return maxValue;
}
document.write(compare(3,7,6,9,2,5)); //输出结果：9

在定义函数时设置的参数列表中，普通参数和 rest 参数可以同时存在。如果既有普通参数也有 rest 参数，那么 rest 参数必须放到参数列表的最后面的位置。

【实例】定义一个获取个人信息的函数，在参数列表中即有普通参数也有 rest 参数，通过调用函数来获取个人信息。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取个人信息</title>
</head>
<body>
</body>
<script type="text/javascript">function person(name, sex, ...interest) {let info = "";info += "姓名：" + name;info += "<br>性别：" + sex;info += "<br>兴趣爱好：";//遍历rest参数for (let i = 0; i < interest.length; i++) {info += interest[i] + " ";}return info;//返回个人信息}document.write(person("Tony", "男", "看书", "运动", "听音乐"));
</script></html>

执行结果：