美文网首页
js笔记05-箭头函数

js笔记05-箭头函数

作者: 大飞哥 | 来源:发表于2018-01-05 23:12 被阅读15次
x => x * x

相当于

function (x) {
    return x * x;
}

包含多条语句时,就不能省略{ ... }return

x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}

多个参数,就用()

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

返回一个对象的话,就用()

// SyntaxError:
x => { foo: x } //因为和函数体的{ ... }有语法冲突

// ok:
x => ({ foo: x })

箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj:

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

不需要再

var that = this;

使用箭头函数简化排序时传入的函数:

'use strict'
var arr = [10, 20, 1, 2];
arr.sort((x, y) => {
     if (x < y) {
        return -1; //返回-1,则不需要交换
    }
    if (x > y) {
        return 1; //返回1,则需要交换
    }
    return 0;
});
console.log(arr); // [1, 2, 10, 20]

相关文章

  • js笔记05-箭头函数

    相当于 包含多条语句时,就不能省略{ ... }和return 多个参数,就用() 返回一个对象的话,就用() 箭...

  • ES6箭头函数简介

    @(JS技巧)[ES6|箭头函数] ES6箭头函数(Arrow Functions) ES6可以使用“箭头”(=>...

  • [译]JS箭头函数三连问:为何用、怎么用、何时用

    [译]JS箭头函数三连问:为何用、怎么用、何时用在现代JS中最让人期待的特性就是关于箭头函数,用=>来标识。箭头函...

  • 箭头函数和普通函数的区别

    定义 变量提升 由于 js 的内存机制,箭头函数需要先定义后调用 构造函数 箭头函数作为匿名函数,不能作为构造函数...

  • js函数&箭头函数

    1⃣️ 函数前提 2⃣️ 箭头函数1)this 指向定义时所在的对象,而不是调用时所在的对象 2)不可以当作构造函...

  • [JS函数] 箭头函数

    箭头函数 箭头函数就相当于匿名函数 使用方法和匿名函数相同。注意返回一个对象的时候加上()。对象的{}可能会与函数...

  • Js 箭头函数

    当初学者进行学习的时候总会看到=>这种写法 其实它是ES6标准新增了一种新的函数:Arrow Function(箭...

  • js箭头函数

    箭头函数的作用:1.缩减代码量,2.this在代码块{}中是全局作用域 1.无参无返回值 语法: let/co...

  • JS箭头函数

    箭头函数的作用域是和定义这个箭头函数的父级上下文绑定在一起的匿名函数的作用域是和定义匿名函数的上下文绑定在一起的 ...

  • JS箭头函数

    查看MDN中更详细的文档 箭头函数 箭头函数表达式没有自己的this,arguments,super或new.ta...

网友评论

      本文标题:js笔记05-箭头函数

      本文链接:https://www.haomeiwen.com/subject/ejhenxtx.html