zoukankan      html  css  js  c++  java
  • Arraw function

    Arraw function

    箭头函数表达式的语法比函数表达式更短,并且没有自己的thisargumentssuper或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。

    基础语法: 

    (参数1, 参数2, …, 参数N) => { 函数声明 }

    (参数1, 参数2, …, 参数N) => 表达式(单一)

    //相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }

    // 当只有一个参数时,圆括号是可选的:

    (单一参数) => {函数声明}

    单一参数 => {函数声明}

    // 没有参数的函数应该写成一对圆括号。

    () => {函数声明}

    高级语法://加括号的函数体返回对象字面表达式:

    参数=> ({foo: bar})

    //支持剩余参数和默认参数

    (参数1, 参数2, ...rest) => {函数声明}

    (参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}

    //同样支持参数列表解构

    let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;

    f();  // 6

    箭头函数是ECMAScript 6最受关注的更新内容之一。它引入了一种用「箭头」(=>)来定义函数的新语法。箭头函数与传统的JavaScript函数主要区别在于以下几点:
    1.对 this 的关联。函数内置 this 的值,取决于箭头函数在哪儿定义,而非箭头函数执行的上下文环境。
    2.new 不可用。箭头函数不能使用 new 关键字来实例化对象,不然会报错。
    3.this 不可变。函数内置 this 不可变,在函数体内整个执行环境中为常量。
    4.没有arguments对象。更不能通过arguments对象访问传入参数。只能使用显式命名或其他ES6新特性来完成。
    语法

    箭头函数的语法很简单,定义自变量,然后是箭头和函数主体。自变量和主题因使用不同可以采用更简洁的格式。下面这个例子就是采用传一个参数和返回一个值的箭头函数。

    复制代码代码如下:


    var reflect = value => value;
    // 等同于:

    var reflect = function(value) {
        return value;
    };

    可以看出,传一个参数就直接写就好了,不用加小括号。箭头指向函数主体,不过函数主体也只是简单的一条返回语句,所以也不用加大括号。函数构造完毕赋给reflect加以引用。
    若需传入多个参数,则应加上小括号。例如:

    复制代码代码如下:


    var sum = (num1, num2) => num1 + num2;
    // 等同于:
    var sum = function(num1, num2) {
        return num1 + num2;
     };

    sum()方法为两参数相加并回传结果。跟前一个例子的唯一区别是传入了两个参数,所以要用小括号括起来。它与传统函数一样,括号内由逗号将传入参数分开。同样,如果该函数不需要传入参数,那也要以空括号来代替。

    复制代码代码如下:

    var sum = () => 1 + 2;
    // 等同于:
    var sum = function() {
        return 1 + 2;
     };

    若你想使用标准的函数体,或者函数体内可能有更多的语句要执行,则要用大括号将函数体括起来,并明确定义返回值。例如:

    复制代码代码如下:


    var sum = (num1, num2) => { return num1 + num2; }
    //等同于:
    var sum = function(num1, num2) {
        return num1 + num2;
     };

    大括号内的部分基本等同于传统函数,除了arguments参数不可用外。
    因为大括号是函数主体的标志。而箭头函数若要返回自定义对象的话,就必须用小括号把该对象括起来先。例如:

    复制代码代码如下:


    var getTempItem = id = > ({
        id: id,
        name: "Temp"
    });
    // 等同于:
    var getTempItem = function(id) {
        return {
            id: id,
            name: "Temp"
        };
    };

    上例可以看出,用小括号包含大括号则是对象的定义,而非函数主体。

    使用

    JavaScript最常见错误之一就是函数内部this关联。因为this是根据函数当前的执行环境去取值的,这样就会在调用时产生误解,以导致对其他的不相关对象产生了影响。参见下例:

    复制代码代码如下:


    var PageHandler = {
        id: "123456",
        init: function() {
            document.addEventListener("click", function(event) {
                this.doSomething(event.type); // error
            }, false);
        },
        doSomething: function(type) {
            console.log("Handling " + type + " for " + this.id);
        }
    };

    在这段代码中,本意是想让PageHandler的init()方法用于构建交互作用,并在点击事件处理函数中调用this.doSomething()。但是代码并未按设计初衷来执行,运行时this指向了全局对象而不是PageHandler,从而造成this.doSomething()调用无效出现报错,因为全局对象中不存在doSomething方法。
    当然,可以在函数中使用bind()将this与PageHandler明确关联起来,见下:

    复制代码代码如下:


    var PageHandler = {

        id: "123456",

        init: function() {
            document.addEventListener("click", (function(event) {
                this.doSomething(event.type);
            }).bind(this), false);
        },

        doSomething: function(type) {
            console.log("Handling " + type + " for " + this.id);
        }
    };


    虽然看着有些怪,但现在代码执行是符合预期的。通过调用函数的bind(this),又创建了一个已关联现有this的新函数返回,就是说为了达到目的额外又包了一层。
    因为箭头函数已经支持this关联,所以这里用箭头函数会更爽快些,看下例:

    复制代码代码如下:


    var PageHandler = {

        id: "123456",

        init: function() {
            document.addEventListener("click",
            event = > this.doSomething(event.type), false);
        },

        doSomething: function(type) {
            console.log("Handling " + type + " for " + this.id);
        }
    };

    这个实例中的事件处理函数调用了this.doSomething()的箭头函数。this的取值即为init()内的this值。故而它等效于bind()。
    箭头函数简明扼要的特性,也使它成为其他函数自变量的理想选择。例如,若要在ES5上,使用定制比较器来排列数组,典型的代码见下:

    复制代码代码如下:


    var result = values.sort(function(a, b) {
            return a - b;
     });

    上例用了许多语法来实现一个简单的操作。若使用箭头函数,则可写成很精炼的代码:

    复制代码代码如下:


    var result = values.sort((a, b) => a - b);

    数组的sort/map/reduce等方法都支持回调函数。用箭头函数可以简化书写流程,解放你的双手去做你想做的事情。

    补充

    箭头函数的确与传统函数有不同之处,但仍存在共同的特点。例如:
    1.对箭头函数进行typeof操作会返回“function”。
    2.箭头函数仍是Function的实例,故而instanceof的执行方式与传统函数一致。
    3.call/apply/bind方法仍适用于箭头函数,但就算调用这些方法扩充当前作用域,this也依旧不会变化。
    箭头函数与传统函数最大的不同之处在,禁用new操作。

     

    基本语法

    (param1, param2, …, paramN) => { statements }

    (param1, param2, …, paramN) => expression

    如果函数体没有用{}括起来,就等于{ return express}

    只有一个参数时,括号才能不加

    (singleParam) => { statements }

    singleParam => { statements }

    如果没有参数,就一定要加括号

    () => { statements }

    进阶语法

    如果返回是一个对象,需要将对象用()括起来:

    params => ({foo: bar})

     

    多参数和参数默认值

    (param1, param2, ...rest) => { statements }

    (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

     

    也支援 parameter list 的解释

    var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6

  • 相关阅读:
    基本MVVM 和 ICommand用法举例(转)
    WPF C# 命令的运行机制
    628. Maximum Product of Three Numbers
    605. Can Place Flowers
    581. Shortest Unsorted Continuous Subarray
    152. Maximum Product Subarray
    216. Combination Sum III
    448. Find All Numbers Disappeared in an Array
    268. Missing Number
    414. Third Maximum Number
  • 原文地址:https://www.cnblogs.com/orange123/p/9984665.html
Copyright © 2011-2022 走看看