10 道 JavaScript 考題，測測你多了解這個古怪的語言
2024年4月12日
最近 Product Hunt 上有個獲得當日排名第二的小產品，是一個名叫 JavaScript Quiz 的網站。該網站會隨機出 10 題 JavaScript 的題目，來檢驗你對這門語言的理解程度。每次拿到的可能是不同題目，以下是我們在玩的時候遇到的題目。除了解答，這邊也附上說明。推薦大家也去玩玩。
第一題
console.log(018 - 015);
第二題
console.log(typeof typeof 1)
第三題
console.log(0.1 + 0.2 == 0.3)
第四題
const numbers = [33, 2, 8];
numbers.sort();
console.log(numbers[1])
第五題
console.log(false == '0');
第六題
let array = [1, 2, 3];
array[6] = 9;
console.log(array[5]);
第七題
console.log(typeof NaN);
第八題
console.log(('b' + 'a' + + 'a' + 'a').toLowerCase());
第九題
const isTrue = true == [];
const isFalse = true == ![];
console.log(isTrue + isFalse);
第十題
console.log("This is a string." instanceof String);
解答
- 第一題
5 - 第二題
string - 第三題
false - 第四題
33 - 第五題
true - 第六題
undefined - 第七題
number - 第八題
'banana' - 第九題
0 - 第十題
false
詳細解說
第一題
console.log(018 - 015); 之所以是 5，是因為在 JavaScript 當中，數字前面如果有 0，就會變成八進制，而不是十進制。換句話說，只有 0 到 7 是合理的數字，018 沒辦法被八進制表達，所以會被當成十進制的 18；而 015 在八進制是 13，所以會變成 18 - 13 因此是 5。
第二題
console.log(typeof typeof 1) 可以拆成兩段來看，先看 typeof 1 會得到 'number' 字串，而 typeof 'number' 因為是看一個字串的型別，所以會是 string。
第三題
console.log(0.1 + 0.2 == 0.3) 會是 false 的原因，詳細可以看 在 JavaScript 中 0.1 + 0.2 會是多少？為什麼？如何避免相關問題？。
第四題
如果這題選 8，代表忽略 Array.sort 的 compareFn 如果沒有傳入，預設會在排序時，把值先轉成字串，所以用字串排出來會是 ["2", "33", "8"];。關於 compareFn 可以看 JavaScript 中的 sort 傳入 (a,b) => b - a 會是升序還是降序？為什麼呢？。
第五題
console.log(false == '0') 會印出 true 不是因為 false 與 '0' 相等，而是在 JavaScript 當中的 == 在比較時會做型別轉換，所以在比較時變成 Number(false) 與 Number('0') 的比較，而這兩個都會被轉成數字 0，所以被判斷為相等。要避免這問題，可以用 === 或 Object.is，詳細可見 在 JavaScript 當中，==、=== 與 Object.is()的區別 一文。
第六題
之所以是 undefined 是因為雖然在 6 的位置加上，但因為在 3、4、5 的位置並沒有賦予值，所以 5 的位置會是 undefined。
[1, 2, 3, undefined, undefined, undefined, 9]
第七題
在 JavaScript 中的 NaN 是 number 型別。要如何理解為何 NaN 是 number 型別呢? 想像一下假如今天我們要用 parseFloat 來處理 number 的型別的值，假如一般數字等顯然沒問題，但假如是非數字傳入該怎麼辦? 這時有一個非數字又是數字型別的 NaN ，就能用來概括代表。
第八題
console.log(('b' + 'a' + + 'a' + 'a').toLowerCase()); 會印出 'b' + 'a' 是字串相加，直觀會印出 'ba'。然而 'ba' + + 'a' 因為中間的 + + 讓 JavaScript 無法處理，所以會變成 NaN，所以整個會變成 'baNaNa'，然後最後的 toLowerCase 會把大寫都變小寫，所以得到 'banana'。
第九題
這題可以先看 const isTrue = true == [];，雖然變數叫做 isTrue，但其實 true == [] 會是 false 因為這兩個不同型別，會被轉換，實際上這兩個比較是 Number(true) 與 Number([]) 比，而它們分別是 1 跟 0。
接著看 const isFalse = true == ![]; ，因為這邊 ![] 會是 false，所以跟上面的比較不一樣，是直接比同型別，所以是 true == false 會得到 false。
因此印出的會是 console.log(false + false) 會被轉換型別成為 console.log(Number(false) + Number(false)) 所以會是 console.log(0 + 0) 也就得到 0。
第十題
console.log("This is a string." instanceof String); 直觀可能會覺得是 true，但實際會得到 false，這題也是我們自己在做的時候答錯的一題。之所以是 false，是因為 "This is a string." 是 JavaScript 原始值，所以不是 String 物件的實例。
如果是 new String("This is a string.") instanceof String 才會回傳 true。