从add函数类型判断说起：NaN的奇幻漂流与JS数据类型的奥秘

大家好，我是你们的老朋友FogLetter，今天我们要聊的话题看似简单却暗藏玄机------如何在JavaScript中实现一个安全的add函数，并借此深入探讨JS数据类型中的那些"坑"与"宝藏"。

一、一个看似简单的add函数引发的思考

让我们从题目要求开始：编写一个add函数，实现a + b的功能，但要求a和b都必须是数字类型，否则抛出TypeError异常。

1.1 第一版实现：typeof的陷阱

很多同学的第一反应可能是这样的：

function add(a, b) {
  if (typeof a !== 'number' || typeof b !== 'number') {
    throw new TypeError('参数类型错误');
  }
  return a + b;
}

看起来没问题？让我们测试几个案例：

console.log(add(1, 2)); // 3 ✅
console.log(add('1', '2')); // 抛出TypeError ✅
console.log(add(NaN, 1)); // NaN ❓

问题出现了：NaN在JavaScript中也是number类型！这就像是在数学考试中，有人交了一张白卷，但老师却说"这也是答案的一种形式"。

1.2 NaN：数字家族中的"幽灵成员"

NaN（Not a Number）是JavaScript中一个特殊的存在：

console.log(typeof NaN); // "number" 😅
console.log(NaN === NaN); // false 🤯
console.log(isNaN(NaN)); // true ✅

这就像是在说："我是一个数字，但我不是任何数字，甚至不是我自己"。这种特性让NaN成为了JavaScript中最令人困惑的值之一。

1.3 完善我们的add函数

为了正确处理NaN，我们需要修改我们的实现：

function add(a, b) {
  if (typeof a !== 'number' || typeof b !== 'number' || isNaN(a) || isNaN(b)) {
    throw new TypeError('参数类型错误');
  }
  return a + b;
}

现在它能正确处理所有情况了：

console.log(add(1, 2)); // 3 ✅
console.log(add('1', '2')); // TypeError ✅
console.log(add(NaN, 1)); // TypeError ✅

二、JavaScript数据类型全景图

既然谈到了类型判断，我们就不得不全面了解JavaScript的数据类型体系。

2.1 七种原始类型（Primitive Types）

JavaScript有七种简单数据类型，它们直接存储在栈内存中：

1. string：文本数据
2. number：双精度64位浮点数（包括Infinity（无穷大）和NaN）
3. boolean：true/false
4. null：表示空值
5. undefined：表示未定义
6. bigint：大整数
7. symbol：唯一且不可变的值（ES6新增）

注意：虽然typeof null返回"object"，但这被认为是语言的一个bug，null实际上是原始类型。

2.2 对象类型（Object）

除了上述七种原始类型，其他所有值都是对象。对象是属性的集合，将地址的引用存储在栈内存中，而对象的内容存储在堆内存中，包括：

• 普通对象：{}
• 数组：[]
• 函数：function() {}
• 日期：new Date()
• 正则表达式：/pattern/
• 等等...

2.3 类型判断的军火库

在实际开发中，我们需要各种方法来判断类型：

// 基本类型检查
typeof 'hello' // 'string'
typeof 42 // 'number'
typeof true // 'boolean'
typeof undefined // 'undefined'
typeof Symbol() // 'symbol'
typeof 42n // 'bigint'

// 特殊检查
typeof null // 'object' (历史遗留问题)
typeof [] // 'object'
typeof {} // 'object'
typeof function() {} // 'function'

// 更好的类型检查方法
Object.prototype.toString.call([]) // '[object Array]'
Array.isArray([]) // true
isNaN(NaN) // true
Number.isNaN(NaN) // true (ES6更安全)

三、Symbol：独一无二的标识符

ES6引入的Symbol类型可能是最被低估的特性之一。它就像是一把能打开JavaScript元编程大门的钥匙。

3.1 Symbol基础用法

const sym1 = Symbol();
const sym2 = Symbol('description'); // 可选的描述字符串

console.log(sym1 === sym2); // false
console.log(Symbol('foo') === Symbol('foo')); // false

每个Symbol都是独一无二的，即使它们有相同的描述。

3.2 Symbol的实际应用

3.2.1 作为对象属性键

const ID = Symbol('id');
const user = {
  name: '张三',
  [ID]: '123' // 使用Symbol作为键
};

console.log(user[ID]); // '123'
console.log(Object.keys(user)); // ['name'] - Symbol属性不会被枚举

Symbol属性不会被for...in、Object.keys()或Object.getOwnPropertyNames()返回，这使它成为创建"隐藏"属性的理想选择。

3.2.2 模拟私有属性

虽然JavaScript没有真正的私有属性，但Symbol可以帮我们实现类似效果：

const _counter = Symbol('counter');
const _action = Symbol('action');

class Countdown {
  constructor(counter, action) {
    this[_counter] = counter;
    this[_action] = action;
  }
  dec() {
    if (this[_counter] < 1) return;
    this[_counter]--;
    if (this[_counter] === 0) {
      this[_action]();
    }
  }
}

const cd = new Countdown(3, () => console.log('DONE'));
cd.dec(); // 计数器减1
cd.dec(); // 计数器减1
cd.dec(); // 输出"DONE"

虽然Object.getOwnPropertySymbols()仍然可以获取这些Symbol属性，但相比用字符串属性名，这已经提供了更好的封装。

3.2.3 众所周知的Symbol

JavaScript内置了一些"众所周知的Symbol"，用于修改语言内部行为：

const arr = [1, 2, 3];
const it = arr[Symbol.iterator](); // 获取数组的迭代器
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: 2, done: false }
console.log(it.next()); // { value: 3, done: false }
console.log(it.next()); // { value: undefined, done: true }

其他内置Symbol包括：

• Symbol.hasInstance：自定义instanceof行为
• Symbol.toPrimitive：自定义对象到原始值的转换
• Symbol.toStringTag：自定义Object.prototype.toString()的返回值

3.2.4 实现枚举类型

Symbol 非常适合实现枚举，比使用字符串或数字更安全：

const Status = {
    READY: Symbol('ready'),
    RUNNING: Symbol('running'),
    DONE: Symbol('done')
}

let status = Status.READY;
if(status === Status.READY){
    console.log('ready');
}

3.3 Symbol的注意事项

1. 不可强制转换：Symbol不能隐式转换为字符串或数字，尝试这样做会抛出TypeError
2. 全局注册表 ：可以使用Symbol.for()创建全局共享的Symbol

const globalSym = Symbol.for('app.global'); // 如果不存在则创建
const sameGlobalSym = Symbol.for('app.global');
console.log(globalSym === sameGlobalSym); // true

四、类型系统的实战技巧

4.1 安全的类型判断函数

基于我们前面的讨论，我们可以编写一个更健壮的类型判断函数：

function getType(value) {
  // 处理null的特殊情况
  if (value === null) {
    return 'null';
  }
  
  const type = typeof value;
  
  // 基本类型直接返回
  if (type !== 'object' && type !== 'function') {
    return type;
  }
  
  // 通过Object.prototype.toString获取更精确的类型
  const toString = Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
  
  // 处理一些特殊情况
  if (toString === 'number' && isNaN(value)) {
    return 'nan';
  }
  
  return toString;
}

// 测试
console.log(getType(42)); // 'number'
console.log(getType(NaN)); // 'nan'
console.log(getType(null)); // 'null'
console.log(getType([])); // 'array'
console.log(getType(/regex/)); // 'regexp'
console.log(getType(Symbol())); // 'symbol'

4.2 类型转换的陷阱

JavaScript的隐式类型转换是许多bug的来源：

console.log(1 + '1'); // '11' (字符串拼接)
console.log('1' - 1); // 0 (数字减法)
console.log([] + []); // '' (空字符串)
console.log([] + {}); // '[object Object]'
console.log({} + []); // 0 (在有些环境中)

为了避免这些问题，我们应该：

1. 使用严格相等===而不是==
2. 显式转换类型：Number(), String(), Boolean()
3. 使用模板字符串而不是字符串拼接

4.3 BigInt：处理大整数

ES2020引入的BigInt类型可以安全地表示大于2^53的整数：

const big = 9007199254740991n; // 末尾加n表示BigInt
const bigger = big + 1n;

console.log(bigger); // 9007199254740992n

// 不能直接和Number混合运算
console.log(big + 1); // TypeError
console.log(big + BigInt(1)); // 正确

五、总结与最佳实践

通过这个add函数的实现，我们深入探讨了JavaScript类型系统的方方面面。以下是一些关键要点：

1. 始终验证输入：即使是简单的函数，也要考虑边界情况和类型安全
2. 理解NaN的特殊性 ：记住typeof NaN是'number'，但NaN不等于任何值（包括它自己）
3. 善用Symbol：用于创建唯一属性键、模拟私有成员、修改内置行为、实现枚举类型
4. 掌握类型判断：根据场景选择合适的类型检查方法
5. 避免隐式转换：显式转换类型，使用严格相等

JavaScript的类型系统看似简单，实则暗藏玄机。只有深入理解这些细节，才能写出健壮可靠的代码。希望这篇笔记能帮助你在JavaScript的类型迷宫中找到方向！

思考题 ：你知道为什么typeof null返回'object'吗？这是JavaScript早期设计的一个历史遗留问题，欢迎在评论区分享你的见解！