1. JavaScript数据类型概述

JavaScript作为一门动态弱类型语言，其数据类型系统既有简单直观的一面，也有需要特别注意的细节。理解这些数据类型的特点和区别，是掌握JavaScript编程的基础。

在JavaScript中，数据类型可以分为两大类：原始类型（Primitive types）和对象类型（Object type）。原始类型包括：Undefined、Null、Boolean、Number、BigInt、String和Symbol。而对象类型则包含了各种复杂的数据结构，如Object、Array、Function等。

注意：虽然typeof null返回"object"，但这被认为是JavaScript早期实现的一个bug，null实际上是原始类型而非对象类型。

1.1 动态类型与弱类型特性

JavaScript的动态类型特性意味着变量没有固定的类型，可以在运行时被赋予不同类型的值：

let example = 42; // 现在是Number类型 example = "hello"; // 现在变为String类型 example = true; // 现在变为Boolean类型

弱类型特性则表现在类型转换上，当操作涉及不匹配的类型时，JavaScript会尝试隐式转换而不是直接报错：

const num = 42; const result = num + "1"; // Number被隐式转换为String console.log(result); // "421" (字符串连接)

这种特性虽然方便，但也可能带来意想不到的结果，因此理解各种类型之间的转换规则非常重要。

2. 原始数据类型详解

2.1 Undefined类型

Undefined类型只有一个值：undefined。它表示变量已声明但未初始化时的默认值。

常见场景：

• 声明变量但未赋值
• 访问对象不存在的属性
• 函数没有明确返回值时

let uninitialized; console.log(uninitialized); // undefined const obj = {}; console(obj.nonExistent); // undefined function noReturn() {} console.log(noReturn()); // undefined

2.2 Null类型

Null类型也只有一个值：null。它表示有意地缺少任何对象值。

与undefined的区别：

• undefined表示"未定义"，是语言自动赋予的
• null表示"空值"，是开发者主动设置的

let empty = null; // 明确表示这个变量目前没有值 // 检查null的正确方式 if (empty === null) { console.log("It's null"); }

2.3 Boolean类型

Boolean类型有两个值：true和false，用于表示逻辑真伪。

在条件判断中，其他类型的值会被自动转换为Boolean值：

• 假值(falsy)：false、0、""、null、undefined、NaN
• 其他所有值都是真值(truthy)

console.log(Boolean("hello")); // true console.log(Boolean(0)); // false console.log(Boolean([])); // true (空数组是truthy!)

2.4 Number类型

Number类型采用IEEE 754标准的64位双精度浮点数表示，可以表示的范围大约是±5.0×10⁻³²⁴到±1.8×10³⁰⁸。

特殊值：

• NaN (Not a Number)：表示数学运算无法得到有效数字
• Infinity：表示超出Number能表示的最大值
• -0：与+0在数学上相同，但在某些运算中表现不同

console.log(1 / 0); // Infinity console.log(Math.sqrt(-1)); // NaN console.log(1 / -0); // -Infinity // 检查NaN的正确方式 const notNumber = NaN; console.log(Number.isNaN(notNumber)); // true console.log(notNumber === notNumber); // false (NaN是唯一不等于自身的值)

2.5 BigInt类型

BigInt是ES2020新增的类型，用于表示任意精度的整数，可以安全地存储和操作大整数。

创建方式：

• 在数字后加n后缀
• 调用BigInt()函数

const big = 1234567890123456789012345678901234567890n; const alsoBig = BigInt("1234567890123456789012345678901234567890"); console.log(big + 1n); // 1234567890123456789012345678901234567891n // 不能与Number混合运算 console.log(big + 1); // TypeError: Cannot mix BigInt and other types

2.6 String类型

String类型表示文本数据，采用UTF-16编码。JavaScript中的字符串是不可变的。

创建方式：

• 单引号(')
• 双引号(")
• 反引号(`) - 模板字符串

const str1 = 'hello'; const str2 = "world"; const template = `Hello ${str2}`; // "Hello world" // 字符串方法不会修改原字符串 const original = " Hello "; const trimmed = original.trim(); console.log(original); // " Hello " console.log(trimmed); // "Hello"

2.7 Symbol类型

Symbol是ES6引入的原始类型，表示唯一且不可变的值，主要用于对象属性的键。

特性：

• 每个Symbol值都是唯一的
• 可以用作对象的属性键
• 可以用描述字符串创建，但描述只用于调试

const sym1 = Symbol(); const sym2 = Symbol("description"); const sym3 = Symbol("description"); console.log(sym2 === sym3); // false (每个Symbol都是唯一的) // 作为对象属性 const obj = { [sym1]: "value" }; console.log(obj[sym1]); // "value"

3. 对象类型(Object)

对象类型是JavaScript中最重要的复合数据类型，用于存储键值对集合。

3.1 对象的基本特性

对象可以通过字面量、构造函数或Object.create()创建：

// 对象字面量 const person = { name: "Alice", age: 30, greet() { console.log(`Hello, I'm ${this.name}`); } }; // 构造函数 function Person(name, age) { this.name = name; this.age = age; } const bob = new Person("Bob", 25); // Object.create const proto = { greet() { console.log("Hello"); } }; const john = Object.create(proto); john.name = "John";

3.2 对象属性的特性

每个对象属性都有以下特性：

• value：属性的值
• writable：是否可修改
• enumerable：是否可枚举
• configurable：是否可删除或修改特性

const obj = {}; Object.defineProperty(obj, "readOnly", { value: 42, writable: false, enumerable: true, configurable: false }); obj.readOnly = 100; // 静默失败（严格模式下会报错） console.log(obj.readOnly); // 42

3.3 常见对象子类型

JavaScript中有许多内置的对象子类型：

3.3.1 Array

数组是特殊类型的对象，用于存储有序的数据集合。

const arr = [1, 2, 3]; arr.push(4); console.log(arr.length); // 4 // 数组方法 const doubled = arr.map(x => x * 2); console.log(doubled); // [2, 4, 6, 8]

3.3.2 Function

函数也是对象，可以被赋值给变量、作为参数传递或从函数返回。

function add(a, b) { return a + b; } const multiply = function(a, b) { return a * b; }; // 箭头函数 const square = x => x * x;

3.3.3 Date

Date对象用于处理日期和时间。

const now = new Date(); console.log(now.toISOString()); const specificDate = new Date(2023, 0, 1); // 2023年1月1日

3.3.4 Map和Set

Map是键值对集合，Set是唯一值集合。

const map = new Map(); map.set("name", "Alice"); map.set(42, "The Answer"); const set = new Set(); set.add(1); set.add(2); set.add(1); // 重复添加无效 console.log(set.size); // 2

4. 类型检测与转换

4.1 类型检测

typeof操作符可以检测基本类型，但对null和数组返回"object"：

console.log(typeof 42); // "number" console.log(typeof "hello"); // "string" console.log(typeof true); // "boolean" console.log(typeof undefined); // "undefined" console.log(typeof null); // "object" (历史遗留问题) console.log(typeof []); // "object" console.log(typeof {}); // "object" console.log(typeof function(){}); // "function"

更可靠的类型检测方法：

// 检测数组 console.log(Array.isArray([])); // true // 检测null console.log(null === null); // true // 检测NaN console.log(Number.isNaN(NaN)); // true

4.2 类型转换

JavaScript中的类型转换可以是显式的或隐式的。

4.2.1 显式转换

// 转换为Number console.log(Number("42")); // 42 console.log(Number(true)); // 1 console.log(Number("hello")); // NaN // 转换为String console.log(String(42)); // "42" console.log(String(true)); // "true" console.log(String(null)); // "null" // 转换为Boolean console.log(Boolean(0)); // false console.log(Boolean("")); // false console.log(Boolean([])); // true

4.2.2 隐式转换

在操作涉及不同类型时自动发生：

console.log("5" + 2); // "52" (字符串连接) console.log("5" - 2); // 3 (数字减法) console.log("5" * "2"); // 10 (数字乘法) console.log(!0); // true (布尔转换)

5. 数据类型的最佳实践与常见问题

5.1 最佳实践

1. 避免隐式类型转换：使用严格相等(===)代替宽松相等(==)
2. 明确初始化变量：避免使用undefined，可以用null表示有意为空
3. 处理浮点数精度问题：

   // 错误的比较方式 console.log(0.1 + 0.2 === 0.3); // false // 正确的比较方式 function numbersCloseEnough(a, b) { return Math.abs(a - b) < Number.EPSILON; } console.log(numbersCloseEnough(0.1 + 0.2, 0.3)); // true

4. 使用模板字符串：代替字符串连接，提高可读性
5. 合理使用Symbol：为对象创建唯一属性键，避免命名冲突

5.2 常见问题与解决方案

1. null vs undefined混淆：

   • 问题：不清楚何时使用null或undefined
   • 方案：使用null表示有意为空，undefined表示未定义

2. 浮点数精度问题：

   • 问题：0.1 + 0.2 !== 0.3
   • 方案：使用整数运算或引入小数精度处理库

3. NaN检测问题：

   • 问题：NaN !== NaN
   • 方案：使用Number.isNaN()或Object.is()

4. 对象引用问题：

   • 问题：对象赋值是引用传递

   const obj1 = { a: 1 }; const obj2 = obj1; obj2.a = 2; console.log(obj1.a); // 2 (原对象也被修改)

   • 方案：使用展开运算符或Object.assign()创建浅拷贝

5. 类型转换陷阱：

   • 问题：意外的类型转换结果

   console.log([] + []); // "" console.log([] + {}); // "[object Object]" console.log({} + []); // 0 (在有些环境中)

   • 方案：避免依赖隐式转换，明确操作意图

6. 数据类型在内存中的表现

理解JavaScript数据类型在内存中的表现有助于编写高效代码。

6.1 原始类型的存储

原始类型值直接存储在栈内存中，访问速度快但大小固定。

let a = 10; let b = a; // 创建值的副本 a = 20; console.log(b); // 10 (b不受a改变影响)

6.2 对象类型的存储

对象存储在堆内存中，变量保存的是引用地址。

const obj1 = { value: 10 }; const obj2 = obj1; // 复制引用 obj1.value = 20; console.log(obj2.value); // 20 (两个变量引用同一对象)

6.3 性能考虑

1. 频繁创建对象：可能导致内存压力，考虑对象池
2. 大对象传递：传递引用高效，但要注意副作用
3. 原始类型包装对象：临时对象创建有开销

   const str = "hello"; console.log(str.length); // 临时创建String对象访问属性

7. ES6+新增数据类型特性

7.1 Symbol的进阶用法

// 全局Symbol注册表 const globalSym = Symbol.for("global"); console.log(Symbol.keyFor(globalSym)); // "global" // 内置Symbol const iterable = { [Symbol.iterator]: function* () { yield 1; yield 2; yield 3; } }; console.log([...iterable]); // [1, 2, 3]

7.2 BigInt的运算限制

BigInt不能与Number混合运算，但可以比较：

console.log(1n < 2); // true console.log(1n == 1); // true console.log(1n === 1); // false (类型不同) // 需要显式转换 console.log(Number(1n) + 2); // 3

7.3 模板字符串标签函数

function highlight(strings, ...values) { return strings.reduce((result, str, i) => { return result + str + (values[i] ? `<mark>${values[i]}</mark>` : ""); }, ""); } const name = "Alice"; const age = 30; const sentence = highlight`Hello, my name is ${name} and I'm ${age} years old.`; console.log(sentence); // "Hello, my name is <mark>Alice</mark> and I'm <mark>30</mark> years old."

8. 类型系统相关API

8.1 typeof与instanceof

// typeof检测原始类型 console.log(typeof "hello"); // "string" // instanceof检测对象类型 console.log([] instanceof Array); // true console.log({} instanceof Object); // true console.log(null instanceof Object); // false

8.2 Object.prototype.toString

更精确的类型检测方法：

console.log(Object.prototype.toString.call(42)); // "[object Number]" console.log(Object.prototype.toString.call("hello")); // "[object String]" console.log(Object.prototype.toString.call([])); // "[object Array]" console.log(Object.prototype.toString.call(null)); // "[object Null]"

8.3 类型检查工具函数

function getType(value) { const type = typeof value; if (type !== "object") { return type; } if (value === null) { return "null"; } return Object.prototype.toString.call(value) .replace(/^\[object (\S+)\]$/, "$1") .toLowerCase(); } console.log(getType(42)); // "number" console.log(getType([])); // "array" console.log(getType(null)); // "null" console.log(getType(new Map())); // "map"