4小时快速掌握ES6核心用法 - 1.4 函数之默认值、剩余参数

longfei815

已于 2022-03-20 09:22:48 修改

阅读量184

点赞数 1

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

于 2022-03-19 11:01:43 首次发布

本文链接：https://blog.csdn.net/jolinoy/article/details/123590858

版权

es6 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

本文介绍了JavaScript中函数参数的默认值和剩余参数的使用。通过示例展示了如何设置函数参数的默认值，包括使用表达式作为默认值的情况。此外，还详细解释了剩余参数的概念，以及它如何替代`arguments`对象，方便处理不定数量的参数。最后，通过一个具体的例子展示了如何使用剩余参数来选取对象的特定属性。

摘要由CSDN通过智能技术生成

03 函数之默认值、剩余参数

基本使用和操作方法看下面的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>03 函数之默认值、剩余参数</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- <link href="css/style.css" rel="stylesheet"> -->
    </head>
    <body>
        <script>
            // 1.带参数默认值的函数
            // 之前的es5的写法
            // function add(a,b) {
            //     a = a || 10; //a有值的时候，赋值给a，没有值的时候默认为10。
            //     b = b || 20;
            //     return a + b;
            // }
            // console.log(add());  //输出：30
        
            // es6的写法
            // 参数的默认值 不会影响arguments对象,它表示实参的个数、
            // function add(a, b = 20) {
            //     console.log(arguments);
            //     return a + b;
            // }
            // console.log(add(10));   //输出：50  传一个值时，只赋给第一个形参a，b还是默认值20。
        
            // 2.默认的表达式可以是一个函数
            // function getVal(val) {
            //     return val + 5;
            // }
            // function add2(a, b = getVal(5)) {   //函数getVal调用上面的函数。
            //     return a + b;
            // }
            // console.log(add2(10));  //输出：20
        
        
            // 3.不具名参数的函数
            // es5写法：
            /*function pick(object) {
                
                let result = Object.create(null);
                for(let i = 1; i < arguments.length; i++){  //i=1,是要排除bookData中的第一个值：book。
                    result[arguments[i]] = object[arguments[i]]
                }
                return result;
            }
        
            let book = {
                title:"小猿圈wiki",
                author: 'mjj',
                year: 2019
            }
            let bookData = pick(book,"author", "year");
            console.log(bookData);*/
        
        
        
            // 4.剩余参数 ： 由三个点...和一个紧跟着的具名参数指定
        
            // 剩余参数 后面不能有多余的具名参数，它必须放在形参的最后面
        
            // 设计剩余参数的目的是为了取代arguments
            // es6写法：
            function pick(object, ...keys /* ,last */ ) {
                let result = Object.create(null);
                for (let i = 0; i < keys.length; i++) {
                    result[keys[i]] = object[keys[i]]
                }
                return result;
            }
            let book = {
                title: "es6教程",
                author: 'longfei',
                year: 2019
            }
            let bookData = pick(book, "author", "year");
            console.log(bookData);  //输出：{author: 'longfei', year: 2019}
        
            // function checkArgs(...args) {
            //     console.log(args);
            //     console.log(arguments);
            // }
            // checkArgs('a', 'b', 'c');
        
        </script>
    </body>
</html>