在 JavaScript 中取得資料時,在使用前可能會需要先檢查資料的正確性,避免發生例外。
假設要將 count 這個變數 +1,但是這個變數可能是從 API 或是其他方式取得,則可能會發生下面的情況:
上面的例子是輸出 NaN,但是在 JavaScript 中可能會出現 null, NaN, undefined 等多種情況,每個變數都全部判斷完需要很長的程式碼,非常不簡潔,通常就是寫個 function,檢查所有情況並設定預設值。 但其實有個容易被忽略的小技巧,就是使用否定運算子。
只要是 null, NaN, undefined, 0, false, 空字串,都會回傳 true:
以下會回傳 false:
利用這個驚嘆號,我們在處理時可以先判斷資料是否有問題,有問題就設定初始值:
不過其實否定句沒有那麼直覺,所以我們可以在前面再加上一個驚嘆號,在否定運算子判斷完成後將結果相反,true => false, false => true,所以在三元運算子的第一個是變數正常時使用原本的值,第二個則是變數有問題時使用初始值
只要知道這樣使用兩個驚嘆號的小技巧,在操作變數前進行檢查就變得非常的方便!
參考資料:
mdn - Logical NOT (!)
假設要將 count 這個變數 +1,但是這個變數可能是從 API 或是其他方式取得,則可能會發生下面的情況:
let count; // todo: 透過 API 取得 count;
count += 1;
console.log('count:', count); // count: NaN
上面的例子是輸出 NaN,但是在 JavaScript 中可能會出現 null, NaN, undefined 等多種情況,每個變數都全部判斷完需要很長的程式碼,非常不簡潔,通常就是寫個 function,檢查所有情況並設定預設值。 但其實有個容易被忽略的小技巧,就是使用否定運算子。
只要是 null, NaN, undefined, 0, false, 空字串,都會回傳 true:
let n = [null, NaN, undefined, 0, "", '', ``, false];
n.forEach((item, index) => {
console.log(item, !item);
});
/*
null true
NaN true
undefined true
0 true
"" true
'' true
`` true
false true
*/
以下會回傳 false:
let t = [1, 'a', "b", true, {}, [], function () {}];
t.forEach((item, index) => {
console.log(item, !item);
});
/*
1 false
a false
b false
true false
{} false
[] false
function () {} false
*/
利用這個驚嘆號,我們在處理時可以先判斷資料是否有問題,有問題就設定初始值:
let count; // todo: 透過 API 取得 count;
count = !count ? 0 : count; // 檢查並設定初始值
count += 1;
console.log('count:', count); // count: 1
不過其實否定句沒有那麼直覺,所以我們可以在前面再加上一個驚嘆號,在否定運算子判斷完成後將結果相反,true => false, false => true,所以在三元運算子的第一個是變數正常時使用原本的值,第二個則是變數有問題時使用初始值
let count; // todo: 透過 API 取得 count;
count = !!count ? count : 0; // 檢查並設定初始值
count += 1;
console.log('count:', count); // count: 1
只要知道這樣使用兩個驚嘆號的小技巧,在操作變數前進行檢查就變得非常的方便!
參考資料:
mdn - Logical NOT (!)
留言
張貼留言
如果有任何問題、建議、想說的話或文章題目推薦,都歡迎留言或來信: a@ruyut.com