技術手札: JavaScript常用型態處理技巧

1. 安全的串接字串

假設你有一些不確定的變數類型
而你想將它們串接成字串
這樣可能會導致錯誤

var one = 1;
var two = 2;
var three = '3';

var result = one + two + three; // 會得到 "33" 而非 "123"

可以用 concat 來串接字串

var one = 1;
var two = 2;
var three = '3';

var result = ''.concat(one, two, three); // 得到 "123"

2. 把字串轉成數字

如果你有一個字串譬如說 ‘1’, ‘123’ 之類的
而你需要把它轉成數字
你可能會這樣做

var one = '1';
var two = '2';

var numberOne = Number(one);    // 1
var numberTwo = parseInt(two);  // 2

但這樣可以更簡單快速

var one = '1';

var numberOne = +one; // 1

3. 移除陣列中的重複元素

如果有一個陣列
裡面有一些元素是重複的
可以用這樣的方式來移除他們

var originArr = [1, 'a', 1, 'a'];

var deduped = originArr.filter(function(el, i, arr){
    return arr.indexOf(el) === i;
});

console.log(deduped); // [1, 'a']

用 ES6 的語法可以寫得更簡潔

var originArr = [1, 'a', 1, 'a'];

var deduped = originArr.filter((el, i, arr) => arr.indexOf(el) === i);

console.log(deduped); // [1, 'a']

4. 把二維陣列扁平化

三種不同的解決方法
將二維陣列合併為單一的陣列

給定一個陣列：

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];

我們想得到這個結果：

[1, 2, 3, 4, 5, 6, 7, 8, 9]

方法一：

var myNewArray = [];
for (var i = 0; i < myArray.length; ++i) {
    for (var j = 0; j < myArray[i].length; ++j){
        myNewArray3.push(myArray[i][j]);
    }
}
console.log(myNewArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

方法二：

var myNewArray = myArray.reduce(function(prev, curr) {
  return prev.concat(curr);
});
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

方法三：

var myNewArray = [].concat.apply([], myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

5. 找到陣列中的最大最小值

內建函式 Math.max() 和 Math.min() 可以從參數中找到最大值和最小值

Math.max(1, 2, 3, 4); // 4
Math.min(1, 2, 3, 4); // 1

如果要在陣列中找最大最小值可以這樣用

var numbers = [1, 2, 3, 4];
Math.max.apply(null, numbers) // 4
Math.min.apply(null, numbers) // 1

透過 ES6 的展開運算子來完成

var numbers = [1, 2, 3, 4];
Math.max(...numbers) // 4
Math.min(...numbers) // 1

6. 用邏輯運算代替條件判斷

在某個條件下做某些事情

if(foo == 10){
    doSomething();
}

// 可以寫成這樣

foo == 10 && doSomething();

有時候在函式內要判斷使用者有沒有輸入參數
沒有的話就設為預設值

if(!foo){  // 如果 foo = undefined 或 null
    foo = 10;
}

// 可以寫成這樣

foo = foo || 10;

7. 判斷是否是很多數值中其中一個

這樣寫很冗長

if(foo==1 || foo==22 || foo==43 || foo==51 || foo==63 || foo==83){
    doSomething();
}

可以改成這樣

if([1, 22, 43, 51, 63, 83].indexOf(foo) != -1){
    doSomething();
}

8. 清空陣列

通常你會這樣清空陣列

var list = [1, 2, 3, 4];

list = [];

但有效能更好的清空陣列方式

var list = [1, 2, 3, 4];

list.length = 0;  // list = []

如果只想刪掉最後兩個元素

var list = [1, 2, 3, 4];

list.length = list.length - 2;  // list = [1, 2]

資料來源：賴瑞的程式筆記

2016年7月17日 星期日

JavaScript常用型態處理技巧