面试 JavaScript 框架八股文十问十答第一期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）JavaScript有哪些数据类型，它们的区别？

在JavaScript中，数据类型主要分为两类：原始数据类型（Primitive Types）和对象数据类型（Object Types）。

原始数据类型（Primitive Types）：

Undefined（未定义）： 表示声明了变量但未赋值的情况。
Null（空值）： 表示一个空值或者不存在的对象。
Boolean（布尔值）： 表示逻辑上的真或假。
Number（数字）： 表示整数或浮点数。
String（字符串）： 表示文本数据。

对象数据类型（Object Types）：

Object（对象）： 一般是由多个键值对组成的无序集合，可以包含原始数据类型或其他对象。
Array（数组）： 一种特殊的对象，用于存储有序的数据集合。
Function（函数）： 也是一种对象，但具有可调用的行为。

区别：

原始数据类型是不可变的（immutable）： 一旦被创建，原始数据类型的值不能被修改。每次对原始数据类型进行操作时，都会创建一个新的值。
对象数据类型是可变的（mutable）： 对象和数组是可变的，可以随时添加、修改、删除属性或元素。

2）数据类型检测的方式有哪些

在JavaScript中，有多种方式可以进行数据类型检测：

typeof 操作符： 用于检测变量的数据类型，返回一个字符串。
```
typeof variable
```
instanceof 操作符： 用于检测对象的原型链，判断对象是否属于某个构造函数创建的实例。
```
object instanceof constructor
```
Object.prototype.toString.call() 方法： 利用内置的 toString 方法，返回一个格式为 “[object Type]” 的字符串，其中 Type 表示对象的类型。
```
Object.prototype.toString.call(variable)
```
constructor 属性： 利用对象的 constructor 属性，但要注意该属性可能会被修改。
```
variable.constructor === Array
```
Array.isArray() 方法： 专门用于检测是否为数组。
```
Array.isArray(variable)
```

3）判断数组的方式有哪些

判断一个值是否为数组有多种方式，其中一些在上面的回答中已经提到了。以下是判断数组的常见方式：

Array.isArray() 方法： 是最直接的方式，专门用于检测是否为数组。
```
Array.isArray(variable)
```
instanceof 操作符： 用于检测对象的原型链，可以判断是否为数组。
```
variable instanceof Array
```
constructor 属性： 利用对象的 constructor 属性，但要注意该属性可能会被修改。
```
variable.constructor === Array
```
Object.prototype.toString.call() 方法： 利用内置的 toString 方法，返回一个格式为 “[object Array]” 的字符串。
```
Object.prototype.toString.call(variable) === '[object Array]'
```

每种方法都有其优缺点，根据具体的场景选择合适的方式进行数组类型检测。通常来说，推荐使用 Array.isArray() 方法，因为它简单、直观且性能较好。

4）null和undefined区别

null 和 undefined 是 JavaScript 中的两种特殊值，它们有一些区别：

null：
- 表示一个空值或者不存在的对象引用。
- 当一个对象被赋值为 null 时，表示该对象不指向任何内存地址。
- 使用 typeof null 会返回 "object"，这是一个历史遗留问题，实际上 null 是一种特殊的对象值。
undefined：
- 表示一个变量已声明但尚未被赋值，或者一个对象没有给定属性。
- 当一个变量被声明但未初始化时，默认值为 undefined。
- 使用 typeof undefined 会返回 "undefined"。

在实践中，null 通常是程序员显式赋予的，表示变量的空值，而 undefined 更多是由 JavaScript 引擎生成，表示变量尚未初始化或对象没有给定属性。

5）typeof null 的结果是什么，为什么？

typeof null 的结果是 "object"。这是 JavaScript 中的一个历史遗留问题，实际上是一个语言设计上的错误。

在 JavaScript 的早期版本中，typeof null 返回 "object" 是因为 JavaScript 中的值都包含了一个表示其类型的标签，而 null 被标记为对象类型（010）。

尽管这是一个历史遗留问题，但由于已经广泛使用，为了保持向后兼容性，ECMAScript 规范并未修改这个行为。

6）intanceof 操作符的实现原理及实现

instanceof 操作符用于判断对象是否是某个构造函数创建的实例。其实现原理是通过检查对象的原型链，看构造函数的原型是否出现在对象的原型链上。

实现步骤：

获取对象的原型：通过 Object.getPrototypeOf(obj) 或者对象的 __proto__ 属性获取对象的原型。
获取构造函数的原型：通过构造函数的 prototype 属性获取构造函数的原型。
检查原型链：判断对象的原型链中是否存在构造函数的原型。

简化的 instanceof 实现示例：

function myInstanceOf(obj, constructorFunc) {let prototype = Object.getPrototypeOf(obj);while (prototype !== null) {if (prototype === constructorFunc.prototype) {return true;}prototype = Object.getPrototypeOf(prototype);}return false;
}// 使用示例
let arr = [];
console.log(myInstanceOf(arr, Array)); // true
console.log(myInstanceOf(arr, Object)); // true
console.log(myInstanceOf(arr, Function)); // false

这个实现会沿着对象的原型链逐级查找，如果找到构造函数的原型，则返回 true，否则返回 false。需要注意的是，instanceof 在多层继承链的情况下也能正确判断。

7）为什么0.1+0.2 ! == 0.3，如何让其相等

在 JavaScript 中，浮点数的表示方式采用的是 IEEE 754 标准，由于浮点数的精度有限，可能导致某些小数计算不精确。因此，0.1 + 0.2 的结果并不等于 0.3。

解决方式可以通过四舍五入或使用小数点后的固定位数，然后再比较。例如：

const sum = 0.1 + 0.2;
const expectedResult = 0.3;// 四舍五入
console.log(Math.abs(sum - expectedResult) < Number.EPSILON); // true// 小数点后两位
console.log(sum.toFixed(2) === expectedResult.toFixed(2)); // true

使用 Math.abs() 和 Number.EPSILON 进行比较，或者通过 toFixed() 方法控制小数点后的位数，可以规避浮点数计算不精确的问题。

8）如何获取安全的 undefined 值？

在 JavaScript 中，undefined 是一个全局变量，但为了避免被重写，可以使用以下几种方式获取安全的 undefined 值：

使用全局对象访问：

const safeUndefined = window.undefined; // 在浏览器环境中

使用 void 操作符：
```
const safeUndefined = void 0;
```

这样获取的 safeUndefined 就是原生的 undefined 值，不受可能被重写的影响。

9）typeof NaN 的结果是什么？

typeof NaN 的结果是 "number"。虽然 NaN 代表 “Not-a-Number”，但在 JavaScript 中，它被归类为数字类型。

这可能是因为 NaN 实际上是一个特殊的数字值，表示一个本来要返回数值的操作未返回数值的情况。由于历史原因，JavaScript 将 typeof NaN 返回为 "number"。

10）isNaN 和 Number.isNaN 函数的区别？

isNaN 和 Number.isNaN 是两个用于检测是否为 NaN 的函数，它们之间有一些区别：

isNaN：
- 全局函数，用于检测传入的值是否为 NaN。
- 在检测之前会尝试将参数转换为数值，如果无法转换，则返回 true。
```
isNaN("Hello"); // true，因为无法转换为数值
```
Number.isNaN：
- Number 对象上的静态方法，严格检查传入的值是否为 NaN。
- 不会尝试将参数转换为数值，只有在参数是 NaN 时才返回 true。
```
Number.isNaN("Hello"); // false，不会尝试转换，直接返回 false
```