箭头函数

参数

单个参数

let breakfast = dessert => dessert;

转成普通写法是这样的:

var breakfast = function breakfast( dessert ){
    return dessert
}
  1. 箭头左边是函数的参数,右边是函数返回的值。
    上面代码的说明:let 函数名 = 参数 => 函数的返回值。用 let、用 var、用 const 都行。
  2. 只有一个参数,且这个参数需要被return的时候,不要加花括号。箭头函数会自动返回(不加花括号的)单行主体的结果。

例子:

const entity = app.globalData.vehicles.filter(
    item => item.id == id
)

转成普通写法就是:

var entity = app.globalData.vehicles.filter(function (item) {
    return item.id == id;
});
  1. 只有一个参数,且这个参数不需要被return的时候,必须加花括号。如下面的例子:
onLaunch() {
    wx.request({
      url: 'https://abcde.com/db.json',
      success:(response)=>{
        Object.assign(this.globalData , response.data)
      }
    })
  }

单个参数、单行主体的写法需要特别注意:

对于刚才提到的例子,你可以这样写:

const entity = app.globalData.vehicles.filter(
    item => item.id == id
)

也可以这样写:

const entity = app.globalData.vehicles.filter(
    item => { return item.id == id }
)

但是千万不能这样写:

const entity = app.globalData.vehicles.filter(
    item => { item.id == id }
)

程序对花括号{ }里的代码不会自动加return,所以写的时候需要判断代码是否需要被return。如果需要却没写return代码就会报错。

多个参数

使用括号把参数扩起来。

let breakfast = (dessert,drink) => dessert + drink;

没有参数

如果没有参数,就使用空白的括号()

主体

单行主体

箭头函数会自动返回单行主体的结果,如果主体是单行,但是不需要返回结果,就必须加上大括号{}

多行主体

如果函数不是简单的返回一些东西,那就加上大括号{ },在大括号里面写函数要做的事。

使用 babel 把 ES6 代码自从转成 ES5 代码

babel 可以帮我们自动把箭头函数转成 ES5 的写法,我们可以用来检查自己的代码有没有错误。

1.安装 babel-preset-es2015

npm install -g babel-preset-es2015

在安装之前需要确认已经安装 node 和 npm 包管理工具。

2.使用 babel-preset-es2015

  1. 在文件夹中新建一个 test.js 文件(叫什么都行),把你要转化的代码粘贴进去
  2. 终端中使用 cd 命令进入文件夹
  3. 输入代码babel --presets es2015 test.js --watch --out-file test-2.js ,即可在test-2.js 中看到转化完毕的代码。

--watch表示不退出 babel 命令,让命令一直运行,在 test.js 中输入代码,可以在 test-2.js 中实时转化。按 control + c 退出。

posted @ 2018-07-08 18:03  萌面君  阅读(523)  评论(0编辑  收藏  举报