JavaScript面试题系列（1）每篇10题

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

JavaScript 中有8种数据类型，分别是：Number、String、Boolean、Null、Undefined、Object、BigInt、Symbol。

其中前七种数据类型被称为“原始数据类型”，最后一种数据类型被称为“引用数据类型”。

它们的区别如下：

1. Number：表示数字，包括整数和浮点数。
2. String：表示字符串，由一系列字符组成。
3. Boolean：表示布尔值，只有两个取值：true 和 false。
4. Null：表示空值，没有实际意义。
5. Undefined：表示未定义，表示一个变量没有被赋值或者一个属性没有被定义。
6. Object：表示对象，是一种复杂的数据类型，可以包含多个属性和方法。
7. BigInt：是一种数字类型的数据，可以表示任意精度格式的整数。使用BigInt可以安全地存储和操作大整数，解决超出普通数据类型范围的问题。
8. Symbol：表示唯一且不可变的值，通常用于对象的唯一标识符。

在内存存储上，原始数据类型是直接存储在栈中的简单数据段，而引用数据类型则是存储在堆内存中，栈中只存储了指向该实体的指针。因此，引用数据类型需要更多的内存空间来存储实体本身和指针。

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

在JavaScript中，可以使用以下方式来检测数据类型：

1.typeof运算符：typeof运算符返回一个表示数据类型的字符串，例如：

1. console.log(typeof 123); // "number"  
2. console.log(typeof "hello"); // "string"  
3. console.log(typeof true); // "boolean"  
4. console.log(typeof undefined); // "undefined"  
5. console.log(typeof null); // "object"  
6. console.log(typeof []); // "object"  
7. console.log(typeof {}); // "object"  
8. console.log(typeof function(){}); // "function"

2.instanceof运算符：instanceof运算符用于检测一个对象是否是某个特定类型的实例，例如：

1. console.log([] instanceof Array); // true  
2. console.log({} instanceof Object); // true  
3. console.log("str" instanceof String); // false

3.Object.prototype.toString方法：该方法返回一个表示对象类型的字符串，例如：

1. console.log(Object.prototype.toString.call(123)); // "[object Number]"  
2. console.log(Object.prototype.toString.call("hello")); // "[object String]"  
3. console.log(Object.prototype.toString.call(true)); // "[object Boolean]"  
4. console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"  
5. console.log(Object.prototype.toString.call(null)); // "[object Null]"  
6. console.log(Object.prototype.toString.call([])); // "[object Array]"  
7. console.log(Object.prototype.toString.call({})); // "[object Object]"  
8. console.log(Object.prototype.toString.call(function(){})); // "[object Function]"

需要注意的是，null和undefined是特殊的类型，typeof null返回"object"，typeof undefined返回"undefined"。因此，如果需要检测null和undefined，可以使用===运算符进行比较。

4.constructor是一个属性，它指向创建对象的构造函数。可以使用constructor属性来检测对象类型，例如：

1. console.log((new Array()).constructor === Array); // true 
2. console.log((new String("hello")).constructor === String); // true 
3. console.log((new Boolean(true)).constructor === Boolean); // true 
4. console.log(({}).constructor === Object); // true 
5. console.log((function(){}).constructor === Function); // true

这里需要注意的是，对于原始数据类型，它们的constructor属性是Number、String和Boolean，而不是Object。而对于null和undefined，它们的constructor属性是null和undefined。因此，如果需要准确检测对象的类型，建议使用Object.prototype.toString方法或者instanceof运算符。

3. null 和 undefined 区别

null和undefined在JavaScript中都是基本数据类型，它们主要区别如下：

1. 定义：null是一个空对象指针，表示一个对象的值为null。而undefined是一个未定义的值，表示一个变量没有被赋值或者一个属性没有被定义。
   
2. 类型：null是一个对象类型，属于Object类型，而undefined是一个原始类型。
   
3. 用途：null通常用于表示一个对象没有值或者没有指向任何对象。而undefined通常表示一个变量没有被赋值或者一个属性没有被定义。
   
4. 内存空间：null占用内存空间，而undefined不占用内存空间。
   
5. 值的比较：undefined和null是不同的值，因此它们的比较结果为false，例如：

console.log(null === undefined); // false

1. 综上所述，null和undefined在JavaScript中都是基本数据类型，它们的主要区别在于定义、类型、用途和内存空间。需要注意的是，在JavaScript中，undefined是一个保留字，因此不能将变量命名为undefined。而null不是保留字，可以将变量名命名为null。

4. intanceof 操作符的实现原理及实现

instanceof 是 JavaScript 中的一个操作符，用于检测一个对象是否是某个构造函数的实例。其实现原理如下：

1. 首先，instanceof 操作符会检查左操作数是否是一个对象。如果不是对象，它会返回 false。
2. 如果是对象，它会通过 constructor 属性获取左操作数的构造函数。
3. 然后，它会将构造函数与指定的类进行比较。如果左操作数的构造函数与指定的类相同，或者左操作数的构造函数是指定类的子类（即，在类的原型链上存在），则返回 true，否则返回 false。

在实现 instanceof 操作符时，需要注意以下几点：

1. instanceof 操作符只能用于对象比较，不能用于原始数据类型比较。
2. instanceof 操作符不受 [[Prototype]] 链的影响，只考虑构造函数的实例关系。
3. 如果左操作数的构造函数是函数对象而不是类，那么 instanceof 操作符会返回 false。

在具体的实现中，可以使用以下代码实现 instanceof 操作符：

1. function instanceofOperator(object, constructor) {  
2. // 检查构造函数是否是一个类  
3. if (typeof constructor !== 'function') {  
4. throw new Error('Invalid constructor');  
5.   }  
6. 
7. // 检查左操作数是否是一个对象  
8. if (typeof object !== 'object' || object === null) {  
9. return false;  
10.   }  
11. 
12. // 获取构造函数的原型对象  
13. const prototype = constructor.prototype;  
14. 
15. // 检测对象的原型链上是否存在构造函数的原型对象  
16. while (object !== null) {  
17. if (object === prototype) {  
18. return true;  
19.     }  
20.     object = Object.getPrototypeOf(object);  
21.   }  
22. 
23. // 构造函数的原型对象上是否存在constructor属性，且其指向的构造函数与指定的构造函数相同或为其子类  
24. if (Object.getPrototypeOf(prototype).constructor === constructor) {  
25. return true;  
26.   }  
27. 
28. // 如果构造函数的原型对象上不存在constructor属性，或者其指向的构造函数与指定的构造函数不同，返回false  
29. return false;  
30. }

以上代码中，我们首先检查构造函数是否是一个类，然后检查左操作数是否是一个对象。接着，我们获取构造函数的原型对象，并通过循环检测对象的原型链上是否存在构造函数的原型对象。如果存在，则返回 true；否则，我们检查构造函数的原型对象的 constructor 属性是否指向指定的构造函数或其子类，如果指向，则返回 true；否则返回 false。

5. 如何获取安全的 undefined 值？

在JavaScript中，你可以通过以下几种方式获取安全的undefined值：

1.使用typeof运算符：使用typeof运算符可以返回一个变量的数据类型，如果变量未定义，则返回"undefined"。因此，你可以通过将一个未定义的变量与"undefined"进行比较来获取安全的undefined值。例如：

1. let safeUndefined; 
2. if (safeUndefined === undefined) { 
3. console.log("safeUndefined is undefined"); 
4. } else { 
5. console.log("safeUndefined is not undefined"); 
6. }

2.使用void操作符：JavaScript中的void操作符可以返回一个指定表达式的值，如果该表达式未定义，则返回undefined。你可以使用void操作符来获取安全的undefined值。例如：

1. let safeUndefined; 
2. console.log(void safeUndefined); // 输出undefined

3.使用Object.prototype.hasOwnProperty方法：使用hasOwnProperty方法可以检查一个对象是否具有指定的属性，如果对象没有该属性，则返回false。因此，你可以使用hasOwnProperty方法来获取安全的undefined值。例如：

1. let safeUndefined; 
2. if (!safeUndefined.hasOwnProperty('someProperty')) { 
3. console.log("safeUndefined is undefined"); 
4. } else { 
5. console.log("safeUndefined is not undefined"); 
6. }

需要注意的是，以上方法只能帮助你在JavaScript中获取安全的undefined值，但不能保证代码中不存在其他潜在的错误或问题。因此，在实际开发中，应该注意代码的健壮性和安全性，以避免可能出现的错误和漏洞。

6. Object.is() 与比较操作符 “===”、“==” 的区别？

在JavaScript中，Object.is()是一个用于比较两个值是否严格相等的函数。这个函数和比较操作符“===”和“==”有一些重要的区别。

Object.is()和“===”都执行类型比较，如果两个值的数据类型不同，它们被视为不相等，即使它们的值在某种方式上可能是相等的。它处理了一些特殊的情况，比如 -0 和 +0 不再相等，两个 NaN 是相等的例如：

1. console.log(Object.is(1, '1')); // false 
2. console.log(1 === '1'); // false
3. console.log(-0 === +0); // false
4. console.log(NaN === NaN); // true

Object.is()和“==”的比较方式不同。JavaScript的“==”比较有两个规则：首先是类型比较，然后是值比较。这意味着在进行比较之前，JavaScript会尝试转换两个值的数据类型，以便进行比较。这种类型转换可能会导致一些意外的结果：在这两个例子中，由于数据类型不同（一个是数字，一个是字符串），所以返回的结果都是false。

1. console.log(Object.is('1', '1')); // true 
2. console.log('1' == '1'); // true

总的来说，Object.is()更严格，因为它只比较值而不考虑类型。这在需要严格相等性检查的情况下可能是有用的。而“==”和“===”则更灵活，因为它们在比较之前会进行类型检查和转换。选择使用哪个函数或操作符取决于你的需求和代码的上下文。在这两个例子中，由于数据类型相同（都是字符串），所以返回的结果都是true。但是，如果数据类型不同，'1' == 1会返回true，因为JavaScript会将字符串'1'转换为数字1。

7. 什么是 JavaScript 中的包装类型？

在JavaScript中，包装类型是指一种特殊的对象类型，用于表示基本数据类型（如数字、字符串、布尔值等）的值。这些包装对象在内部使用，以便我们可以在基本类型上使用对象的方法和属性。

JavaScript中的每个基本类型都有一个对应的包装类型，这些包装类型被定义在语言的核心库中。例如，数字类型的包装类型是Number对象，字符串类型的包装类型是String对象，布尔类型的包装类型是Boolean对象，等等。

当我们尝试使用对象的方法或属性访问一个基本类型的值时，JavaScript会自动将该值包装在一个对应的包装对象中。例如，如果我们尝试使用Number对象的toString()方法将一个数字转换为字符串，JavaScript会自动将该数字包装在一个Number对象中，然后调用toString()方法。

以下是一个示例：

1. let num = 10; 
2. let str = num.toString(); // JavaScript会自动将数字包装在Number对象中，并调用toString()方法 
3. console.log(str); // 输出："10"

在这个例子中，JavaScript自动将数字10包装在一个Number对象中，并调用toString()方法将其转换为字符串。

需要注意的是，虽然包装对象在内部使用，但对于我们来说，大多数情况下不需要直接使用它们，因为JavaScript会自动处理基本类型和包装对象之间的转换。只有在某些特殊的情况下，我们需要直接使用包装对象来进行一些特定的操作。

8. 为什么会有 BigInt 的提案？

BigInt 是 JavaScript 中的一个新特性，它允许表示和操作任意精度的整数。在 JavaScript 中，数字是有固定精度的，即只能准确表示一定范围内的整数，超出这个范围的整数就会被四舍五入。这使得在需要处理大整数的情况下，JavaScript 显得力不从心。

BigInt 的提案主要是为了解决 JavaScript 中整数精度不足的问题。在提案中，BigInt 被描述为一个通用的、无限精度的整数类型，可以用于表示任何大小的整数，而不会丢失精度。通过使用 BigInt，开发人员可以更方便地处理大整数，例如进行加密、哈希计算、大数据处理等操作。

具体来说，BigInt 提案的实现方式是在数字后面加上一个 n 字符，表示这是一个 BigInt 类型的值。例如，100000000000000000000n 表示一个值为 10,000,000,000,000,000,000 的 BigInt。使用 BigInt 时，可以像操作普通数字一样操作它们，例如进行加法、减法、乘法、除法等运算。

BigInt 的提案得到了广泛的支持和认可，并在 2017 年被正式纳入 ECMAScript 标准。它的引入为 JavaScript 提供了更大的灵活性和更广泛的应用场景，同时也为开发人员提供了更方便的方式来处理大整数。

9. 如何判断一个对象是空对象

判断一个对象是否为空对象可以通过以下几种方式：

1. 判断对象的属性数量是否为0：一个空对象通常没有任何属性，因此可以通过判断对象的属性数量是否为0来判断是否为空对象。例如，在JavaScript中可以使用Object.keys(obj).length === 0来检查一个对象是否为空对象。
2. 判断对象是否为null或undefined：空对象通常具有null或undefined的值。因此，可以通过检查对象的值是否为null或undefined来判断是否为空对象。例如，在JavaScript中可以使用obj === null或obj === undefined来检查一个对象是否为空对象。
3. 判断对象是否包含特定的属性：除了检查对象的属性数量外，还可以检查对象是否包含特定的属性来判断是否为空对象。如果一个对象不包含特定的属性，那么它可能是空对象。例如，在JavaScript中可以使用!obj.hasOwnProperty('prop')来检查一个对象是否包含名为prop的属性，如果不包含，则可以将其视为空对象。

需要注意的是，这些方法可能不适用于所有情况，因为对象的定义和实现可能因语言和框架而异。在具体应用中，需要根据具体的场景和要求选择合适的方法来判断对象是否为空对象。

10. const 对象的属性可以修改吗

在JavaScript中，使用const声明的常量确实是不能修改的。一旦const常量被声明并且初始化，它们的值就不能被再次赋值。这意味着你不能给const常量的属性赋值。

然而，需要注意的是，const常量不能被重新赋值并不意味着它们的属性也不能被修改。在对象中，你可以修改已经声明的const常量的属性。例如：

1. const myObj = { prop1: 1 };  
2. console.log(myObj.prop1); // 输出 1  
3.   
4. myObj.prop2 = 2; // 添加一个新的属性  
5. console.log(myObj.prop2); // 输出 2  
6.   
7. myObj.prop1 = 3; // 修改一个已有的属性  
8. console.log(myObj.prop1); // 输出 3

在这个例子中，我们创建了一个名为myObj的const常量对象，并添加了一个名为prop1的属性。然后，我们修改了prop1的值，并添加了一个新的属性prop2。尽管myObj是一个const常量，但这并不影响我们修改它的属性。

所以，虽然const常量不能被重新赋值，但它们的属性可以被修改。但是，如果你想给const常量重新赋值，包括更改它们的属性，那么你需要声明一个新的对象或者使用一个可变的对象，如数组或对象字面量。