Boison
百日轉職前端工程師:第三週程式基礎(下)復盤《DAY 10》

大家好,這是百日轉職前端工程師的 Day10,也是 7/20(一)。今天開始要來復盤之前學過練習過程式基礎下,這塊是介紹 JavaScript 裡面一些比較進階的功能,主要會介紹常用函式、模組、測試還有 ES6 的一些新增的好用功能。

復盤系列將會回答我正在上的課程 Huli 的程式導師實驗計畫每一週學習上的自我檢測目標:


一、常用內建函式如何使用

以下整理陣列和字串的內建函式,詳細功能介紹請點擊 百日轉職前端工程師:常用內建函式《DAY 9》

Array 常用內建函式 function:

  1. Array.map
  2. Array.filter
  3. Array.indexOf
  4. Array.reverse()
  5. Array.fill()
  6. Array.join()

String 常用內建函式 function:

  1. String.trim
  2. String.toLowerCase
  3. String.endsWith
  4. String.padEnd
  5. String.slice
  6. String.repeat

二、使用模組 (Module)

一個 Javascript 檔案,就是一個模組/ 模塊,當寫好一個功能將它做妥善的處理後,就成為一個模組,你可以自己用也可以讓別人來一起用,我們在 Node.js 的環境中可以使用很多別人寫好的模組,非常方便!

Node.js 本身也提供了一些模組給我們使用,可以到 Node.js v14.5.0 Documentation 查詢。在使用上需要先宣告一個變數引入「模組」如下:

var 變數名稱 = require(‘模組名稱’)

以下介紹幾個常用的重要模組:

  1. http:它包含可以用來建立 http server 的一些類別,方法及事件。
  2. url:它包含可以解析 url 的一些方法。
  3. querystring:它包含可以處理由 Client 端傳來 querystring 的一些方法。
  4. path:它包含可以處理一些檔案或資料夾路徑的方法。
  5. fs:它包含檔案的存取/操作的一些類別,方法及事件。
  6. util:它包含一些可供程序者使用的效能函式。

註:以上常用模組內容整理轉貼自 2017 鐵人賽 Day4 – 自建模組(Local Modules )與如何使用 by circleuniv


三、為什麼我們需要 unit test

簡單來說有三個理由,第一是確保你寫好的程式能夠在各種邊界條件下,都能夠運行無阻,並且跑出你設想中正確的結果;二是隨著時間過去當你要修改程式時,能夠在當初設想的邊界條件下也能夠運行;三是當別人要修改你的程式碼時,別人對於你程式碼的掌握程度未必有原撰寫者那麼高,unit test 則可以確保別人在對你當初寫好的程式做修改時,能夠在各種情況下跑出你當初預期中正確的結果。

四、什麼是 unit test

unit test(單元測試)用來確認一個方法在接收特定的輸入後是否會得到預期的輸出。程式中最小的結構單位就是以 function 為劃分,像這樣測試每一個 function 的結果是否正確就是所謂的單元測試 ( Unit Test ),相對於單元測試,整合測試 (Integration Test) 是指檢查數個元件之間的互動。

unit test 也就是你寫好這個測試的「條件」,去跑跑看你的程式在這個條件下輸出的結果是否符合你原本預期的!你可以寫很多奇奇怪怪的邊界條件,看看你的程式是不是在各種情形下都能跑出正確的預期中的結果。

TDD ( Test-driven Development)

Test-driven Development,中文為測試驅動開發,就是把一般測試的流程倒過來,先寫好測試再開發程式。這樣有個好處是,當寫完程式時就已經完成測試了,而且一開始也會需要把邊界條件等想得更清楚。

註:延伸可閱讀了解 unit test 的好文

五、如何寫 unit test

此處運用 Jest 這個框架來寫 unit test。Jest 是前端測試框架(Test runner)的一種,會使用是因為它與 React 的整合度較佳(同為 Facebook 開發的)。其他框架例如:Jasmine(茉莉花)、 Mocha(摩卡咖啡)、和 AVA 等。

註:文章段落轉貼參考自 [第三週]JavaScript — 測試框架 Jest

六、如何測試一個 function

Step1: 安裝 jest 模組

npm install -save-dev jest

第一步,透過 npm 安裝 Jest 測試框架到專案環境中

Step2: 寫 test 程式碼

  • 先從原檔案把要測試的 function 輸出 export:module.exports = Join
  • 新建立一個檔案 index.test.js (原始檔案為 index.js)
  • 先宣告一個變數用 require 從原檔案引入 function:var test = require(‘./index’)
  • 寫一個說明的 describe:describe(‘測試說明’, function(){ test… })
  • 寫一個單元測試的 test:test(‘測試說明’, function( ){ expect(測試的函式).toBe(預期要回傳的東西)})

Step3: 設定執行指令 test

打開 package.json 會看到 devDependencies 已經增加了 jest 代表已經安裝成功,找到 scripts 中的 test 將其對應的預設值直接改成 jest

如此一來可使用 npm run test
(會去幫你找所有副檔名是 .test.js 的檔案)

註:只想 test 單一檔案的方法

ex: 若檔案名稱為 index.test.js

1. 打開 package.json 會看到 devDependencies 已經增加了 jest 代表已經安裝成功,找到 scripts 中的 test 將其對應的預設值直接改成 jest index.test.js

2. 若 npm 版本夠新,可直接在終端機輸入 npx jest index.test.js
(與方法一意思相同,npx 代表會在你的專案中找是否有 jest 這個指令)

註:文章段落轉貼參考自 [第三週]JavaScript — 測試框架 Jest


七、ES6 的強大功能

ECMAScript (ES)是 JavaScript 的規格標準,而 ES6 就代表 ECMAScript 第六版本的意思。這版本做了很多顯著的更新,多了很多強大的功能如下:

1. let 與 const

let 就是只在這個 function 中生效的變數宣告。const 則是一旦宣告即視為常數不再可更改的變數。

2. Template Literals 模板字串符

字串中想要加值,直接用用兩個反引號 (back-tick) 包覆字串,並在其中要加入值得位置使用 ${},如 a + b = ${sum(a, b)}。

P.S. 反引號的位置在 tab 上面(差不多那附近)

3. Destructuring 解構

可以直接同時變數命名,並且把陣列中按照順序的值取出放到變數中。

例如:
arry1 = [‘1’, ‘6’, ‘8’]
[first, second, three] = arry1
此時若 console.log(first, second, three) 會輸出 ‘1’, ‘6’, ‘8’

比較特別的用法是可以用 … 展開運算符 (Spread Operator) 直接切出後半段

例如:
arr1 = arry1 = [‘1’, ‘6’, ‘8’, ’10’, ’15’]
[first, …others] = arry1
此時若 console.log(first, others) 會輸出 ‘1’, [‘6’, ‘8’, ’10’, ’15’]

詳細可參考 JavaScript ES6 語法糖 – 解構賦值介紹

4. Spread Operator 展開運算子

上述解構中遇到情境時用 … 稱之為其餘運算符 (Rest Operator),而若在某些情境下 … 稱之為展開運算符 (Spread Operator),可將陣列中所有元素各別取出。

例如:

const params = [ "hello", true, 7 ]
const other = [ 1, 2, ...params ] // [ 1, 2, "hello", true, 7 ]

5. Arrow Function 箭頭函式

當你想要宣告無名函式時特別好用,可以用比較簡短的方式去寫出 function。

例如:
request.get( ‘url’, function (error, response, body) {}
可以改成
request.get( ‘url’, (error, response, body) => {}

若只有一個變數時可以不加上 (),例如:
function(value){}
可以改成
value => {}

6. 加上預設值:Default Parameters

宣告函式 (function )時可以直接為其參數 (parameters) 加上預設值。

例如: function repeat(str = ‘hello’, times = 3){}

7. Import & Export

P.S. 假設要輸出的 function 是 add()

Export

  1. export function add(){},使用 import {add} 引入
  2. export { add, … },與上面那種一樣
  3. export default function add(),使用 import add 引入,不需要加大括號

Import

  1. import {add , … } from ‘./fileName’
  2. import add, {PI , … } from ‘./fileName’. // export 時就以 add 為 default
  3. import {default as add, PI , … } from ‘./fileName’ // export 時就有 default
  4. import * as utils from ‘./fileName’

as

在 Import/ Export 都可以 as 和一代稱加在 function 後面作代稱。

例如:
export { add as addFunction }
import * as utils from ‘utils’ 

8. Babel

是一種 JavaScript 轉譯器,可將 ES6 轉換 ES5。比如當你想要用上述 7.Import & Export 屬於 ES6 新增的語法的話就需要用到 Babel,此時你就不用擔心執行環境版本吧問題,Babel 基本上都會幫你搞定。(實際在做網頁時也不用擔心瀏覽器的支援度的問題)

  1. 安裝必要套件:npm install –save-dev @babel/core @babel/node @babel/preset-env
  2. 新增 .babelrc:touch .babelrc
    內容寫入以下:
    {“presets”: [“@babel/preset-env”]}
  3. 輸入指令:npx babel-node index.js

八、總結

藉著整理把很多不熟的地方補起來,像是單元測試,還有這陣子陸續加深瞭解程度的 ES6 語法如解構等,東西還滿多的之後如果有用的可以再分別延伸成一篇去做一個完整的整理,好像不知不覺其實學了不少東西,之後要盡量早點整理可能記憶猶新時會在學習上更有效率更節能。

訂閱我不斷更新的百日學習專欄,看看我百日後有沒有成為工程師,薪水多少?

作者介紹 - Boison

Boison

台大 MBA 畢業的筆記術達人,在臉書上經營近 5,000 人的閱讀社群「書旅」,平日熱愛將職場所學做筆記分享商業精華,因此又有「筆記狂 Boison」之稱, 歡迎你追蹤我的臉書發落第一手消息:「 Boison 臉書」;出版社正式合作可透過 dragoncres@gmail.com 聯絡。

發表迴響