zoukankan      html  css  js  c++  java
  • ECMAScript6箭头函数ArrowFunction"=>"

    一、说明

    ECMAScript6可以用箭头"=>"定义函数。x => x * x(x) => {return x * x;}与匿名函数function(x){return x * x;}相等。

    二、示例

    2.1 没有参数的箭头函数

    var f = () => 9;
    console.log(f()); //9

    2.2 一个参数的箭头函数

    var f = x => x * x;
    console.log(f(3)); //9
    var f = x => {return x * x;};
    console.log(f(3)); //9
    var f = (x) => x * x;
    console.log(f(3)); //9
    var f = (x) => {return x * x;};
    console.log(f(3)); //9

    2.3 两个或更多参数的箭头函数

    var f = (x, y) => x * y;
    console.log(f(2, 3)); //6
    var f = (x, y , ...more) => {
        var multiply = x * y;
        for(var i = 0; i < more.length; i++){
            multiply *= more[i];
        }
        return multiply;
    };
    console.log(f(2, 3, 4, 5)); //120

    2.4 map/reduce应用

    var f = [1, 2, 3].map(x => x * x);
    console.log(f); //[1, 4, 9]
    var f = [1, 2, 3].reduce((x, y) => x + y);
    console.log(f); //6

    三、this作用域/返回对象

    3.1 this作用域

    箭头函数中的this总是指向外层作用域,即使在内层函数里面,所以可以不用写var that = this;

    var obj = {
        name: 'mazey',
        f: function(){
            var myName = () => this.name; //这里的this指向obj
            return myName();
        }
    };
    console.log(obj.f()); //mazey

    3.2 返回对象

    因为对象和块的冲突问题,箭头函数返回一个如{name:'mazey'}的对象必需用()括起来。

    var f = () => {name:'mazey'};
    console.log(f()); //undefined
    var f = () => ({name:'mazey'});
    console.log(f()); //{name: "mazey"}

    四、练习代码

    <script>
    var f = () => 9;
    console.log(f()); //9
    var f = x => x * x;
    console.log(f(3)); //9
    var f = x => {return x * x;};
    console.log(f(3)); //9
    var f = (x) => x * x;
    console.log(f(3)); //9
    var f = (x) => {return x * x;};
    console.log(f(3)); //9
    var f = (x, y) => x * y;
    console.log(f(2, 3)); //6
    var f = (x, y , ...more) => {
        var multiply = x * y;
        for(var i = 0; i < more.length; i++){
            multiply *= more[i];
        }
        return multiply;
    };
    console.log(f(2, 3, 4, 5)); //120
    var f = [1, 2, 3].map(x => x * x);
    console.log(f); //[1, 4, 9]
    var f = [1, 2, 3].reduce((x, y) => x + y);
    console.log(f); //6
    var obj = {
        name: 'mazey',
        f: function(){
            var myName = () => this.name; //这里的this指向obj
            return myName();
        }
    };
    console.log(obj.f()); //mazey
    var f = () => {name:'mazey'};
    console.log(f()); //undefined
    var f = () => ({name:'mazey'});
    console.log(f()); //{name: "mazey"}
    </script>

    ECMAScript6箭头函数ArrowFunction”=>”

  • 相关阅读:
    Nginx 模块开发(1)—— 一个稍稍能说明问题模块开发 Step By Step 过程
    nginx上传模块—nginx upload module-
    解决nginx上传模块nginx_upload_module传递GET参数
    nginx upload module的使用
    Nginx Upload Module 上传模块
    产品需求分析神器:KANO模型分析法
    SpringBoot @ConditionalOnBean、@ConditionalOnMissingBean注解源码分析与示例
    BAT、网易、京东等如何做大数据风控的?
    springboot 2.x 集成 drools 7.x
    Drools介绍与使用
  • 原文地址:https://www.cnblogs.com/mazey/p/7198149.html
Copyright © 2011-2022 走看看