🌟 引言

在日常 JavaScript 开发中，你是否遇到过这些困扰：

• 隐式类型转换让逻辑变得不可预测，Bug 难以定位
• null 和 undefined 分不清，typeof null === 'object' 又是什么情况？
• NaN 不等于自身、+0 和 -0 有区别，数值边界常出坑
• 只用对象当字典，忽略了 Map/Set 的性能与语义优势
• 不清楚何时使用 WeakMap/WeakSet 来避免内存泄漏

今天这篇文章从概念到实践，系统梳理 JavaScript 的数据类型与数据结构，并给出经过测试的最佳实践。

💡 核心技巧详解

1. 动态与弱类型：隐式转换的利与弊

🔍 应用场景

处理用户输入、接口返回值、表单校验等存在类型不确定性的场景。

❌ 常见问题

在比较或运算时触发隐式转换，导致结果与预期不符。

// ❌ 隐式转换导致的陷阱
console.log('5' - 3);        // 2（字符串被转换为数字）
console.log('5' + 3);        // '53'（触发字符串拼接）
console.log([] == 0);        // true（复杂的抽象相等规则）
console.log(null == undefined); // true（宽松相等特例）

✅ 推荐方案

统一使用严格相等，必要时进行显式转换，减少意外行为。

/**
 * 显式转换并使用严格相等
 * @description 统一数值与字符串比较策略，避免隐式转换陷阱
 * @param {string|number} a - 左操作数
 * @param {string|number} b - 右操作数
 * @returns {boolean} 是否严格相等
 */
const isStrictEqual = (a, b) => Number(a) === Number(b);
// ✅ 推荐
console.log(isStrictEqual('5', 5)); // true

💡 核心要点

• 动态类型灵活但易踩坑；弱类型允许隐式转换，需谨慎使用
• 使用 === 与显式转换，避免抽象相等的复杂规则
• 表单与接口数据应先标准化再处理

🎯 实际应用

表单校验与接口入参统一类型，确保后续逻辑可靠。

2. 原始值与对象包装器：正确理解与使用

🔍 应用场景

字符串、数值、布尔值操作与方法调用。

❌ 常见问题

在原始值上调用方法与在 null/undefined 上读属性容易混淆。

// ❌ 在 null/undefined 上访问属性会抛错
const maybeNull = null;
// maybeNull.toString(); // TypeError

✅ 推荐方案

区分原始值与对象包装器，使用可选链保证安全访问。

/**
 * 安全读取属性
 * @description 在可能为空的值上安全访问属性
 * @param {object|null|undefined} obj - 目标对象或空值
 * @param {string} key - 属性名
 * @returns {any} 属性值或 undefined
 */
const safeGet = (obj, key) => obj?.[key];
console.log(safeGet({ x: 1 }, 'x')); // 1
console.log(safeGet(null, 'x'));     // undefined

💡 核心要点

• 原始值：null、undefined、boolean、number、bigint、string、symbol
• typeof null === 'object' 是历史遗留；检测 null 用 === null
• 原始值可临时装箱使用方法；但在 null/undefined 上访问会抛错

🎯 实际应用

在数据解析与防御性编程中引入安全访问与空值判断。

3. 类型判断三板斧：typeof / instanceof / toString

🔍 应用场景

通用工具库、数据校验、序列化/反序列化。

❌ 常见问题

仅依赖 typeof，在对象与 null 上结论不准确。

// ❌ 仅用 typeof 结论不完整
console.log(typeof []);      // 'object'（不能区分数组）
console.log(typeof null);    // 'object'（历史遗留）

✅ 推荐方案

组合使用三板斧，覆盖绝大多数类型判断场景。

/**
 * 精准类型判断
 * @description 结合 typeof / instanceof / Object.prototype.toString
 * @param {any} value - 待判断值
 * @returns {string} 类型字符串，如 'Array'、'Map'、'Null'
 */
const getType = (value) => {
  const basic = typeof value;
  if (value === null) return 'Null';
  if (basic !== 'object') return basic[0].toUpperCase() + basic.slice(1);
  return Object.prototype.toString.call(value).slice(8, -1);
};
console.log(getType([]));         // 'Array'
console.log(getType(null));       // 'Null'
console.log(getType(new Map()));  // 'Map'

💡 核心要点

• typeof 适合原始值与函数；对象需更精细判断
• instanceof 受原型链影响；跨 iframe/realm 可能失效
• Object.prototype.toString.call(v) 在对象类型识别上更稳定

🎯 实际应用

在表单与 API 校验里使用统一的类型判断工具，简化逻辑。

4. Number 特殊值与精度：NaN、Infinity、±0

🔍 应用场景

数值计算、统计分析与边界处理。

❌ 常见问题

NaN 比较失败、+0 与 -0 在除法时行为不同。

// ❌ 直接比较 NaN 得到错误结论
console.log(NaN === NaN); // false

✅ 推荐方案

使用专用 API 处理特殊值与安全整数范围。

/**
 * 数值安全工具
 * @description 处理 NaN/Infinity/安全整数边界
 * @param {number} n - 输入数值
 * @returns {{isSafe:boolean,isNaN:boolean,isInfinite:boolean,isNegZero:boolean}}
 */
const numberSafety = (n) => ({
  isSafe: Number.isSafeInteger(n),
  isNaN: Number.isNaN(n),
  isInfinite: n === Infinity || n === -Infinity,
  isNegZero: Object.is(n, -0)
});
console.log(numberSafety(-0)); // { isNegZero: true, ... }

💡 核心要点

• Number.isNaN 区分 NaN；Object.is 区分 +0/-0
• 仅在 ±(2^53-1) 范围内整数是安全的
• 超出范围使用 BigInt 或字符串处理

🎯 实际应用

财务与统计模块中，统一使用安全判断与边界处理工具。

5. BigInt 与 Symbol：场景与边界

🔍 应用场景

处理超大整数、定义唯一键与私有标记。

❌ 常见问题

与 number 混算、将 symbol 隐式转换为字符串。

// ❌ BigInt 与 number 混算会抛错
// 1n + 1 // TypeError

✅ 推荐方案

严格区分类型，避免隐式转换。

/**
 * BigInt 安全加法
 * @description 仅在 BigInt 间进行加法
 * @param {bigint} a - 左操作数
 * @param {bigint} b - 右操作数
 * @returns {bigint} 和
 */
const addBigInt = (a, b) => a + b;
/**
 * 创建唯一 Symbol 键
 * @description 为对象创建不可枚举且唯一的键
 * @param {string} desc - 描述文本
 * @returns {symbol} 唯一键
 */
const createUniqueKey = (desc) => Symbol(desc);
const s1 = createUniqueKey('id');
const s2 = createUniqueKey('id');
console.log(s1 === s2); // false

💡 核心要点

• BigInt 不与 number 混算；序列化与 JSON 需额外处理
• Symbol 唯一且不可隐式转字符串；适合私有字段与元数据

🎯 实际应用

大整数 ID、哈希值与私有元数据标记。

6. Map/Set/WeakMap/WeakSet：结构选择与内存管理

🔍 应用场景

字典、集合、缓存与弱引用场景。

❌ 常见问题

使用普通对象当字典，键类型受限、性能与语义不足。

// ❌ 仅用对象当字典：键被强制转为字符串
const dict = {};
dict[{ x: 1 }] = 'value';
console.log(Object.keys(dict)); // ['[object Object]']

✅ 推荐方案

优先使用 Map/Set；在缓存/关联对象场景下使用弱引用结构。

/**
 * 选择合适的数据结构
 * @description 根据场景返回 Map/Set/WeakMap/WeakSet
 * @param {'dict'|'set'|'weak_dict'|'weak_set'} kind - 场景类型
 * @returns {Map|Set|WeakMap|WeakSet} 数据结构实例
 */
const chooseDS = (kind) => {
  switch (kind) {
    case 'dict': return new Map();
    case 'set': return new Set();
    case 'weak_dict': return new WeakMap();
    case 'weak_set': return new WeakSet();
    default: return new Map();
  }
};
const m = chooseDS('dict');
m.set({ id: 1 }, 'user'); // ✅ 键可为对象，语义清晰

💡 核心要点

• Map：字典；任意类型键；迭代有序；适合频繁增删查
• Set：去重集合；O(1) 查找；适合唯一值管理
• WeakMap/WeakSet：弱引用，不阻止 GC；仅接受对象键/值；不可迭代；适合缓存与私有数据

🎯 实际应用

组件实例缓存、DOM 节点关联数据、私有状态存储。

7. 结构化克隆与深拷贝：现代方案优先

🔍 应用场景

在消息传递、状态快照与不可变数据中进行深拷贝。

❌ 常见问题

JSON.parse(JSON.stringify()) 丢失特殊类型与循环引用崩溃。

✅ 推荐方案

优先使用 structuredClone，保留更多类型特征。

/**
 * 安全深拷贝
 * @description 使用结构化克隆复制复杂对象
 * @param {any} value - 待拷贝值
 * @returns {any} 拷贝结果
 */
const deepCopy = (value) => structuredClone(value);
const src = new Map([[{ id: 1 }, { name: 'Alice' }]]);
const dst = deepCopy(src);
console.log(src !== dst); // true

💡 核心要点

• structuredClone 支持 Map/Set/Date/RegExp/TypedArray 等
• 循环引用可处理；函数与原型链不保留

🎯 实际应用

跨线程消息、不可变状态快照与缓存隔离。

📊 技巧对比总结

🎯 实战应用建议

1. 明确数据入口：统一使用显式转换与严格相等判断
2. 选型优先：字典用 Map，集合去重用 Set
3. 缓存策略：私有状态与缓存使用 WeakMap/WeakSet
4. 数值边界：金融/统计使用安全整数与专用判断工具
5. 深拷贝：使用 structuredClone 替代 JSON 大法

性能考虑

• 使用合适的数据结构降低时间与空间复杂度
• 避免不必要的装箱与频繁类型转换
• 关注弱引用结构的不可迭代特性，设计可观测层

💡 总结

这 7 个数据类型与数据结构的核心知识点，覆盖从语言层面的原始值与判断方法，到工程层面的结构选型与内存管理：

1. 动态与弱类型的利弊与规避
2. 原始值与包装器的行为差异
3. typeof/instanceof/toString 组合判断
4. Number 的特殊值与安全边界
5. BigInt 与 Symbol 的使用边界
6. Map/Set/WeakMap/WeakSet 的选型指南
7. 结构化克隆的现代深拷贝方案

掌握这些内容，你将能在实际项目中写出更可靠、可维护、性能友好的 JavaScript 代码。

转自https://juejin.cn/post/7569136095041601578