ES2015入門系列3-箭頭函數

syoya 發布于2019-08-20 17:37 / 1347人閱讀

摘要：箭頭函數是用新的語法書寫的匿名函數如等同于下面使用的寫法可能一開始無法接受，但慢慢的會發現箭頭函數帶來的快感不言而喻。作為一個后端人士希望也能支持該語法。

箭頭函數(Arrows), 是用新的 => 語法書寫的匿名函數, 如:

[1, 2, 3].map(n => n + 1);

等同于下面使用ES5的寫法:

[1, 2, 3].map(function(n) {
  return n + 1;
});

可能一開始無法接受，但慢慢的會發現箭頭函數帶來的快感不言而喻。作為一個PHP后端人士希望PHP也能支持該語法, ?。

一般寫法, 如計算兩個數字之和, 并返回:

(arg1, arg2) => {
  let arg3 = arg1 + arg2
  return arg3
}

不用寫function關鍵字, 但是上面的寫法，也感覺不出來有多少簡化，我們來看看幾種情況:

如果只有一個參數，可以不用寫括號

n => {
  return n + 1
}

等價于

(n) => {
  return n + 1
}

如果函數只有一行執行代碼，可以省去花括號，寫在一行

n => alert(n)

等價于

n => {
  alert(n)
}

寫在一行的時候，也可以省略return關鍵字

n => n + 1

等價于

n => {
  return n + 1
}

沒有參數的時候，則必須用(), 如

() => alert("ES2015 Rocks!");

語法介紹完畢，需要特別強調并指出的是：

和用function關鍵字命名的函數不同的是，箭頭函數體內和它的所在的塊區域共享同一個this , 舉個例子:

直接在Chrome Console中運行以下代碼:

class Zoo {

  constructor(name, animals = []) {
    this.name = name;
    this.animals = animals;
  }

  list() {
    this.animals.map(animal => {
      console.log(this.name + "里有" + animal);
    });
  }

  list2() {
    this.animals.map(function() {
      console.log(this.name + "里有" + animal);
    });
  }

}

let zoo = new Zoo("小紅山動物園", ["大象", "猴子", "長頸鹿"]);

zoo.list();
zoo.list2();

以上代碼輸出：

> 小紅山動物園里有大象
> 小紅山動物園里有猴子
> 小紅山動物園里有長頸鹿
> Uncaught TypeError: Cannot read property "name" of undefined(…)

這就是文檔中所說的：

Unlike functions, arrows share the same lexical this as their surrounding code.

相信你也已經掌握箭頭函數的用法了吧？歡迎繼續瀏覽下一章節。

云服務器 GPU云服務器 es6-系列箭頭函數入門系列課程深度學習入門系列課程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83730.html

[ ES6 ] 快速掌握常用 ES6 （一）

摘要：常量變量先說說常量和變量的概念吧，常量是說那種進行一次賦值后不會更改的值，比如說游戲賬戶的，變量是說賦值后有更改的需求的，比如游戲名，游戲密碼。常用實例交換變量的值提取數據解構賦值對提取對象中的數據，尤其有用。本系列文章適合快速掌握 ES6 入門語法，想深入學習 ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》學習 20% 的知識完成 80% 的工作關于 ...

ispring 2019-08-23 14:01 評論0 收藏0
2017-06-29 前端日報

摘要：前端日報精選如何在非項目中使用知乎專欄編碼規范最常被遺忘的性能優化瀏覽器緩存個人文章譯統一樣式語言掘金新的開發者提及最多的個視頻眾成翻譯中文第期在中使用譯統一樣式語言掘金前端現狀答題救不了前端新人相學長懟前端歲以 2017-06-29 前端日報精選如何在非 React 項目中使用 Redux - 知乎專欄Javascript編碼規范 - Clearlove - SegmentFau...

gaosboy 2019-08-20 17:37 評論0 收藏0
babel入門

摘要：為了方便，團隊將一些集合在一起，并稱之為。先看一下直觀體驗源代碼配置編譯后的代碼通過對比可以看出，第二種方案直接從引入，避免自己定義，從而減少代碼的體積。 Babel Babel 是一個 JavaScript 編譯器，它可以將ES6+語法編譯為瀏覽器支持的ES5語法。要學好babel必須先理解相關的概念，但是你剛起步就去扣這些細節的話，很可能因為babel一些復雜而模糊的概念打擊你的信...

pkwenda 2019-08-22 16:40 評論0 收藏0
探索ES2015：箭頭函數（Arrow Functions）

摘要：注意箭頭函數有幾個使用注意點不可以使用對象，該對象在函數體內不存在。不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。不可以使用命令，因此箭頭函數不能用作函數。前言在JavaScript的世界中函數被譽為一等公民，每當我們需要在JS定義一個新的函數，我們都會毫不猶豫的function() {}，也許我們可以開始換一種方式來定義一個函數，也就是本文的主角箭頭函數，一個...

pkwenda 2019-08-19 18:02 評論0 收藏0
ES6入門到進階（一）：let、解構賦值、字符串模板、函數

摘要：注意問題，不在是運行時所在的對象箭頭函數里面沒有用箭頭函數不能當構造函數下一篇入門到進階二循環數組對象參考視頻資料經典入門到進階一、簡介 ES6 -> ECMA 標準 ES6 -> 2015年6月 ES6.0 每年6月份，發布一個版本 ES6環境: webpack3.x Traceur 二、let、const 2.1 關于定義(聲明)變量 var a=12; ...

WalkerXu 2019-08-26 11:47 評論0 收藏0