ES6 箭头函数(Arrow Functions)

ES6 可以使用 “箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器)。

一、语法

  1. 具有一个参数的简单函数

    var single = a => a
    single('hello, world') // 'hello, world'
  2. 多个参数需要用到小括号,参数间逗号间隔,例如两个数字相加

    var add = (a, b) => a + b
    add(3, 8) // 11
  3. 函数体多条语句需要用到大括号

    var add = (a, b) => {
    if (typeof a == 'number' && typeof b == 'number') {
    return a + b
    } else {
    return 0
    }
    }
  4. 返回对象时需要用小括号包起来,因为大括号被占用解释为代码块了

    var getHash = arr => {
    // ...
    return ({
    name: 'Jack',
    age: 33
    })
    }
  5. 直接作为事件 handler

    document.addEventListener('click', ev => {
    console.log(ev)
    })
  6. 作为数组排序回调

    var arr = [1, 9 , 2, 4, 3, 8].sort((a, b) => {
    if (a - b > 0 ) {
    return 1
    } else {
    return -1
    }
    })
    arr // [1, 2, 3, 4, 8, 9]

二、注意点

  1. typeof 运算符和普通的 function 一样

    var func = a => a
    console.log(typeof func); // "function"
  2. instanceof 也返回 true,表明也是 Function 的实例

    console.log(func instanceof Function);
  3. this 固定,不再善变

    obj = {
    data: ['John Backus', 'John Hopcroft'],
    init: function() {
    document.onclick = ev => {
    alert(this.data) // ['John Backus', 'John Hopcroft']
    }
    // 非箭头函数
    // document.onclick = function(ev) {
    // alert(this.data) // undefined
    // }
    }
    }
    obj.init()

这个很有用,再不用写 me,self,_this 了,或者 bind。

  1. 箭头函数不能用 new.

    var Person = (name, age) => {
    this.name = name
    this.age = age
    }
    var p = new Func('John', 33) // error
  2. 不能使用 argument

    var func = () => {
    console.log(arguments)
    }
    func(55)

ES6 箭头函数(Arrow Functions)的更多相关文章

  1. 深入浅出ES6(七):箭头函数 Arrow Functions

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教 ...

  2. 箭头函数 Arrow Functions/////////////////////zzz

    箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚本,这样可以避免不支持JS的浏览器误将JS代码显示为文本.你会写这样的代码: < ...

  3. es6 箭头函数(arrow function) 学习笔记

    箭头函数有两个好处. 1.他们比传统函数表达式简洁. const arr = [1, 2, 3]; const squares = arr.map(x => x * x); // 传统函数表达式 ...

  4. ES6箭头函数Arrow Function

    果然,隔了很长时间都没有来博客园上逛了...... 前一段时间一直在忙我们参加的一个比赛,转眼已经好久没有来逛过博客园了,果然还是很难坚持的...... 今天总算还是想起来要过来冒个泡,强行刷一波存在 ...

  5. es6箭头函数讲解

    es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var su ...

  6. es6箭头函数 this 指向问题

    es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...

  7. ES6 In Depth: Arrow functions

    Arrows <script language="javascript"> <!-- document.bgColor = "brown"; ...

  8. ES6 — 箭头函数

    一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': fu ...

  9. 前端分享----JS异步编程+ES6箭头函数

    前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...

随机推荐

  1. 判断Mouse事件源类型

    //鼠标事件源类型 public enum MouseEventSource { Mouse, Pen, Touch } /// <summary> /// MainWindow.xaml ...

  2. 如何开发一个产品级的Node.js 应用

    介绍 Node.js是一个开源的javascript运行时环境.非常简单可以快速开发一个网络应用.这个平台运行在Linux.OSX和Windows,而且运行在这个平台上的应用都是用javascript ...

  3. MapGIS Mobile开发

    1. 先将Android开发环境配置好(包括Java + Eclipse + Android SDK) 2. 加载API类库(运行MapGIS 10 AndroidSDK.exe可以加载Mobile框 ...

  4. (小数化分数)小数化分数2 -- HDU --1717

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1717 举例: 0.24333333…………=(243-24)/900=73/3000.9545454…… ...

  5. new Date()之参数传递

    JavaScript下,new Date([params]),参数传递有以下五种方式: 1.new Date("month dd,yyyy hh:mm:ss"); 2.new Da ...

  6. Java中的时间日期处理

    程序就是输入——>处理——>输出.对数据的处理是程序员需要着重注意的地方,快速.高效的对数据进行处理时我们的追求.其中,时间日期的处理又尤为重要和平凡,此次,我将把Java中的时间日期处理 ...

  7. Python学习-40.Python中的迭代

    在上一篇中,我们使用了生成器来创建了一个可遍历的对象.在其中,我们使用了yield关键字. Python我也正在学习中,因此对yield的本质我并不熟悉,但是,在C#中,yield关键字则是语法糖,其 ...

  8. Python学习-36.Python中的字典解释

    具体同列表解释,也是使用if来进行过滤 例子,生成一个新的字典,并且是原来字典的键值交换. mydict={'Tom':18,'Mary':20} print({value:key for key,v ...

  9. LinkedBlockingQueue源码解析(1)

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1.对于LinkedBlockingQueue需要掌握以下几点 创建 入队(添加元素) 出队(删除元素) 2 ...

  10. C博客作业03—函数

    1.本章学习总结 1.1思维导图 1.2本章学习体会及代码量学习体会 1.2.1 学习体会 知道了程序的模块化设计可使程序结构清晰,简化复杂问题,解决代码重复问题 学会使用自定义函数简化主函数,使代码 ...