型別 - 面試核心 | JavaScript

阿榮-avatar-img
發佈於前端
更新 發佈閱讀 8 分鐘
來源:JavaScript 型別篇 - JS 面試常見核心知識

一、型別轉換

顯性

原始型別包裹物件

console.log(typeof Number('1'));

原形方法

const number = 1;
console.log(typeof number.toString());

原形方法可以透過 new Number() 展開 prototype 來查看,其他原始型別也是使用同樣的方式。

raw-image

一元運算子

  • 轉數值
console.log(+ '1');
console.log(+ true);
console.log(- true);
  • 邏輯運算子

! 表示 not

console.log(!0); // true
console.log(!1); // false

console.log(!!1); // true


隱性

+運算子 (二元運算子)

  • 規則一:前後運算元其中之一為 "字串"型別,+視為字串運算子
  • 規則二:前後運算元如果無法轉型為原始型別 (就是指物件型別),+視為字串運算子。
  • 規則三:上述情況外,+視為算數運算子。
  • BigInt 和 Number 型別不能混合運算
  • Symbol 不能轉型

總結:前後運算元其中一個是字串或物件型別,+ 視為字串運算子。

console.log(1 + 1); 
​console.log('這是' + '一句話');
console.log(1 + true);

// 2
// '這是一句話'
// 2​
console.log(1 + '這是一句話');
console.log(true + true);

// '1這是一句話'
// 2

物件型別會被套用 String() 轉型

String({}) ➡️ '[object Object]'

String([]) ➡️ ''

console.log(1 + {});
console.log([1]);
console.log(1 + [1]);
console.log(1 + [1, 2]);

// 1[object Object]
// '1'
// '11'
// '11,2'
console.log(1n + 3n);
console.log(100n * 100n);
console.log(1 + 1n);

// 4n​
// 10000n​

// 報錯:uncaught typeError:
// - cannot mix BigInt and other types, use explicit conversions
console.log(typeof Symbol(1));
console.log(Symbol(1) + 1); // 規則三
console.log(Symbol(1) + true); // 規則三
console.log(Symbol(1) + null); // 規則三
console.log(Symbol(1) + 1n); // 規則三
// Uncaught TypeError: Cannot convert a Symbol value to a number


console.log(Symbol(1) + {}); // 規則二
// Uncaught TypeError: Cannot convert a Symbol value to a string


console.log(Symbol(1) + '123'); // 規則一
// Uncaught TypeError: Cannot convert a Symbol value to a string


二、型別比較

=== 嚴格比較

console.log(NaN === NaN);

// false

物件型別相比會是 false。因為當使用 === 進行比較時,將檢查這兩個物件是否具有相同的參考(是否指向內存中的同一位置)。

[] === [] 為例,每個空陣列字面量 [] 都會創建一個全新的陣列物件,分別存在記憶體中的不同位置,具有不同的參考。所以就算這兩個陣列在結構上(即內容和順序)完全相同,它們也是兩個獨立的物件。[] === [] 實際上是在比較兩個指向不同記憶體位置的參考,因為它們的參考不同,結果為 false

console.log({} === {});
console.log([] === []);
console.log(new Number(1) === new Number(1));

// false
// false
// false
console.log(+0=== -0);

// true


== 寬鬆比較

== 在比較兩個值之前,會先強制轉換型別與值

比對表:https://dorey.github.io/JavaScript-Equality-Table/

Number、String、Boolean

這三者進行比較時,都使用 Number 來轉型。

console.log(1 == true);
console.log(3 == true);

// true​
// false,因為 true 轉型後 Number(true) 會是 1


null、undefined

不轉型,跟其他值相比都是 false,但 null 和 undefined 相比會是 true

console.log(null == undefined);

//​ true


console.log(null == 0);
console.log(undefined == 0);
console.log(undefined == '');

// false
// false
// false


BigInt

轉型為 「數學值」,沒有 NaN、沒有小數點、沒有最大值

其他概念和 Number 接近

console.log(1 == 1n);
console.log(1 === 1n);
console.log(9007199254740991 == 9007199254740991n);
console.log(9007199254740993 == 9007199254740993n); // 超出最大安全數,不精準

// true​
// false​
// true
// false


物件和非物件比較

物件和其他型別比較,會透過「包裹物件」來把物件轉成相同的型別

例外:

  • 布林會用 Number 轉型 (不是使用 Boolean 轉型)
  • 陣列轉數值,會先 toString 再套用 Number
console.log({} == 'object Object');
console.log({} == 1);
console.log({} == '1234');
console.log([1] == true);

// true​
// false
// false
// true​
console.log([] == 0);

// 先 toString 再套用​ Number,[] 會變成 0
// true

console.log([1] == 1);

// true

console.log([1, 2] == 12);

// 先 toString 再套用​ Number,[1, 2] 會變成 NaN
// false​


Object.is 同值比較

比較任意兩個值是不是相等。

console.log(Object.is(1, 1)); 
console.log(Object.is(1, "1"));

// true
// false

NaN/NaN 和 +0/-0 的比較問題,可以透過 Object.is 來分辨。另外,分辨 NaN 也可以使用 Number.isNaN

console.log(Object.is(+0, -0)); 
console.log(Object.is(NaN, NaN));

// false
// true


console.log(Number.isNaN(NaN));
console.log(Number.isNaN('NaN'));

// true
// false,Number.isNaN 不會將 字串 NaN 視為NaN


資料來源

留言
avatar-img
留言分享你的想法!
avatar-img
阿榮 | 前端 ~ 互動藝術程式
2會員
39內容數
主要放程式學習筆記,分享 Creative Coding 相關內容、作品
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/15
2024/04/15
2024/04/10
立即(調用)函式 (簡稱 IIFE,Immediately Invoked Function Expression) 是種在定義完可以馬上執行的函式表達式。
Thumbnail
2024/04/10
立即(調用)函式 (簡稱 IIFE,Immediately Invoked Function Expression) 是種在定義完可以馬上執行的函式表達式。
Thumbnail
看更多
你可能也想看
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
Thumbnail
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
TypeScript是一種由Microsoft開發和維護的開源編程語言。它是JavaScript的超集,主要擴展了JavaScript的語法,增加了靜態類型檢查和其他特性,使得開發大型應用程序更為方便和可靠。
Thumbnail
TypeScript是一種由Microsoft開發和維護的開源編程語言。它是JavaScript的超集,主要擴展了JavaScript的語法,增加了靜態類型檢查和其他特性,使得開發大型應用程序更為方便和可靠。
Thumbnail
這些章節的目的是為了介紹JavaScript中的各種數據類型,包括基礎類型和物件類型,以及如何將數據從一種類型轉換為另一種類型。此外,還介紹了如何創建自定義類型,以及如何使用JavaScript中的陣列、集合和字典。
Thumbnail
這些章節的目的是為了介紹JavaScript中的各種數據類型,包括基礎類型和物件類型,以及如何將數據從一種類型轉換為另一種類型。此外,還介紹了如何創建自定義類型,以及如何使用JavaScript中的陣列、集合和字典。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
Thumbnail
JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News