ES6语法新特性之----箭头函数

最新推荐文章于 2024-10-30 18:24:25 发布

咸鱼_翻身

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量191

点赞数 2

分类专栏： ES6语法新规则

本文链接：https://blog.csdn.net/aaa123_456aaa/article/details/121199594

版权

javascript 前端开发语言

ES6语法新规则专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.箭头函数比较重要，在未来的开发项目中经常使用。

<!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>
        //这是我们传统的方式
        var sum = function(a,b){
            return a + b;
        };
        //这是改进之后的方式(兄弟们，这是不是有点像那个lambad呢)
        //改进1
        var sum = (a,b)=>{
            return a + b;
        }
        //改进2
        var sum = (a,b)=>a + b;
              
    </script>
</body>
</html>

2.三步走规律：（在我看来确实蛮像lambad表达式的）

a.在传统方式之下去掉function
b.在括号后面加箭头
c.如果逻辑代码仅有return 可以直接全部省去。假如有逻辑体的话就不能省略啦

        var sum = (a,b)=>{
       	    //这样就不可以省略，因为有逻辑代码
            var num = a + b;
            return num;
        }

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>
        //传统方法
        var arr1 = [1,2,3,4,5,6];
        var newarr1 = arr1.map(function(obj){
            return obj*2;
        });
        console.log(newarr1);

        //改进（按照我们的三步走规律，一步步去改造）
        var arr2 = [1,2,3,4,5,6];
        var newarr2 = arr2.map((obj)=>obj*2);
        console.log(newarr2);        
    </script>
</body>
</html>

在这里插入图片描述

4.其实还可以省略–也就是第四步：d.如果参数只有一个，可以把括号也省去，如果有多个参数那就不可以省去。

一、

        var arr2 = [1,2,3,4,5,6];
        //其实我是不怎么喜欢这样做的，我感觉代码可读性降低了。
        var newarr2 = arr2.map(obj=>obj*2);
        console.log(newarr2);

二、

    <script>
        var minu = (a,b,c)=>a-b-c;
        //当然我们反着来正着来都要会
        var minu = function(a,b,c){
            return a-b-c;
        };
    </script>