前端面试必看！从 add 函数深挖 JavaScript 核心知识🧐

前言

在前端开发的面试战场上，JavaScript 可谓是重中之重。今天，咱们就从一道超经典的面试题 ------ 实现 add 函数讲起，看看它背后藏着哪些必须掌握的核心知识，帮你在面试中脱颖而出。

大厂面试题

HR：你说说怎么实现一个两数之和函数？
我：（内心狂喜）这还不简单。上代码！

function add(a,b){
    return a+b;
}
console.log(add(1,2));

HR：如果我传入的 a='1'，b=2 怎么办？

回家吧好不好？回家吧孩子。
我：嗷嗷我知道了。上代码！

function add(a,b){
    // 参数的校验
    if(typeof a !== 'number' || typeof b !== 'number'){
        throw new TypeError('a 和 b 必须是数字')
    }
    return a+b;
}

HR：.....回家吧好不好？回家吧孩子。

究竟是哪里还漏了呢？？我们来看看数据类型有哪些...

数据类型大揭秘​

在实现 add 函数的过程中，我们用到了数字类型，这就不得不提到 JavaScript 丰富的数据类型了。JavaScript 中有 7 种基本数据类型，分别是：​

一、简单数据类型（primitive）

1. String（字符串）：用于表示文本，比如 'Hello, World!'。

2. Boolean（布尔值）：只有 true 和 false 两个值，常用于逻辑判断。

3. Undefined（未定义）：当一个变量声明了但没有赋值时，它的值就是 undefined。

4. Null（空值） ：表示一个空对象指针，常用来初始化对象。

5. Symbol（唯一值） ：ES6 新增的一种数据类型，用于创建唯一且不可变的值，常被用作对象属性的键，避免命名冲突。

6. Numeric（数值） ：又分为 bigint 和 number。number 用于表示常规数字，bigint 则专门用来处理大整数，避免了 number 类型在处理大数字时的精度问题。

二、复杂数据类型（non-primitive）

除了这些基本数据类型，其他都是object，像数组、对象、函数等都属于 object 类型。

我：看完这个还是困惑，那上面写的也没错啊....

这时候我们就要提到一个令人迷惑的东西...

令人迷惑的 NaN

在 Numeric 类型里，有个特殊的值叫 NaN ，代表 "Not a Number "，翻译过来也就是不是数字的数字。它的出现往往是因为运算错误或数据类型不匹配。比如：

console.log(Number('abc')); // NaN​
console.log(5 / '0'); // NaN
console.log(0 / 0);//NaN
console.log(Number(undefined));// NaN
console.log(parseInt("a123"));// NaN
console.log(Math.sqrt(-1));//NaN

但是它又属于数值类型：

console.log(typeof NaN);//number

相当于：在所有数值类型里面出现了一个不是数字的NaN。

NaN有个特点：NaN 不等于任何值，包括它自己。 因为不是数字的方式有非常多种。

console.log(NaN===NaN);// false

要判断一个值是否为 NaN，不能直接用 ===，而得使用 isNaN() 函数。

console.log(isNaN(NaN),isNaN(0/0));// true  true  isNaN() 函数用于检查一个值是否为 NaN

我：啊这下我知道了！

/**
 * @func 两数之和
 * @param {number} a 
 * @param {number} b 
 * @returns {number} 
 */
function add(a,b){
    // 参数的校验
    if(typeof a !== 'number' || typeof b !== 'number' || isNaN(a) || isNaN(b)){
        throw new TypeError('a 和 b 必须是数字')
    }
    return a+b;
}

HR：上岸！

补充知识点：神秘的 Symbol​

前面提到 Symbol 是 ES6 新增的独特数据类型，那它到底独特在哪呢？每个 Symbol 值都是独一无二的，即使描述相同，它们也不相等。

// 独一无二的值
const sym=Symbol();
const sym1=Symbol();
console.log(sym===sym1);//false

作用 ：Symbol 常被用作对象的属性键 ，让属性变得独一无二，有效防止属性名冲突。

const myObject = {};​
const uniqueKey = Symbol('unique');​
myObject[uniqueKey] = 'This is a unique value';

而且，通过 Object.keys() 无法获取到 Symbol 类型的属性，只能使用 Object.getOwnPropertySymbols() 来访问，这在一定程度上实现了属性的 "私有"。

总结​

一道小小的 add 函数面试题，背后竟藏着这么多 JavaScript 的核心知识，从函数实现到数据类型，再到 Symbol 和 NaN 这些特殊值。掌握好这些，不仅能轻松应对面试，在实际开发中也能游刃有余。小伙伴们，赶紧学起来，为面试和工作储备能量💪