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

pan_junbiao

于 2024-08-13 17:30:31 发布

阅读量109

点赞数 2

分类专栏： JavaScript 我の原创文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/pan_junbiao/article/details/141168406

版权

我の原创同时被 2 个专栏收录

482 篇文章 24 订阅

订阅专栏

JavaScript

33 篇文章 1 订阅

订阅专栏

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>

执行结果：

pan_junbiao

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
ECMAScript6语法：默认参数和rest参数

默认参数即在定义函数的参数列表中指定了默认值的参数。在 ES5 中，并没有提供在参数列表中指定参数默认值的语法，要想为函数的参数指定默认值，只能在函数体中实现。在 ES6 中，简化了为参数设置默认值的方法，可以直接在参数列表中设置参数的默认值。在 JavaScript 中，无论在定义函数时设置了多少个形参，在调用函数时都可以传入任意数量的实参，在函数内部可以使用 arguments 对象获取传入的实参。
复制链接

扫一扫