面试 JavaScript 框架八股文十问十答第一期
面试 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
-
总的来说，使用 Number.isNaN 更安全，因为它不会进行类型转换。如果你只想判断是否为 NaN，而不关心是否可以转换为数值，推荐使用 Number.isNaN。
开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system
已 300 + Star！
⭐点赞⭐收藏⭐不迷路！⭐