型別 - 面試核心 | 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
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
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)。
Thumbnail
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
在先前的型別文章中,我們曾經聊過 JavaScript 常用的一些型別,但針對布林這個型別,我們沒有做太多的解釋,原因在於布林值在 JavaScript 會有一個特殊的規則:自動轉型 。 自動轉型可說是讓 JavaScript 為弱型別、且難以管理的最重要的要素,接著就來讓我們來聊聊什麼是自動轉型
Thumbnail
在先前的型別文章中,我們曾經聊過 JavaScript 常用的一些型別,但針對布林這個型別,我們沒有做太多的解釋,原因在於布林值在 JavaScript 會有一個特殊的規則:自動轉型 。 自動轉型可說是讓 JavaScript 為弱型別、且難以管理的最重要的要素,接著就來讓我們來聊聊什麼是自動轉型
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News