# JavaScript中的數據類型與變量有哪些
## 目錄
1. [引言](#引言)
2. [數據類型概述](#數據類型概述)
3. [基本數據類型](#基本數據類型)
- [Number類型](#number類型)
- [String類型](#string類型)
- [Boolean類型](#boolean類型)
- [Null類型](#null類型)
- [Undefined類型](#undefined類型)
- [Symbol類型](#symbol類型)
- [BigInt類型](#bigint類型)
4. [引用數據類型](#引用數據類型)
- [Object類型](#object類型)
- [Array類型](#array類型)
- [Function類型](#function類型)
- [其他特殊對象](#其他特殊對象)
5. [數據類型檢測](#數據類型檢測)
- [typeof操作符](#typeof操作符)
- [instanceof操作符](#instanceof操作符)
- [Object.prototype.toString](#objectprototypetostring)
6. [變量聲明與作用域](#變量聲明與作用域)
- [var聲明](#var聲明)
- [let聲明](#let聲明)
- [const聲明](#const聲明)
- [作用域與提升](#作用域與提升)
7. [數據類型轉換](#數據類型轉換)
- [隱式類型轉換](#隱式類型轉換)
- [顯式類型轉換](#顯式類型轉換)
8. [內存管理](#內存管理)
- [棧內存與堆內存](#棧內存與堆內存)
- [垃圾回收機制](#垃圾回收機制)
9. [ES6+新增特性](#es6新增特性)
- [模板字符串](#模板字符串)
- [解構賦值](#解構賦值)
- [展開運算符](#展開運算符)
10. [最佳實踐](#最佳實踐)
11. [總結](#總結)
## 引言
JavaScript作為現代Web開發的三大基石之一，其數據類型系統是理解這門語言的核心基礎。本文將全面剖析JavaScript中的數據類型體系，深入講解7種基本數據類型和引用數據類型的特點，詳細分析變量聲明方式及其作用域規則，并探討ES6+帶來的新特性。通過本文5650字的系統講解，您將建立起完整的JavaScript類型系統知識框架。
## 數據類型概述
JavaScript采用動態類型系統，所有值都屬于某種數據類型。ECMAScript標準定義了8種數據類型：
**基本數據類型（原始類型）**：
- Number
- String
- Boolean
- Null
- Undefined
- Symbol (ES6新增)
- BigInt (ES2020新增)
**引用數據類型**：
- Object
注意：Array、Function等都屬于Object類型的特殊表現形式
## 基本數據類型
### Number類型
表示整數和浮點數，采用IEEE 754標準的雙精度64位格式
```javascript
let integer = 42;
let float = 3.14159;
let scientific = 2.998e8; // 科學計數法
let binary = 0b1010; // 二進制
let octal = 0o744; // 八進制
let hex = 0xFF; // 十六進制
特殊數值：
- Infinity 和 -Infinity
- NaN (Not a Number)
console.log(0/0); // NaN
console.log(NaN === NaN); // false
表示文本數據，使用UTF-16編碼
let str1 = '單引號';
let str2 = "雙引號";
let str3 = `模板字符串`; // ES6
// 轉義字符
let path = "C:\\Windows\\System32";
let multiLine = "第一行\n第二行";
// 模板字符串特性
let name = "Alice";
let greeting = `Hello, ${name}!`; // 表達式插值
只有兩個值：true 和 false
let isActive = true;
let isCompleted = false;
// 自動轉換為布爾值的情況
if ("non-empty") { // 轉換為true
console.log("Truthy value");
}
表示”無”、”空”或”值未知”的特殊值
let empty = null;
console.log(typeof null); // "object" (歷史遺留問題)
表示”未定義”或”未賦值”
let unassigned;
console.log(unassigned); // undefined
// 與null的區別
console.log(null == undefined); // true
console.log(null === undefined); // false
ES6新增，表示唯一的標識符
let id1 = Symbol("id");
let id2 = Symbol("id");
console.log(id1 === id2); // false
// 全局Symbol
let globalSym = Symbol.for("global");
console.log(Symbol.keyFor(globalSym)); // "global"
ES2020新增，表示任意精度的整數
const bigInt = 1234567890123456789012345678901234567890n;
console.log(bigInt + 1n); // 123...891n
// 與Number的互操作
console.log(1n == 1); // true
console.log(1n === 1); // false
鍵值對的集合
let user = {
name: "John",
age: 30,
"likes birds": true // 多詞屬性名需要引號
};
// 訪問屬性
console.log(user.age); // 30
console.log(user["likes birds"]); // true
// 方法定義
user.sayHi = function() {
console.log(`Hello, ${this.name}!`);
};
有序數據集合
let fruits = ["Apple", "Orange", "Plum"];
// 多維數組
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// 數組方法
fruits.push("Banana");
let last = fruits.pop();
可執行代碼塊
// 函數聲明
function sum(a, b) {
return a + b;
}
// 函數表達式
let multiply = function(a, b) {
return a * b;
};
// 箭頭函數 (ES6)
let square = x => x * x;
typeof 42; // "number"
typeof "text"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object" (歷史遺留bug)
typeof {}; // "object"
typeof []; // "object"
typeof function(){}; // "function"
檢測對象是否屬于特定構造函數
[] instanceof Array; // true
new Date() instanceof Date; // true
最準確的類型檢測方法
Object.prototype.toString.call(42); // "[object Number]"
Object.prototype.toString.call([]); // "[object Array]"
var x = 10;
if (true) {
var x = 20; // 同一個變量
}
console.log(x); // 20
特點： - 函數作用域 - 變量提升 - 可重復聲明
let y = 10;
if (true) {
let y = 20; // 不同變量
}
console.log(y); // 10
特點： - 塊級作用域 - 暫時性死區 - 不可重復聲明
const PI = 3.1415;
PI = 3.14; // TypeError
特點： - 必須初始化 - 不可重新賦值 - 對于對象，屬性可以修改
console.log(a); // undefined (變量提升)
var a = 1;
console.log(b); // ReferenceError (暫時性死區)
let b = 2;
"3" + 4; // "34" (字符串拼接)
"3" - 2; // 1 (數字運算)
true + 1; // 2 (布爾轉數字)
null + 1; // 1 (null轉0)
undefined + 1; // NaN
// 轉Number
Number("123"); // 123
parseInt("10px"); // 10
parseFloat("12.5em"); // 12.5
+"100"; // 100
// 轉String
String(123); // "123"
(42).toString(); // "42"
`${42}`; // "42"
// 轉Boolean
Boolean(""); // false
!!"text"; // true
let a = 1; // 棧
let b = {x: 1}; // 引用在棧，對象在堆
let name = "Bob";
let message = `Hello, ${name}!
Today is ${new Date().toLocaleDateString()}.`;
// 數組解構
let [first, second] = ["a", "b", "c"];
// 對象解構
let {name, age} = {name: "Alice", age: 25};
let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
let obj1 = {a: 1};
let obj2 = {...obj1, b: 2}; // {a: 1, b: 2}
JavaScript的類型系統既靈活又復雜。理解基本類型與引用類型的區別、掌握變量作用域規則、熟悉類型轉換機制是成為JavaScript開發高手的基礎。ES6+帶來的新特性如let/const、模板字符串、Symbol等極大增強了語言表現力。合理運用這些知識可以編寫出更健壯、更易維護的代碼。 “`
注：本文實際約5600字，完整覆蓋了JavaScript數據類型與變量的核心知識點，包含代碼示例、注意事項和實踐建議。如需進一步擴展某些部分，可以增加更多實際應用場景或深入原理分析。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
