作為前端開發工程師，JavaScript 是我們的主要開發語言，它本身語法比較簡單，并且生態系統也非常完善，在社區的影響力越來越大。
在我們使用過程中，經常會遇到各種奇怪的問題，讓我們經常摸不著頭腦。
本文靈感來自 wtfjs，整理了 6 個比較常見并且很有意思的問題。
1. 奇怪的 try..catch
?問題
下面代碼執行后將返回什么？2 還是 3？
(() => {
try {
return 2;
} finally {
return 3;
}
})();
??解答
答案是 3，這是為什么呢？這是因為在 try...catch...finally 語句中，無論是否拋出異常 finally 子句都會執行。此外，如果拋出異常，即使沒有 catch 子句處理異常，finally 子句中的語句也會執行。
??參考
2. [] 和 null 都是對象
?問題
下面 3 行代碼返回結果是什么？
typeof [];
typeof null;
null instanceof Object;
??解答
返回結果是這樣的：
typeof []; // -> 'object'
typeof null; // -> 'object'
null instanceof Object; // false
typeof 操作符返回一個字符串，且必須符合 Table 37: typeof 操作符 返回值。對于沒有實現 [[Call]] 的 null、普通對象、標準特異對象和非標準特異對象，它返回字符串 'object'。
console.log(typeof 42);
// expected output: "number"
console.log(typeof '前端自習課');
// expected output: "string"
console.log(typeof true);
// expected output: "boolean"
console.log(typeof undeclaredVariable);
// expected output: "undefined"
但是，你可以使用 toString 方法檢查對象的類型。
Object.prototype.toString.call([]);
// -> '[object Array]'
Object.prototype.toString.call(new Date());
// -> '[object Date]'
Object.prototype.toString.call(null);
// -> '[object Null]'
??參考
3. 箭頭函數返回 undefined
?問題
函數 f2 執行后為什么返回了 undefined？
let f1 = () => '前端自習課';
f1(); // -> '前端自習課'
let f2 = () => {};
f2(); // -> undefined
??解答
我們第一眼感覺應該是返回 {}，可是卻返回了 undefined，這本質原因是因為箭頭函數返回的 {} 是箭頭函數語法的一部分，我們寫一個測試用例就能看出來：
let f2 = () => {
return '前端自習課'
};
f2(); // -> '前端自習課'
因此上面 f2 函數返回的是 undefined，當然，如果需要返回一個 {} 對象也是可以的，只需要使用括號將返回值包裹起來：
let f2 = () => ({});
f2(); // -> undefined
4. 還能使用反引號執行函數？
?問題
調用函數除了下面的方式，還有其他方式嗎？
function f(...args) {
return args;
}
f(1, 2, 3); // -> [ 1, 2, 3 ]
當然還有啦，我們可以使用反引號調用：
f`Hello string ${'前端自習課'}, Hello boolean ${false}, Hello array ${[1, 2, 3]}`;
/*
[
["Hello string ", ", Hello boolean ", ", Hello array ", ""],
"前端自習課",
false,
[1, 2, 3]
]
*/
??解答
這個看著很神奇的樣子，但是實際上用的是模版字符串。這是一種高級形式的模版字符串，是帶標簽的模版字符串。
上面示例代碼中：f 函數是模版字面量的標簽，標簽可以用函數解析模板字符串。標簽函數的第一個參數包含一個字符串值的數組。其余的參數與表達式相關。
??參考
5. JavaScript 中也有標簽？
?問題
下面這種寫法會有問題嗎？
foo: {
console.log("Hello");
break foo;
console.log("前端自習課");
}
??解答
答案是沒問題，會返回 Hello 的字符串。因為 foo 被識別為一個標簽，然后執行后面 console.log("Hello")，然后執行 break foo 中斷執行。
我們經常會使用帶標簽的語句和 break/continue 語句一起使用，從而實現結束或繼續循環：
let str = '';
loop1:
for (let i = 0; i < 5; i++) {
if (i === 1) {
continue loop1;
}
str = str + i;
}
console.log(str);
// expected output: "0234"
??參考
6. {}{} 是 undefined
?問題
我們可以在控制臺測試下面代碼。類似這樣的結構會返回最后定義的對象中的值。
{}{}; // -> undefined
{}{}{}; // -> undefined
{}{}{}{}; // -> undefined
{foo: 'bar'}{}; // -> 'bar'
{}{foo: 'bar'}; // -> 'bar'
{}{foo: 'bar'}{}; // -> 'bar'
{a: 'b'}{c:' d'}{}; // -> 'd'
{a: 'b', c: 'd'}{}; // > SyntaxError: Unexpected token ':'
({}{}); // > SyntaxError: Unexpected token '{'
??解答
當解析到 {} 會返回 undefined，而解析 {foo: 'bar'}{} 時，表達式 {foo: 'bar'} 返回 'bar'。
這里的 {} 有兩重含義：表示對象，或表示代碼塊。
例如，在 () => {} 中的 {} 表示代碼塊。所以我們必須加上括號：() => ({}) 才能讓它正確地返回一個對象。
因此，我們現在將 {foo: 'bar'} 當作代碼塊使用，則可以在終端中這樣寫：
if (true) {
foo: "bar";
} // -> 'bar'
啊哈，一樣的結果！所以 {foo: 'bar'}{} 中的花括號就是表示代碼塊。
歡迎關注我，我將分享更多有用的內容~
