JavaScript 箭头函数

目录

箭头函数

各种形式的箭头函数

箭头和ECMA5数组方法结合

箭头函数需要注意的部分

---

箭头函数

箭头函数：新潮的函数写法(做造型的)

【注】适当的省略函数中的function和return关键字

        function add(x){
            return x +10;
        }
        alert(add(5));
-------------------------------------------------------------------------------------
        var add = x => x +10;
        alert(add(5));

但是这样的设计对代码的可读性伤害太大，省略掉一个function并不能给开发效率提高多少，但牺牲的是代码可读性；除了数学运算，我们几乎从来不用符号表示一些复杂的含义 

正则表达式虽然复杂且难以阅读，但是他给我们的验证工作提升了百倍以上的效率

各种形式的箭头函数

       //1、无参数，无返回值
        function show(){
            alert("hello world");
        }

        var show = () => {
            alert("hello world");
        }

        //2、有一个参数，无返回值
        function xxx(num){
            alert(num);
        }

        var xxx = num => {
            alert(num);
        }

        //3、有一个参数，有返回值
        function add(x){
            return x +10;
        }

        var add = x => {
            //代码
            return x + 10;
        };

        //4、多个参数，有返回值
        function show(x, y){
            alert(x + y);
        }

        var show = (x, y) => {
            alert(x + y);
        }

箭头和ECMA5数组方法结合

         /* 
            filter  过滤
        */
       var arr = [10, 20, 30, 40, 50];
       var newArr = arr.filter(function(item){
           return item > 20;
       })
-------------------------------------------------------------------------------------
       var newArr = arr.filter(item => item >20);

       alert(newArr);
-------------------------------------------------------------------------------------
       var newArr = arr.map(item => item *1.3);

       alert(newArr);

箭头函数需要注意的部分

1、箭头函数不能用new

2、箭头函数如果返回值是一个对象，一定要加( )；

    function show(){
        return {
            username:"xxx"
        }
    }
    var show = () =>({
        
    })

3、箭头函数中的this，指向的是上一层函数的主人

    var person = {
        username:"钢铁侠",
        // show:function(){
        //     alert(person.username);//钢铁侠
        //     alert(this.username);//钢铁侠
        // }

        show: () => {
            alert(person.username);//钢铁侠
            alert(this.uesername);//undefined
            alert(this);//[object Window]
        }
    }

    person.show();