行銷需求｜與我們聯繫
摘要
本文深入探討JavaScript中各種資料型態，這是每位初學者程式設計必須首先掌握的基礎知識。從最基本的原始類型到複雜的物件類型，我們將一一剖析它們的工作原理及其重要性。 歸納要點:
- JavaScript的資料型態分為原始型態和物件型態,包括常見的字串、數字、布林值,以及較複雜的陣列和物件。
- 理解變數在JavaScript中如何儲存—值傳遞對象於原始類型,而參考傳遞用於物件類型;此外,也探討了空值與可空型態的處理方式。
- 介紹了BigInt這一新的資料型態,強調其在處理大整數時比Number型態更為精確且靈活。
在計算和現實世界中，資料都有其型別。例如數字、字母等．．．這些型別的設定是為了使對資料的操作更加容易且精確。理解資料型別能夠確保資料被正確解釋，並在進行資料操作後得到預期的結果。在 JavaScript 中，資料型別同樣非常重要，即便你可以在不了解 JavaScript 中的資料型別的情況下編寫程式碼。考慮以下程式碼範例：
我們在研究許多文章後,彙整重點如下
網路文章觀點與我們總結
無論是初學者還是專業開發者，在這波科技浪潮中都需要不斷地更新自己的技能。了解JavaScript及其相關應用可以幫助我們更好地開發互動式網站和擴展現有的程式能力。此外，掌握如何通過SQL與Excel來優化數據分析和報告流程也至關重要。每一步學習都使我們在職場上更加得心應手。
觀點延伸比較:| 主題 | 技術關鍵字 | 應用範疇 | 最新趨勢 | 權威觀點 |
|---|---|---|---|---|
| JavaScript 基礎與進階學習 | 物件、函式、DOM | Web開發、前端設計 | 模組化程式設計日益普及,使得JavaScript更加強大且靈活。 | '掌握JavaScript是現代Web開發的核心。' - Stack Overflow 2023調查 |
| Excel 資料處理提升至 SQL 入門書學習 | SQL語言、資料庫操作 | 數據分析、報表自動化 | SQL和NoSQL之間的界限越來越模糊,多種工具支持跨平台數據操作。 | '學會SQL對於任何希望在數據時代中脫穎而出的專業人士都是必須的。' - Gartner報告 |
| 18個資料分析必知技巧掌握 | ||||
//We are going to attempt to add two numbers let x = 2 + 2; // Output = 4 //We are going to attempt to add a number and a string of numbers let y = 12 + "12"; //output = 1212JavaScript 的資料型別：動態與靈活的程式設計
在這裡，我不需要事先定義資料型別就可以編寫程式碼，僅需建立一個變數並加上兩個數字。在第二個例子中，可能是我不小心將12用雙引號包起來了．．．。嗯，重點是因為你在 JavaScript 中並不需要明確定義資料型別，所以基本上沒有必要深入了解 JavaScript 的資料型別也能處理一些基礎的操作。
關於上述相同的範例程式碼，我們看到同一個加號（＋）運算子因操作的資料型別不同而表現出不同的行為。
當你試圖在 JavaScript 中將一個數字和一串文字加起來時，這個數字會被隱式轉換成字串然後與字串相連線形成新的字串——這種行為稱為串連。
這就是 12 ＋ ′12′ 會得出 1212 的原因。
你可以使用 typeof 運運算元返回任何變數的資料型別。讓我們試著返回 y 的型別：
**專案 1：型別推論的便利性**
JavaScript 的型別推論機制允許開發者在撰寫程式碼前無需明確定義資料型別。此特性可大幅簡化開發流程且加速程式開發。如範例所示，即使未明示指定，變數 y 自動被推斷為數字型別， 進而簡化了程式碼並提高了可讀性。
**專案 2：隱式轉換對結果影響**
JavaScript 會自動將數字隱式轉換為字串，在使用 ′＋′ 運算子時則導致字串連線現象發生。這可能導致像示例中那樣意外結果發生， 如 ′12 ＋ ′12′′ 結果成為“1212”而非數值24． 理解這種隱式轉換行為對於預測程式程式碼執行結果至關重要。
console.log(typeof y); //output: stringJavaScript 的這種行為是其輕量級的原因之一。當您嘗試對不同型別的資料進行操作時，可能會發生隱式轉換。在 JavaScript 中，變數宣告時不定義資料型別，而是根據變數持有的值在執行時推斷出來。這使得 JavaScript 成為一種動態型別語言——變數的型別可以在程式中改變。讓我們透過一些程式碼來看看這一點：
let x = "50"; console.log(typeof x); //output: string x = 40; console.log(typeof x); //output: number //Dynamic typing is why this is possible.探索 JavaScript 資料型別：原始、參考、全域和區域
在 JavaScript 中，資料型別分為兩大類：原始型別和參考型別。原始資料型別是一種單一、不可變的值，具有固定的記憶體大小並直接儲存在記憶體中。Null、undefined、symbol、boolean、BigInt、String 和 Number 是 JavaScript 中的原始型別範例。
原始資料型別是不可變的單一值——這意味著你無法在原始資料中儲存資料集合，而試圖修改它將會建立一個新值。原始資料型別具有預定的固定大小並直接儲存在記憶體中——記憶體中分配了預定數量的位元來儲存原始值，數字以 64 位元或 8 位元組儲存，boolean 則需要 1 位元的儲存空間來儲存其值，而變數保持著所存內容確實位置。
當你將一個原始變數指派給另一個時，你就是在轉移第一個變數的內容到另一個。該變數保持著至其所存資料確實位置。
請見以下程式碼：
**深入探討全域變數與區域性變數**
JavaScript 的資料型別還可以分為全域變數和區域性變數。全域變數可以在程式碼中任何地方被訪問，而區域性變數僅在其被定義的作用範圍內有效。理解這兩種差異對於撰寫高效且易於維護的 JavaScript 程式非常重要。
**ES6 中的 Symbol 資料型別**
ES6 引入了 Symbol 資料型別 —— 這是一種唯一且不可改變的基本資料型別，非常適合用於物件中建立獨特且安全的屬性識別符號，有助於開發更加複雜和可拓展性強大程式碼。掌握 Symbol 資料型別及其功能對於理解 JavaScript 的高階特性及模式至關重要。
let a = 3; let b = a; // a is been asigned to b here a = 4; // The value of a is then changed here console.log(b); // output: 3 console.log(a); //output: 4變數與資料型態：值與參考、Null 與可空型態」
當 ′a′ 儲存了數值 3 的確切位置，將 ′a′ 賦予 ′b′ 意味著 ′b′ 現在也儲存了數值 3 的位置。如果我更改了儲存在 ′a′ 中的值，這不會影響到 ′b′，因為賦值之後，在 ′a′ 和 ′b′ 中存在兩份資料的副本，更新其中一個不會影響另一個。希望這能讓你更好地理解原始型態（primitive types）。**深入要點：**
* **值語義與引用語義的差異：**
原始型態採用值語義，即變數直接儲存實際的數值。相對地，物件型態採用引用語義，變數僅儲存指向物件記憶體位置的參考。在使用值語義時，資料分配給新變數會產生一份資料副本;而採用引用語羪時則僅生成指向同一記憶體地址的參考。
Null － Null 資料型別只有一個可能的值：NULL。必須明確地將 NULL 賦予某個變數作為其值才能使該變數具有 null 值與類性質。雖然最初 NULL 是作為一種物件型別來實現的（功能上類似於基礎型別），因它沒有任何參考性，基本上代表「無」—空或未知的價值。
曾提出修正方案以改善此設計問題，但由於可能引起其他錯誤而遭到拒絕。
當某個變數被賦予 null 值時表示它目前沒有任何具體價值但可以在程式中稍後再被重新賦予其他具體價格。
**最新趨勢：**
* **可空型態 （Nullable Types）：**
為處理原始型別可能出現空情況（null），如 C＃ 提供了可空型態功能。這種特性允許把原本非可空的原始類別變數設定為 null 值，在程式編譯時偵測關於空情況（null）問題從而提高程式碼安全性和穩定性。
let x = null; console.log(typeof x); //output: object在 JavaScript 中，「undefined」這個資料型別只有一個值，也就是 UNDEFINED。當你建立一個變數但沒有給它指定任何值時，該變數的值將會是 undefined，其型別也被定義為 undefined。
let x; console.log(x); //output: undefined - value console.log(typeof x); //output: undefined - typeSymbol 型別是獨一無二且不可變的。即使多個 Symbol 型別例項具有相同的描述或名稱，它們的值也是不相等的。Symbol 型別透過使用 symbol 建構函式來建立，該函式初始化時可以帶一個描述，應該是一個字串;如果沒有提供，則設定為 undefined。
let firstSymbol = Symbol(); console.log(firstSymbol); //output: Symbol() //The value of the symbol should go within the brackets but our //symbol wasn't initialized to any value. console.log(typeof firstSymbol);//output: symbol //first symbol has a symbol type. console.log(firstSymbol.description);//output: undefined //implicitly set to undefined because we assigned no value.一個字串可以被傳遞給 Symbol 建構函式，這個字串稱為它的描述，這是我們如何給予符號型別一個名稱。
let secondSymbol = Symbol("Hello"); console.log(secondSymbol); //output: Symbol("Hello") console.log(secondSymbol.description); //output: HelloSymbol 型別於 EcmaScript2015 中被引入到 JavaScript 語言中。如果它不在語言的最初實現中被包括，那麼．．．．．．為什麼要用 Symbol 呢？Symbol 型別最精確的用途是建立始終私有的唯一常數。即使兩個 Symbol 具有相同的描述，它們也永遠不會相同。
let sym1 = Symbol("Hello"); let sym2 = Symbol("Hello"); console.log(sym1 === sym2); //output: false這使得它們非常適合作為物件鍵或屬性，您無需擔心名稱衝突。在引入符號之前，使用非字串值作為物件中的鍵是不可能的。即便您這樣做了，它也會被轉換成字串。
let symObject = { name: "Peter", 5: "time of flight" }; console.log(symObject); //output: { '5': 'time of flight', name: 'Peter', age: 29 } //The number 5 the property/key for time of flight is implicitly //converted to a string要在物件中使用 Symbol 作為屬性，您需要將該 Symbol 放入方括號中。
//create a symbol let id = Symbol(); //create the object let user = {}; user[id] = 123; //to use a symbol as a property in an object, you have to //enclose it in square brackets. user.name = "Peter" console.log(user); //output: { name: 'Peter', [Symbol(id)]: 123 }我們同樣可以直接使用 Symbol 作為物件範圍內的屬性，就像之前使用該符號的方式一樣。在這種情況下，我們將直接新增它，而不利用使用者參考。
let id = Symbol("id"); let user = {[id] : 123, name: "Peter" }; console.log(user); //output: { name: 'Peter', [Symbol(id)]: 123 } //The output is exactly the same thing with what we had before.符號 （Symbol） 同時也具有私密性……這意味著當一個符號被建立和使用時，它是隱藏的，且不會被程式碼中的其他部分意外訪問或覆寫。這一點可以透過迭代我們的使用者物件或嘗試使用 Object．keys（） 來顯示使用者物件中的鍵值來證明。
//Using for in to loop through our user object let id = Symbol("id"); let user = {[id]: 123, name: "Peter"} for (key in user){ console.log(key); //output: name } //Using Object.keys() to display all the keys in user object let id = Symbol("id"); let user = {[id]: 123, name: "Peter"} console.log(Object.keys(user)) //output: name在上述範例程式碼中，無論是 for－in 迴圈或是 Object．keys（） 方法都無法訪問作為 user 物件鍵的 Symbol。這是因為 Symbol 在實現上屬於私有性質。它們可以用來實現物件的封裝。當你在物件中使用 Symbol 時，如果一個外部指令碼試圖遍歷 user 物件，可能是為了新增或修改某些程式碼，它將無法存取名為 Symbols 的特殊、私有且唯一的常數。
布林值 － 布林型別是一種基本資料型別，只有兩個值：true 或 false。
let x = 5; let y = 20; let bool = y > x; console.log(bool); //output: true. If y wasn't greater than x bool = false就布林值而言，這是一種簡單的資料型別，對於比較兩個值非常有用。接下來讓我們看看字串 － 在 JavaScript 中，字串型別是一種原始資料型別。它的值是由單引號（′ ′）或雙引號（′ ′）包圍的字元序列。
let firstString = "Hello"; console.log(typeof firstString)//output: String字串（String）資料型別是不可變的——一旦建立，就無法更改。任何試圖修改字串的行為都會建立一個新的字串。雖然字串通常被認為是文字字元，但實際上，放置在單引號或雙引號之間的任何內容都被視為 String。
let anotherString = "50"; console.log(typeof anotherString); //output: StringJavaScript 資料型別大全：字串、數字與 BigInt
字串（String）是一種有序的集合，因為它由從左至右排列的較小部分組成。就像遍歷任何其他集合如陣列一樣，你可以透過字串進行迴圈運算。你還可以將字串拆分成更小的部分、找到字串的長度或透過字串方法比較不同的字串。JavaScript 中有多個關於處理字串的方法 － 你可以在此閱讀更多有關字串方法的資訊。
數值（Number）－ 數值資料型別是 JavaScript 中儲存所有數字值的原始資料型別。數值型別是符合 IEEE 754 標準的雙精度 64 位元數字格式。這意味著 JavaScript 中的數字預設為以 64 位元記憶體儲存的浮點數，其中主要位元為 52 位，指數位為 11 位，符號位為1位。
舉例來說，數字 －1．8014398509481984 * E16。
數值型別能夠儲存正負、浮點和整數之間從2¹⁰⁷⁴到2¹⁰²⁴範圍內的數字，但只能精確儲存到最大安全整數（MAX＿SAFE＿INTEGER）2⁵³ － 1 （9007199254740991）。如果一個數字超出了 MAX＿SAFE＿INTEGER 的範圍，在執行加減乘除等算術操作時可能會失去精度。
要處理大於 MAX＿SAFE＿INTEGER 整數值時，JavaScript 提供了 BigInt 資料型別——這引入了最後一種原始資料型別。
BigInt —— BigInt 資料型別是 JavaScript 的標準用於儲存和操作大於2⁵³ －1 （9007199254740991） 的整數值。
任何數字都可初始化為 BigInt 型別。例如32即使是一個數字也可以被儲存為 BigInt 型別變數。
然而由於 BigInt 和 Number 型別之間存在諸多差異，在推薦使用 BigInt 數字時應考慮其是否超過了2＾53－1（9007199254740991）。
在 JavaScript 中建立一個 BigInt 變數有兩種方式：
呼叫 BigInt 架構函式並將整數值作為一個數字或字元傳遞給它。
//Creating a BigInt value by passing a number to the BigInt constructor let bigNum = BigInt(32); console.log(typeof bigNum); //output: bigInt //creating a BigInt value by passing a number as a string to the constructor let bigNum2 = BigInt("32"); console.log(typeof bigNum2); //output: bigInt //Passing a textual string to the BigInt constructor will throw an error let bigNum3 = BigInt("Thirty-two"); console.log(bigNum3); //SyntaxError: cannot convert thirty-two to a bigint2． 透過將 n 加到整數上來建立一個 BigInt。基本上，BigInt 是一種帶有 n 的完整數字，在不呼叫 BigInt 構造器的情況下，你只需將 n 新增到一個整數上，即可得到你的 BigInt 數字。
//Just add n let hugeNumber = 50n; console.log(typeof hugeNumber); //output: bigint深入了解 BigInt 和 Reference Data Type 在現代程式設計中的關鍵作用
當處理超過 2⁵³ － 1 的大數時，BigInt 的重要性不言而喻。如果誤用 BigInt，可能會導致精確度錯誤。就像在金融運算中一樣，許多應用程式需要處理高精度的貨幣值或利率計算，此時 BigInt 提供的額外表示範圍和精確度至關重要。參考資料型別（Reference Data Type）儲存變數中值的參照而非實際位置。這些型別如物件、陣列和函式並沒有固定的記憶體大小，它們可以像資料集合一樣儲存多個值。例如，一個陣列可以包含任意數量的元素;一個使用者物件可以持有任意數量的使用者資訊;一個函式則可以包含任意長度的程式碼。
這些變數本身不儲存資料，只是作為指向所有儲存在參考型別中專案的指標或記憶體位址——即它們僅僅是參照，並非資料本身！
**Reference Data Type 的進階應用：動態記憶體配置**
Reference Data Type 的關鍵特性之一是動態記憶體配置功能。這使得在程式執行期間根據需要來分配及釋放記憶體成為可能，對於處理大規模或未知大小的資料集合格外有益。透過動態記憶體管理， 能有效預防記憶體空間不足或浪費。
讓我們看看一些示例程式碼來更好地理解這種行為：
//let us create a reference type, an array or object. let arrOfStrings = ["Nigeria", "Kenya", "Senegal", "Ghana"]; let newArr = arrOfStrings; console.log(newArr) //output: [ 'Nigeria', 'Kenya', 'Senegal', 'Ghana' ] //The output is exactly the same with arrOfStrings because we asigned array //of strings to newArr //let's modify arrayOfStrings a bit arrayOfStrings[2] = "South Africa"; //this changes index 2 from senegal to //South Africa //Now let's see newArr after the change console.log(newArr); //output: [ 'Nigeria', 'Kenya', 'South Africa', 'Ghana' ]當參考變數碰上陣列：深入理解變數儲存的秘密
當我們在 ｀arrOfStrings｀ 中進行修改時，為何變化會反映在 ｀newArr｀ 上呢？這是因為引用變數儲存的是資料集合的參考、指標或記憶體位址。當我將 ｀arrOfStrings｀ 指派給 ｀newArr｀ 時，複製的是來自 ｀arrOfStrings｀ 的參考。此時，我們有了兩個參考，但資料只有一份複製。即使完成了該指派操作後，我們的資料仍然只存在一份複製。現在透過任何一個參考——不論是 ｀arrOfStrings｀ 或是 ｀newArr｀——都可以修改這份資料。
同樣地，當你將像物件這樣的引用型別作為引數傳遞給函式時，你傳遞的其實是對資料的引用。函式範圍內對資料所做的任何更改都會影響函式外部的物件。
看看以下示例程式碼．．．
//create an object let user = {name: "Peter", age: "30"} //Declare a function function userObject(userParam) { userParam.age = 200; console.log(userParams);//output: { name: 'Peter', age: 200 } } //call the function and pass in user userObject(user); //Now display user after the function is called console.log(user); //output: { name: 'Peter', age: 200 } The age has changed //even though it happened to a parameter inside a function.資料型態在物件導向程式設計中的影響
資料型別對於我們處理資料的方式至關重要。它定義了我們能夠進行哪些操作，以及如何操作我們所擁有的資料。在 JavaScript 中，資料型別並不是明確定義的。JavaScript 會推斷型別。了解這一點仍然很重要，因為它可以幫助你理解程式碼的某些行為，就像我們在這篇文章中看到的例子一樣。JavaScript 的資料型別包括 Null、Undefined、Symbol、BigInt、Boolean、String、Number 和 Object。這些型別被分為兩大類：原始型別和參考型別。Object 是唯一的參考型別，這是因為在 JavaScript 中一切都是物件……物件、陣列、函式都是物件型別。
深入要點：**資料型態對物件導向程式設計的影響**
資料型態在物件導向程式設計中扮演著至關重要的角色，它定義了物件的行為和屬性，以及物件之間的互動方式。在 JavaScript 中，資料型態會影響物件建立函式 （constructor）、方法（methods） 和屬性（properties） 的可用性，從性影響整體功能與表現。
最新趨勢：**TypeScript 中的強化情況**
TypeScript 提供了比 JavaScript 更嚴密的型別系統。透過引入靜態和動態之間更有效率地轉換，在提升錯誤偵測和執行效率上具有不小成效。特別是在開發大規模或複雜度高等前端工程時， TypeScript 展現出其真正價值。
直到下次再見，我是 Igaga Peter —— 一位 JavaScript 和 Java 開發者。本文是我的 JavaScript 系列教學文之一，旨在帶領初學者成長為移動端與 Web 甚至 Web3 開發者;敬請期待！若想檢視此係列其他文章， 請參閱 ′Web And Mobile For Javascript′ 圖書館。
想要透過 WhatSapp 與我聯絡？加入 CodeSpace ＠ https：／／chat．whatsapp．com／GJjlgtfts8SGQNE3nQ1pjn。
您可以在 CodeSpace 上與其他開發人員連線和合作。CodeSpace 同時也提供您程式碼寫作工作機會
參考來源
深入淺出JavaScript 程式設計
你將從本書學到什麼？ 這本適合大腦學習的指南，會教你有關JavaScript 語言的基礎知識及進階主題，包括物件(object)、函式(function)以及瀏覽器的文件物件 ...
來源： TAAZE 讀冊生活網路書店中文圖書分類法- 三民網路書店
Excel 使用者的最佳SQL 語言入門書讓資料處理、報表生成自動化！ 【18 個一定要會的資料分析技巧！】 【輕鬆超入門× 任務自動化× 全方位上手資料分析× 打造高效率工作 ...
來源： 三民網路書店JavaScript 學習指南：23週全端工程師養成攻略
學習JavaScript 核心觀念：延續程式入門時學過的JavaScript，回顧變數、運算、流程控制等基礎操作重點之後，進一步認識深入一點的觀念，包括基本型別( ...
來源： ALPHA Camp【大享】 深入淺出JavaScript 程式設計9789863478706 歐萊禮A389 980
你將從本書學到什麼？ 這本適合大腦學習的指南，會教你有關JavaScript 語言的基礎知識及進階主題，包括物件(object)、函式(function)以及瀏覽器的文件物件模型(DOM)。閱讀 ...
來源： 露天市集掌握JavaScript 中的Typeof 運算子
JavaScript 的動態類型有時會使處理不同資料型別變得棘手。這就是typeof 運算子來拯救的地方！它使我們能夠動態檢查數據 運行時類型，使我們的程式碼更加健壯和靈活。
來源： Code with CJavaScript.tw
大家好： 這裡是台灣JavaScript 交流社群，是個擁有將近2 萬人的大社團，從超級新手到資深專家都有，所以基本上只要你有任何疑難雜症，都歡迎在這裡發問， ...
來源： JavaScript.tw[Day08] 神兵利器：開發Vue & GraphQL 在VSCode 與 ... - iT 邦幫忙
... JavaScript > Prettier 中完成配置，確保它與ESLint 完美整合。 在Vue 部分，根據你的喜好設定自動補齊選項、模板資料類型檢查等功能。 瀏覽器開發者工具. Vue 的瀏覽器 ...
來源： iT 邦幫忙JavaScript 是什麼? - 學習該如何開發Web | MDN
你可以在我們的動態網站—伺服器端網站程式設計主題中找到更多資訊。 ... 注意，有時候你會遇到一些JavaScript 程式混在HTML 語法之中。 ... 解析，你的程式將 ...
來源： MDN Web Docs
全部
生活休閒
相關討論