ES6-函数的默认值，rest参数以及扩展运算符的介绍

最新推荐文章于 2024-07-20 13:10:06 发布

小凡喜编程

最新推荐文章于 2024-07-20 13:10:06 发布

阅读量135

点赞数 1

分类专栏：前端文章标签： es6 前端 javascript

本文链接：https://blog.csdn.net/qq_61658398/article/details/128011789

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

函数默认值

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

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

2.与解构赋值结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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}){
            // let host = options.host;
            // let username = options.username;
            // let password = options.password;
            // let port = options.port;
            console.log(host)
            console.log(username)
            console.log(password)
            console.log(port)
        }
        connect({
            username:'root',
            password:'root',
            port:3306
        })
    </script>
</body>
</html>

rest参数

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

ES5获取实参的方式

ES6的rest参数

rest参数必须放到参数最后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //ES6引入rest参数，用于获取函数的实参，用来代替arguments
        //ES5获取实参的方式
        // function date(){
        //     console.log(arguments);
        // }
        // date('白芷','啊娇','青青');

        //ES6的rest参数
        function date(...args){
            console.log(args); //filter some every map
        }
        date('白芷','啊娇','青青');

        //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>

扩展运算符

[...] 扩展运算符能将数组转换为逗号分隔的参数序列

扩展运算符应用：

1.数组的合并

2 数组的克隆

3.将伪数组转为真正的数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //[...] 扩展运算符能将数组转换为逗号分隔的参数序列
        //声明一个数组
        const star = ['沈腾','赵本山','潘长江']; // =>'沈腾','赵本山','潘长江'
        
        //声明一个函数
        function xiaoping(){
            console.log(arguments);
        }

        xiaoping(star);
        xiaoping(...star);

        //扩展运算符应用
        //1.数组的合并
        const kuaizi = ['王太利','肖央'];

        const fenghuang = ['曾毅','玲花'];

        const zuixuanxiaopingguo = [...kuaizi,...fenghuang];

        console.log(zuixuanxiaopingguo);

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

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

小凡喜编程

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6-函数的默认值，rest参数以及扩展运算符的介绍

ES6引入rest参数，用于获取函数的实参，用来代替arguments。1形参初始值,具有默认值的参数，一般位置要靠后(潜规则)[...] 扩展运算符能将数组转换为逗号分隔的参数序列。ES6允许给函数参数赋值初始值。rest参数必须放到参数最后。3.将伪数组转为真正的数组。ES5获取实参的方式。ES6的rest参数。
复制链接

扫一扫

专栏目录