JavaScript

JavaScript 小技巧

文章目錄
  1. 1. 字串轉數字
    1. 1.1. 浮點數字串轉整數
  2. 2. 簡化字串 indexOf() >= 0
  3. 3. 檢查布林值
  4. 4. 簡化 if
  5. 5. 替參數設定預設值
  6. 6. 陣列
    1. 6.1. 陣列合併
    2. 6.2. 陣列清空
      1. 6.2.1. 宣告一個新的陣列
      2. 6.2.2. 將陣列長度設為 0
      3. 6.2.3. 應該避免的各種方法….!!

JavaScript 對小弟而言，真是一門似懂非懂的語言XD

儘管使用 JavaScript 也三年多，但畢竟 Java 後端工程師會用到的仍有限。

最近到處惡補後，蒐集整理了一些 JavaScript 小技巧，

一來做個紀錄，增加印象未來也方便複習XD

二來希望能幫上初學 JavaScript 的朋友們～

字串轉數字

假設今天有個數字字串如 ‘1’ 或 ‘3.14159’，要轉成數字可能會用以下幾種方法

1
2
3
var numberStr = '3.14159';
var number1 = Number(numberStr); // 3.14159
var number2 = parseFloat(numberStr); // 3.14159

我們也可以使用一個 + 搞定XD 工程師是很懶惰的職業，這樣寫才夠短

1
var number3 = +numberStr;  // 3.14159

浮點數字串轉整數

還是剛剛那個 ‘3.14159’，今天將其轉成整數 3 的話可以這樣寫

1
2
var number4 = Math.floor(numberStr);
var number5 = parseInt(numberStr);

你也可以使用 ~ 這樣寫 工程師真的很懶惰

1
2
3
4
5
6
7
8
/**
 * ~ (Tilde) 運算元是指 -(N+1)
 * example:
 *  ~(-1) = 0
 *  ~(0) = -1
 *  ~1 = -2
 */
var number6 = ~~numberStr;

簡化字串 indexOf() >= 0

還記得前例的 ~(-1) = 0 嗎，因此我們又可以繼續偷懶簡化程式碼了

1
2
3
4
5
if (someStr.indexOf('a') >= 0) {
    // Found
} else  {
    // Not Found
}

使用 ~ 將其改為

1
2
3
4
5
if (~someStr.indexOf('a')) {
    // Found
} else  {
    // Not Found
}

p.s 這邊應用到的是 JavaScript 的 if 條件為 0 是不成立的

檢查布林值

有時需要對一個變數檢查是否存在(或是否有值)，若存在(或有值)則回傳 true。
可以使用 !! 做到這件事情，只要該變數的值為：0、null、''(空字串)、undefined、NaN(Not a Number)、false 都會回傳 false，其餘則會回傳 true

1
2
3
4
5
6
7
8
var foo;
console.log(!!foo); // false
foo = 1;
console.log(!!foo); // true
foo = {};
console.log(!!foo); // true
foo = "false";
console.log(!!foo); // true

請注意，變數為字串 ‘false’，在 !! 轉換下仍會變為 true

簡化 if

如果今天需先檢查某個條件，程式碼如下

1
2
3
if (isConnected) {
    sendMsg();
}

可以使用 && 來簡化程式碼如下

1
isConnected && sendMsg();

如果是要確定物件不是 null 後，呼叫該物件方法也可以這樣寫

1
2
3
4
5
6
/**
 * if (messenger != null) {
 *     messenger.sendMsg();
 * }
 */
messenger && messenger.sendMsg();

替參數設定預設值

在 ES6 中，有所謂的 Default parameters 替參數設定初始值
萬一瀏覽器不支援 ES6 怎麼辦呢，我們可以使用 || 實現這件事情

1
2
3
4
5
6
7
8
function add(i, j) {
    i = i || 1;
    j = j || 2;
    return i + j;
}
add();      // 3
add(10);    // 12
add(undefined, 5);  // 6

陣列

陣列合併

如果要不靠迴圈合併兩個陣列，一般會使用 Array.concat()：

1
2
3
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
console.log(arr1.concat(arr2)); // [0, 1, 2, 3, 4, 5]

由於 Array.concat() 是另外建立新的陣列後合併，因此在合併較大陣列時，會大量消耗記憶體….

為了效能考量，建議使用 Array.prototype.push.apply(arr1, arr2);

1
2
3
4
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);  // [0, 1, 2, 3, 4, 5]

如果使用 ES6，還可以利用展開運算子

1
2
3
4
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2); // 沒錯，展開運算子就是"..."XD
console.log(arr1);  // [0, 1, 2, 3, 4, 5]

陣列清空

宣告一個新的陣列
1
2
3
4
var arr1 = [0, 1, 2];
var arr2 = arr1;  // 宣告另一變數參照 arr1
arr1 = [];
console.log(arr2); // [0, 1, 2]

此方法雖然簡單，但是若該陣列有被別的變數參照時，會無法清除

將陣列長度設為 0
1
2
3
4
var arr1 = [0, 1, 2];
var arr2 = arr1;  // 宣告另一變數參照 arr1
arr1.length = 0;
console.log(arr2); // []

若想清除其他也參照此陣列的變數，那麼應該採用此方法

應該避免的各種方法….!!

  • Array.splice()

    1
    2
    3
    4
    var arr1 = [0, 1, 2];
    var arr2 = arr1;
    arr1.splice(0, arr1.length);
    console.log(arr2); // []

  • Array.slice()

    1
    2
    3
    4
    var arr1 = [0, 1, 2];
    var arr2 = arr1;
    arr1 = arr1.slice(arr1.length); // 需重新 assign
    console.log(arr2);  // [0, 1, 2]

  • while 迴圈 + Array.pop() ，速度最慢，千萬不要這樣寫!!

    1
    2
    3
    4
    5
    6
    var arr1 = [0, 1, 2];
    var arr2 = arr1;
    while(arr1.length) {
        arr1.pop();
    }
    console.log(arr2);  // []

希望這些小技巧能幫助到那些跟我一樣對 JavaScript 不是太熟的朋友們～

若文章內容有誤，還請不吝指教 <(＿ ＿)>

相關文章

  • User Timing API
    常常在寫 JavaScript 時，會想知道效能到底好不好之類的 最直覺的方法就是測 JavaScript 執行時間 開始之前先寫個假裝讓 JavaScript 執行很久的 sleep 函式 1234function s
  • JavaScript Hoisting
    === 2017-02-19 Updated ===因原文寫得不夠清楚(其實是之前亂寫一通)，導致錯誤的理解 先補上 MDN 的說明： Hoisting was thought up as a general way o
  • 畫圖理解 JavaScript value reference
    這篇是上完保哥的《JavaScript 開發實戰：核心概念篇》筆記之一 (狀態顯示為拖稿) 開始之前可以先看看 Stack Overflow 上這篇 Is JavaScript a pass-by-reference o