Typescript 技巧

基本

非整除時不顯示小數點部分

在js 中使用 / 時, 若非整除則會計算商到小數位, 若只想得到整數的商為最後結果, 有以下幾種方法能達成

let A = 5, B = = 4;
console.log(a/b);     // 1.25

// 想要結果的商為整數
console.log('使用parseInt()解析結果:'+parseInt(a/b));      // 使用parseInt()解析結果:1
console.log('使用parseInt(, 10)解析結果:'+parseInt(a/b));  // 使用parseInt(,10)解析結果:1
console.log('使用Math.floor()解析結果:'+Math.floor(a/b));  // 使用Math.floor()解析結果:1
console.log('使用()|0 解析結果:'+(a/b)|0);   // 這裡會變成0 因為這個用法需作用於一個變數上
console.log('使用~~() 解析結果:'+ ~~(a/b));  // 使用~~() 解析結果:1

let c = (a/b)|0;
console.log('使用()|0 賦值後解析結果:'+c);  // 使用()|0 賦值後解析結果:1

bit mask 的應用

這個技巧常見於跟寄存器或是單位資料為寬有限的設備做通訊解析時會使用到

• 應用場景 : 思考如何透過一個 1個 word (2 Byte) 的資訊 來表達出 16個控制器當前的開關狀態(On/Off)

How to break a forEach() loop in TypeScript ?

情境: 一般對 array 使用foreach() 時, 函式必然會完整的把 array 中元素遍歷一次, 而過程中想要針對指定條件加上中斷 (break) 時, 可能會發現無效的情況

ES6 中的 展開運算符 與 其餘運算符 都是以 … 表示

其餘運算符(Rest Operator) 常用於以下兩個場景: 1. 函式定義時的傳入參數 識別名定義(其餘參數, Rest parameters) 2. 解構賦值時

• 剩餘參數(Rest Parameter), 我們需要先了解 Rest 的使用條件: 1. 目的是將多個參數以一組的方式來傳遞 2. 使用場景: 不確定函數參數個數, array 的內容複製 3. 在函數中使用時, 一個func 只會有一個 rest, 並且需要排在所有必要參數的後面

// 這裡示範的是 ... 當作其餘參數的用法
// 概念是: 在函式中使用其餘參數定義, 將這些<不確定的傳入參數>表示成一個陣列來做運算
function sum(...nums: number[]): string {
    let total = 0;
    for (let i = 0; i < nums.length; i++) {
        total += nums[i];
    }
    return `Total = ${total}`;
}

// 進階寫法
function sum(...nums: number[]): string {
    let total = 0;
    [...nums].forEach((item)=> { total += item })
    return `Total = ${total}`;
}

// 最終簡化
function sum(...nums: number[]): string {
    let total = 0;
    nums.forEach((item)=> { total += item })
    return `Total = ${total}`;
}

展開運算符(Spread Operator) 1. 目的是將一個陣列展開成各別的值的語法糖 2. 特性: 這個運算符後面必定接著一個陣列 3. 常見使用場景: 用於組合多個陣列 or 陣列的淺拷貝