JavaScript 的十個小知識

2024-12-20

JavaScript

1. JavaScript 與 Java 無關

雖然名字中都有「Java」,但 JavaScript 和 Java 其實是完全不同的語言!因為 Java 在當時很受歡迎,所以取了這個名字來搭順風車。

可參考:Eloquent JavaScript - Introduction

2. NaN 是個數字

NaN 是「Not-a-Number」的縮寫,但有趣的是typeof NaN的結果卻是 number。

javascript
console.log(typeof NaN); // "number"

// 以下運算會得出 NaN
console.log(Infinity - Infinity); // NaN
console.log(0 / 0); // NaN

可參考:Eloquent JavaScript - Values, Types, and Operators

3. 陣列也是物件

如果檢查陣列的類型,會發現它其實是 object,所以同一個 Array 中可以有不同類型的變數。

javascript
console.log(typeof []); // "object"

可參考:W3Schools - Js ArraysEloquent JavaScript - Data Structures: Objects and Arrays

4. 0.1 + 0.2 !== 0.3

JavaScript 中的浮點數計算可能會出現精度遺失的問題,因為 JavaScript 中數字的儲存遵循 IEEE 754 標準,以64位元雙精確度格式來儲存數字。

javascript
console.log(0.1 + 0.2); // 0.30000000000000004

延伸閱讀:為什麼0.1 + 0.2 !== 0.3?如何解決這個問題?

5. JavaScript 沒有真正的類別

在 ES6 出現之前,JavaScript 並沒有 class 的概念。即使現在的 class 語法只是語法糖,背後實現仍然是基於原型繼承。

延伸閱讀:ES6 中的 class 是什麼?和函式構造函式差別是什麼?

6. ===== 的區別

== 會自動進行類型轉換,而 === 則不會。

javascript
console.log(1 == "1");  // true
console.log(1 === "1"); // false

console.log(1 != "1");  // false
console.log(1 !== "1"); // true

可參考:Eloquent JavaScript - Values, Types, and Operators

7. [] + [] 的結果是空字串

將兩個空陣列相加,結果是個空字串,因為陣列會被轉成字串。

javascript
console.log([] + []); // ""
console.log(typeof ([] + [])); // string

補充

  • 要合併陣列可用Array.concat(),詳細參閱MDN
javascript
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]

8. 函式可以有默認參數

在 ES6 中,可以為函式設定默認參數,這讓程式碼更具可讀性。

javascript
function greet(name = "朋友") {
  return `你好, ${name}!`;
}
console.log(greet()); // "你好, 朋友!"

可參考:Eloquent JavaScript - Functions

9. nullundefined 是不同的

雖然它們看起來很相似,但 null 是一個明確代表不存在(空值)的值,而 undefined 則表示變數尚未被賦值。每個變數在初始化前一定都是undefined

javascript
console.log(null == undefined);  // true
console.log(null === undefined); // false

可參考:Eloquent JavaScript - Values, Types, and Operators

延伸閱讀:ㄟ問你喔,null, undefined 和 not defined 是差在哪?

10. 陣列長度是可變的

你可以手動設定陣列的長度,這會影響陣列內容。

javascript
const arr = [1, 2, 3, 4];
arr.length = 2; 
console.log(arr); // [1, 2]

可參考:MDN - JavaScript - Array:length

瓜熊

努力學習 Nuxt 中……