前端ES6(2)——函数优化

最新推荐文章于 2024-08-24 11:46:12 发布

Java小生不才

最新推荐文章于 2024-08-24 11:46:12 发布

阅读量181

点赞数

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

本文链接：https://blog.csdn.net/qq_41596346/article/details/120996739

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.函数参数默认值

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


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

在这里插入图片描述

2.不定参数

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

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


        //3）、箭头函数
        //以前声明一个方法
        // var print = function (obj) {
        //     console.log(obj);
        // }
        var print = obj => console.log(obj);
        print("hello");

        var sum = function (a, b) {
            c = a + b;
            return a + c;
        }

        var sum2 = (a, b) => a + b;
        console.log(sum2(11, 12));

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

        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        function hello(person) {
            console.log("hello," + person.name);
        }

        //箭头函数+解构
        var hello2 = (param) =>  console.log("hello," + person.name);
        hello2(person);
        var hello3 = ({name}) => console.log("hello," +name);
        hello3(person);

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

在这里插入图片描述

3.箭头函数(重点)

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


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


         //2）、不定参数
         function fun(...values) {
            console.log(values.length)
        }
        fun(1, 2)      //2
        fun(1, 2, 3, 4)  //4
        console.log("-------------------------------");

        //3）、箭头函数
        //以前声明一个方法
        // var print = function (obj) {
        //     console.log(obj);
        // }
        var print = obj => console.log(obj);
        print("hello");

        var sum = function (a, b) {
            c = a + b;
            return a + c;
        }

        var sum2 = (a, b) => a + b;
        console.log(sum2(11, 12));

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

        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        //普通写法
        function hello(person) {
            console.log("hello," + person.name);
        }
        hello(person);

        //箭头函数
        var hello2 = (param) =>  console.log("hello,666," + person.name);
        hello2(person);
        //箭头函数+解构
        var hello3 = ({name}) => console.log("hello,888," +name);
        hello3(person);

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

在这里插入图片描述

Java小生不才

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端ES6(2)——函数优化

1.函数参数默认值<!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> <scr
复制链接

扫一扫

专栏目录