1. JavaScript数据类型概述JavaScript作为一门动态弱类型语言其数据类型系统既有简单直观的一面也有需要特别注意的细节。理解这些数据类型的特点和区别是掌握JavaScript编程的基础。在JavaScript中数据类型可以分为两大类原始类型Primitive types和对象类型Object type。原始类型包括Undefined、Null、Boolean、Number、BigInt、String和Symbol。而对象类型则包含了各种复杂的数据结构如Object、Array、Function等。注意虽然typeof null返回object但这被认为是JavaScript早期实现的一个bugnull实际上是原始类型而非对象类型。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()); // undefined2.2 Null类型Null类型也只有一个值null。它表示有意地缺少任何对象值。与undefined的区别undefined表示未定义是语言自动赋予的null表示空值是开发者主动设置的let empty null; // 明确表示这个变量目前没有值 // 检查null的正确方式 if (empty null) { console.log(Its 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 types2.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); // Hello2.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]); // value3. 对象类型(Object)对象类型是JavaScript中最重要的复合数据类型用于存储键值对集合。3.1 对象的基本特性对象可以通过字面量、构造函数或Object.create()创建// 对象字面量 const person { name: Alice, age: 30, greet() { console.log(Hello, Im ${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); // 423.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 DateDate对象用于处理日期和时间。const now new Date(); console.log(now.toISOString()); const specificDate new Date(2023, 0, 1); // 2023年1月1日3.3.4 Map和SetMap是键值对集合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); // 24. 类型检测与转换4.1 类型检测typeof操作符可以检测基本类型但对null和数组返回objectconsole.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)); // true4.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([])); // true4.2.2 隐式转换在操作涉及不同类型时自动发生console.log(5 2); // 52 (字符串连接) console.log(5 - 2); // 3 (数字减法) console.log(5 * 2); // 10 (数字乘法) console.log(!0); // true (布尔转换)5. 数据类型的最佳实践与常见问题5.1 最佳实践避免隐式类型转换使用严格相等()代替宽松相等()明确初始化变量避免使用undefined可以用null表示有意为空处理浮点数精度问题// 错误的比较方式 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使用模板字符串代替字符串连接提高可读性合理使用Symbol为对象创建唯一属性键避免命名冲突5.2 常见问题与解决方案null vs undefined混淆问题不清楚何时使用null或undefined方案使用null表示有意为空undefined表示未定义浮点数精度问题问题0.1 0.2 ! 0.3方案使用整数运算或引入小数精度处理库NaN检测问题问题NaN ! NaN方案使用Number.isNaN()或Object.is()对象引用问题问题对象赋值是引用传递const obj1 { a: 1 }; const obj2 obj1; obj2.a 2; console.log(obj1.a); // 2 (原对象也被修改)方案使用展开运算符或Object.assign()创建浅拷贝类型转换陷阱问题意外的类型转换结果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 性能考虑频繁创建对象可能导致内存压力考虑对象池大对象传递传递引用高效但要注意副作用原始类型包装对象临时对象创建有开销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); // 37.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 highlightHello, my name is ${name} and Im ${age} years old.; console.log(sentence); // Hello, my name is markAlice/mark and Im mark30/mark years old.8. 类型系统相关API8.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); // false8.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
