箭头函数 用法

§§ --- es6/arrow.md

§§ 1000

+# 箭头函数

+

+## 一、定义

+

+箭头函数（Arrow Function）是 ES6 新增的函数，它的语法比较简洁，大大减少了 JavaScript 代码量。

+

+## 二、语法

+

+```js

+// 一个参数

+(param1) => {

+ statements

+}

+

+// 多个参数

+(param1, param2, ...) => {

+ statements

+}

+

+// 无参数

+() => {

+ statements

+}

+```

+

+## 三、用法

+

+### 1、简化函数

+

+```js

+function fn1() {

+ console.log('fn1')

+}

+

+// 简写

+const fn2 = () => {

+ console.log('fn2')

+}

+```

+

+### 2、简化回调函数

+

+```js

+// 传统写法

+[1, 2, 3].forEach(function (item) {

+ console.log(item)

+})

+

+// 简写

+[1, 2, 3].forEach(item => console.log(item))

+```

+

+### 3、this 指向

+

+ES6 中箭头函数里的 this 指向的是外围作用域，而不是指向调用者，因此 this 在箭头函数中是不会改变的。

+

+```js

+// 传统写法

+const obj = {

+ name: 'obj',

+ fn1: function () {

+ setTimeout(function () {

+ console.log(this.name) // undefined

+ }, 0)

+ },

+ fn2: function () {

+ setTimeout(() => {

+ console.log(this.name) // obj

+ }, 0)

+ }

+}

+```

+

+### 4、简化 Promise

+

+```js

+// 传统写法

+fetch('/user.json')

+ .then(function (res) {

+ return res.json()

+ })

+ .then(function (data) {

+ console.log(data)

+ })

+

+// 简写

+fetch('/user.json')

+ .then(res => res.json())

+ .then(data => console.log(data))

+```