ECMAScript_6新特性学习-----函数参数默认值和rest参数和扩展运算符

ES6函数特性：默认参数、rest参数与扩展运算符详解

最新推荐文章于 2025-11-30 22:19:10 发布

原创最新推荐文章于 2025-11-30 22:19:10 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

ECMAScript_6新特性专栏收录该内容

10 篇文章

订阅专栏

本文介绍了ES6中函数参数的默认值设置，如何使用rest参数处理剩余参数，以及扩展运算符的使用和实例。通过实例演示了这些高级特性在实际编程中的应用。

函数参数默认值和rest参数

一. 函数参数默认值
二. rest参数
三. 扩展运算符
四. 扩展运算符的实列

一. 函数参数默认值

ES6 允许给函数参数赋值初始值

形参初始值具有默认值的参数, 一般位置要靠后(潜规则)

<!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>
    <script>
        //ES6 允许给函数参数赋值初始值
        //1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
        function add(a,b,c=10) {
            return a + b + c;
        }
        let result = add(1,2);
        console.log(result);

        //2. 与解构赋值结合
        function connect({host="127.0.0.1", username,password, port}){
            console.log(host)
            console.log(username)
            console.log(password)
            console.log(port)
        }
        connect({
            // host: 'xizi.com',
            username: 'root',
            password: 'root',
            port: 3306
        })
    </script>
</body>
</html>

在这里插入图片描述

二. rest参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rest参数</title>
</head>
<body>
    <script>
        // ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
        // ES5 获取实参的方式
        function date1(){
            console.log(arguments); //返回的是对象
        }
        date1('戏子1','戏子2','戏子3');

        // rest 参数
        function date2(...args){
            console.log(args);//  返回的是数组 filter some every map
        }
        date2('戏子4','戏子5','戏子6');

        // rest 参数必须要放到参数最后
        function fn(a,b,...args){
            console.log(a);
            console.log(b);
            console.log(args);
        }
        fn(1,2,3,4,5,6);

    </script>
</body>
</html>

在这里插入图片描述

三. 扩展运算符

扩展运算符（spread）也是三个点（…）。它好比 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>
    <script>
        // 『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』
        //声明一个数组 ...
        const xizi = ['戏子1','戏子2','戏子3'];


        // 声明一个函数
        function chunwan(){
            console.log(arguments);
        }

        chunwan(...xizi);



    </script>
</body>
</html>

在这里插入图片描述

四. 扩展运算符的实列

<!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>
    <div></div>
    <div></div>
    <div></div>
    <script>
        //1. 数组的合并 
        const kuaizi = ['王太利','肖央'];
        const fenghuang = ['曾毅','玲花'];
        const zuixuanxiaopingguo1 = kuaizi.concat(fenghuang);
        console.log(zuixuanxiaopingguo1);
        const zuixuanxiaopingguo2 = [...kuaizi, ...fenghuang];
        console.log(zuixuanxiaopingguo2);

        //2. 数组的克隆
        const sanzhihua = ['E','G','M'];
        const sanyecao = [...sanzhihua];//  ['E','G','M']
        console.log(sanyecao);

        //3. 将伪数组转为真正的数组
        const divs = document.querySelectorAll('div');
        const divArr = [...divs];
        console.log(divArr);// arguments
    </script>
</body>
</html>