6 個意想不到的 JavaScript 問題

作為前端開發(fā)工程師，JavaScript 是我們的主要開發(fā)語言，它本身語法比較簡單，并且生態(tài)系統(tǒng)也非常完善，在社區(qū)的影響力越來越大。

在我們使用過程中，經(jīng)常會遇到各種奇怪的問題，讓我們經(jīng)常摸不著頭腦。

本文靈感來自 wtfjs^[1]，整理了 6 個比較常見并且很有意思的問題。

1. 奇怪的 try..catch

?問題

下面代碼執(zhí)行后將返回什么？2 還是 3？

(() => {
  try {
    return 2;
  } finally {
    return 3;
  }
})();

??解答

答案是 3，這是為什么呢？這是因?yàn)樵?try...catch...finally 語句中，無論是否拋出異常 finally 子句都會執(zhí)行。此外，如果拋出異常，即使沒有 catch 子句處理異常，finally 子句中的語句也會執(zhí)行。

??參考

• MDN try...catch^[2]

2. [] 和 null 都是對象

?問題

下面 3 行代碼返回結(jié)果是什么？

typeof [];
typeof null;

null instanceof Object;

??解答

返回結(jié)果是這樣的：

typeof []; // -> 'object'
typeof null; // -> 'object'

null instanceof Object; // false

typeof 操作符返回一個字符串，且必須符合 Table 37: typeof 操作符 返回值^[3]。對于沒有實(shí)現(xiàn) [[Call]] 的 null、普通對象、標(biāo)準(zhǔn)特異對象和非標(biāo)準(zhǔn)特異對象，它返回字符串 'object'。

console.log(typeof 42);
// expected output: "number"

console.log(typeof '前端自習(xí)課');
// 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]'

??參考

• MDN typeof^[4]

3. 箭頭函數(shù)返回 undefined

?問題

函數(shù) f2 執(zhí)行后為什么返回了 undefined？

let f1 = () => '前端自習(xí)課';
f1(); // -> '前端自習(xí)課'

let f2 = () => {};
f2(); // -> undefined

??解答

我們第一眼感覺應(yīng)該是返回 {}，可是卻返回了 undefined，這本質(zhì)原因是因?yàn)榧^函數(shù)返回的 {} 是箭頭函數(shù)語法的一部分，我們寫一個測試用例就能看出來：

let f2 = () => {
    return '前端自習(xí)課'
};
f2(); // -> '前端自習(xí)課'

因此上面 f2 函數(shù)返回的是 undefined，當(dāng)然，如果需要返回一個 {} 對象也是可以的，只需要使用括號將返回值包裹起來：

let f2 = () => ({});
f2(); // -> {}

4. 還能使用反引號執(zhí)行函數(shù)？

?問題

調(diào)用函數(shù)除了下面的方式，還有其他方式嗎？

function f(...args) {
  return args;
}

f(1, 2, 3); // -> [ 1, 2, 3 ]

當(dāng)然還有啦，我們可以使用「反引號」調(diào)用：

f`Hello string ${'前端自習(xí)課'}, Hello boolean ${false}, Hello array ${[1, 2, 3]}`;
/*
[
    ["Hello string ",  ", Hello boolean ", ", Hello array ", ""],
    "前端自習(xí)課",
    false,
    [1, 2, 3]
]
*/

??解答

這個看著很神奇的樣子，但是實(shí)際上用的是模版字符串^[5]。這是一種高級形式的模版字符串，是帶標(biāo)簽的模版字符串。

上面示例代碼中：f 函數(shù)是模版字面量的標(biāo)簽，標(biāo)簽可以用函數(shù)解析模板字符串。標(biāo)簽函數(shù)的第一個參數(shù)包含一個字符串值的數(shù)組。其余的參數(shù)與表達(dá)式相關(guān)。

??參考

• MDN 模版字符串^[6]。

5. JavaScript 中也有標(biāo)簽？

?問題

下面這種寫法會有問題嗎？

foo: {
  console.log("Hello");
  break foo;
  console.log("前端自習(xí)課");
}

??解答

答案是沒問題，會返回 Hello 的字符串。因?yàn)?foo 被識別為一個標(biāo)簽，然后執(zhí)行后面 console.log("Hello")，然后執(zhí)行 break foo 中斷執(zhí)行。

我們經(jīng)常會使用帶標(biāo)簽的語句和 break/continue 語句一起使用，從而實(shí)現(xiàn)結(jié)束或繼續(xù)循環(huán)：

let str = '';

loop1:
for (let i = 0; i < 5; i++) {
  if (i === 1) {
    continue loop1;
  }
  str = str + i;
}

console.log(str);
// expected output: "0234"

??參考

• MDN label^[7]

6. {}{} 是 undefined

?問題

我們可以在控制臺測試下面代碼。類似這樣的結(jié)構(gòu)會返回最后定義的對象中的值。

{}{}; // -> 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 '{'

??解答

當(dāng)解析到 {} 會返回 undefined，而解析 {foo: 'bar'}{} 時，表達(dá)式 {foo: 'bar'} 返回 'bar'。

這里的 {} 有兩重含義：表示「對象」，或表示「代碼塊」。

例如，在 () => {} 中的 {} 表示「代碼塊」。所以我們必須加上括號：() => ({}) 才能讓它正確地返回一個對象。

因此，我們現(xiàn)在將 {foo: 'bar'} 當(dāng)作「代碼塊」使用，則可以在終端中這樣寫：

if (true) {
  foo: "bar";
} // -> 'bar'

啊哈，一樣的結(jié)果！所以 {foo: 'bar'}{} 中的花括號就是表示「代碼塊」。

歡迎關(guān)注我，我將分享更多有用的內(nèi)容~

Reference