今天內容

• Arrow Function
• Import 與 Export
• Babel 安裝與使用

筆記

• Arrow Function：一個可以少寫很多字的箭頭。用法function test(n) { ...(略)... } 改寫成test n => { ...(略)... }，只有一個參數連括號還可以省略。

  var arr = [1, 2, 3, 4, 5]
  console.log(
      arr
      .filter(function(value) {
          return value > 1
      })
      .map(function(value) { 
          return value * 2
      })
  ) //[ 4, 6, 8, 10 ]
  

  用Arrow Function改寫，讓可讀性變高。

  var arr = [1, 2, 3, 4, 5]
  console.log(
    arr
    .filter(value => value > 1) 
    .map(value => value * 2)
  )
  

• Import 與 Export
  export用法：直接在 function 前面加上 export。就不用再多寫一行module.exports = double

  // module.js
  export function add(a,b) {
      return a + b
  }
  //或是不在每個function前面加export，用{}將所有要引出的寫在一起。
  export {
  add
  }
  
  // index.js
  import {add} from "./index14-module.js"
  console.log(add(3,5)) //8
  

  這邊用 node index.js會報錯，原因是node環境沒支援export/import
  所以要依靠另一項工具(Babel)來幫助我們把新語法轉換成舊語法。

• Babel

  Babel 是一個常用來使用最新的 JavaScript 語言特性的工具。身為一個轉譯器、或編譯器，開發者可以使用 ECMAScript 6 以上的功能，並將其轉換成舊版本等效的 JavaScript 讓瀏覽器能夠去解讀。

  安裝方式：

  1. 一樣到Babel官網複製語法用terminal安裝。npm install --save-dev @babel/core @babel/node

     Not meant for production use

  2. 安裝套件npm install --save-dev @babel/core @babel/node @babel/preset-env

  3. 新增 .babelrc 檔案

  4. 將下列語法寫入 .babelrc 檔案。設定要把ES6轉成ES5

     {
        "presets": ["@babel/preset-env"]
     }
     

  5. 最後使用 npx babel-node 檔案名稱 即可跑新語法不支援的檔案。

今天內容不多，就把昨天沒講完的部分講完 (對，我就廢) 。這堂課到這篇結束啦，明天又會是新的課程。這一堂好像結束的太快了吧？ 說好的看不完呢？ 但後面看起來真的有點難啊，邊寫邊看也默默看完兩堂課程以及終於渡過一半了～(呼～撥汗)。繼續GOGOGO...

參考資料

• Arrow function expressions
• import ／ export
• Babel