ES6之函数优化与箭头函数

最新推荐文章于 2022-05-20 05:00:00 发布

faramita_of_mine

最新推荐文章于 2022-05-20 05:00:00 发布

阅读量390

点赞数

分类专栏： ES6 文章标签： javascript 前端开发语言 es6

本文链接：https://blog.csdn.net/faramita_of_mine/article/details/122899271

版权

ES6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了ES6中的函数优化技巧，包括如何为函数参数设置默认值，以及如何使用不定参数。此外，深入讲解了箭头函数的一次性参数语法，并展示了其与解构表达式的结合应用，让读者掌握函数简化与现代JavaScript的高效实践。

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

一、函数优化

①函数参数默认值

<!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之前，我们无法给一个函数参数设置默认值，只能采用变通写法：
        function add(a, b) {
            //判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
        }
        //传一个参数
        console.log(add(10));

        //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
        function add2(a, b = 1) {
            return a + b;
        }
        //传一个参数
        console.log(add2(20));
    </script>
</body>

</html>

②不定参数

不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具有参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数。

<!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>
		//不定参数
        function fun(...values){
            console.log(values.length)
        }
       fun(1,2)//2
       fun(1,2,3,4)//4
    </script>
</body>

</html>

二、箭头函数

ES6中定义函数的简写方式：

①一个参数时：

        //以前声明一个方法
        // var print = function (obj){
        //       console.log(obj);
        //   }
        var print = obj => console.log(obj);
        print("hello");

②多个参数时：

   		//多个参数时
        //var sum = function (a, b) {
        //    return a + b;
        //}
        
        var sum2 = (a, b) => a + b;
        console.log(sum2(11,12));

        //多个参数时
        var sum = function (a, b) {
            c = a + b;
            return a + c;
        }

        var sum3 = (a, b) => {
            c = a + b;
            return a + c;
        }
        console.log(sum3(10,20));

三、箭头函数结合解构表达式

需求：声明一个对象，hello方法需要对象的个别属性

   		//以前的方法：
        const person ={
            name:"jack",
            age:21,
            language:['java','js','css']
        }
        function hello(person){
            console.log("hello,"+person.name)
        }
        hello(person);//hello,jack

     	const person ={
            name:"jack",
            age:21,
            language:['java','js','css']
        }
        var hello2 = (param)=>console.log("hello,"+param.name);
        hello2(person);//hello,jack

     const person ={
            name:"jack",
            age:21,
            language:['java','js','css']
        }
        //箭头函数+解构
        var hello3 = ({name}) =>console.log("hello,"+name);
        hello3(person);//hello,jack