JavaScript（1）每天10个小知识点

最新推荐文章于 2024-07-16 11:30:38 发布

云边散步

最新推荐文章于 2024-07-16 11:30:38 发布

阅读量457

点赞数

分类专栏： JavaScript面试题系列文章标签： javascript 开发语言 ecmascript 前端面试性能优化软件工程

本文链接：https://blog.csdn.net/weixin_52003205/article/details/132790101

版权

JavaScript面试题系列专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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

JavaScript有多种数据类型，它们主要分为两大类：原始数据类型（Primitive Data Types）和引用数据类型（Reference Data Types）。

原始数据类型（Primitive Data Types）:
- 字符串（String）：表示文本数据，使用单引号或双引号括起来。例如：
```
let str = 'Hello, World!';
```
- 数字（Number）：表示数值，包括整数和浮点数。例如：
```
let num = 42;
let floatNum = 3.14;
```
- 布尔（Boolean）：表示逻辑值，只有两个值：true和false。例如：
```
let isTrue = true;
let isFalse = false;
```
- 空值（Null）：表示没有值或空对象。例如：
```
let emptyValue = null;
```
- 未定义（Undefined）：表示声明了变量但没有给它赋值时的默认值。例如：
```
let undefinedVar;
```
- 符号（Symbol）：表示唯一且不可变的值，通常用于对象属性的标识符。ES6引入了Symbol。例如：
```
const uniqueSymbol = Symbol('description');
```
引用数据类型（Reference Data Types）:
- 对象（Object）：表示复杂的数据结构，可以包含多个属性和方法。例如：
```
let person = {
  name: 'John',
  age: 30
};
```
- 数组（Array）：表示有序的列表，可以包含多个值，通过索引访问。例如：
```
let colors = ['red', 'green', 'blue'];
```
- 函数（Function）：表示可执行的代码块，可以重复使用。例如：
```
function greet(name) {
  return 'Hello, ' + name + '!';
}
```

原始数据类型是不可变的，而引用数据类型是可变的。当复制原始数据类型时，会创建一个新的独立副本，而复制引用数据类型时，实际上是复制了引用地址，多个变量可能指向同一个对象。

这些数据类型在JavaScript中非常重要，了解它们的特性和区别有助于更好地编写和理解JavaScript代码。

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

在JavaScript中，您可以使用多种方式来进行数据类型检测。以下是一些常用的方法：

typeof 操作符：
使用typeof操作符可以检测一个值的数据类型，它返回一个字符串，表示该值的数据类型。例如：

typeof 42;          // "number"
typeof "Hello";     // "string"
typeof true;        // "boolean"
typeof undefined;   // "undefined"
typeof null;        // "object"（这是一个历史遗留问题，null实际上应该返回"null"）
typeof {};          // "object"
typeof [];          // "object"
typeof function(){}; // "function"

注意：typeof null返回"object"是一个历史遗留问题，实际上null应该返回"null"。

instanceof 操作符：
instanceof操作符用于检测一个对象是否是某个构造函数的实例。例如：
```
let arr = [];
arr instanceof Array; // true
```
这种方法主要用于检测引用数据类型的具体类型。

Object.prototype.toString.call()：
这是一种更精确的方式来检测数据类型，特别是用于检测引用数据类型。例如：

Object.prototype.toString.call(42);          // "[object Number]"
Object.prototype.toString.call("Hello");     // "[object String]"
Object.prototype.toString.call(true);        // "[object Boolean]"
Object.prototype.toString.call(undefined);   // "[object Undefined]"
Object.prototype.toString.call(null);        // "[object Null]"
Object.prototype.toString.call({});          // "[object Object]"
Object.prototype.toString.call([]);          // "[object Array]"
Object.prototype.toString.call(function(){}); // "[object Function]"

Array.isArray()：
用于检测一个值是否是数组。例如：
```
Array.isArray([]); // true
Array.isArray({}); // false
```

typeof 与 instanceof 结合：
有时候，使用typeof和instanceof可以结合使用来更精确地检测数据类型。例如：

function isString(value) {
  return typeof value === 'string' || value instanceof String;
}

isString("Hello");          // true
isString(new String("Hi"));  // true
isString(42);                // false

请根据您的需求选择合适的方法来进行数据类型检测。不同的方法适用于不同的情况和数据类型。

3. null 和 undefined 区别**

null和undefined是 JavaScript 中的两种特殊值，它们都表示缺失或无效的值，但在某些方面有一些不同之处：

undefined:
- 当声明了一个变量但没有初始化时，它的值为undefined。
- 未定义的变量也会被视为undefined。
- 作为函数参数的未提供的参数默认为undefined。
- 在对象中访问不存在的属性时，返回undefined。
- 在数组中访问不存在的元素时，返回undefined。
示例：
```
let x;
console.log(x); // undefined

let y;
console.log(y); // undefined

function foo(a) {
  console.log(a);
}

foo(); // undefined

let obj = {};
console.log(obj.propertyThatDoesNotExist); // undefined

let arr = [1, 2, 3];
console.log(arr[10]); // undefined
```
null:
- null是一个表示空值或无值的特殊对象。
- 当您希望明确表示一个变量或属性的值为空时，可以将其赋值为null。
- 通常由开发人员显式设置，表示主动将一个值置为空。
示例：
```
let x = null;
console.log(x); // null

let obj = { prop: null };
console.log(obj.prop); // null
```

总结：

undefined通常表示未定义、缺失或默认值，而null表示明确的空值。
在条件比较中，null和undefined通常被视为相等，但不等于任何其他值。
当您需要区分变量是否已声明或者是否已赋值为空时，undefined更适合。
当您需要明确表示某个属性或变量的值为空时，null更适合。

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

instanceof操作符用于检测一个对象是否是某个构造函数的实例。它的实现原理可以简单描述为：检查对象的原型链是否包含构造函数的prototype属性。如果原型链中的任何一个原型等于构造函数的prototype属性，instanceof返回true，否则返回false。

下面是一个简单的实现instanceof操作符的示例代码：

function customInstanceof(obj, constructor) {
  // 检查参数有效性
  if (typeof obj !== 'object' || obj === null) {
    return false;
  }

  let proto = Object.getPrototypeOf(obj); // 获取对象的原型

  // 循环查找原型链
  while (proto !== null) {
    if (proto === constructor.prototype) {
      return true; // 找到匹配的原型，返回true
    }
    proto = Object.getPrototypeOf(proto); // 继续查找下一个原型
  }

  return false; // 在整个原型链中未找到匹配的原型，返回false
}

// 示例用法
function Person(name) {
  this.name = name;
}

const person = new Person('John');

console.log(customInstanceof(person, Person)); // true，person是Person的实例
console.log(customInstanceof(person, Object)); // true，person也是Object的实例
console.log(customInstanceof(person, Array));  // false，person不是Array的实例

这个自定义的customInstanceof函数首先检查了传入的参数是否为对象，然后通过Object.getPrototypeOf来获取对象的原型，并不断循环查找原型链，直到找到与构造函数的prototype属性相等的原型，或者到达原型链的末尾为止。如果找到匹配的原型，函数返回true，否则返回false。

需要注意的是，这只是一个简化版的实现，实际的instanceof操作符还会处理一些特殊情况，比如null和undefined值。

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

在 JavaScript 中，获取安全的 undefined 值通常是不必要的，因为 undefined 通常用于表示变量未初始化或者对象属性不存在等情况。然而，如果您希望确保获取到的是真正的 undefined 而不是被覆盖或修改过的值，可以采取以下方法：

使用全局的 undefined 对象：
```
let safeUndefined = undefined; // 创建一个局部变量并赋值为全局的 undefined
```
这将确保 safeUndefined 变量的值一定是全局 undefined，无法被修改。
比较值与 undefined：

您可以使用严格相等（===）运算符来比较一个值是否等于 undefined。
```
let x; // 未初始化的变量
if (x === undefined) {
  // 这里处理 x 为 undefined 的情况
}
```
这种方式可以确保 x 的值是真正的 undefined。
使用默认参数：

在函数参数中，您可以使用默认参数来确保参数在未提供时的值为 undefined。
```
function exampleFunction(param = undefined) {
  // param 在未提供时会默认为 undefined
}
```
这样调用函数时，如果不传递参数，param 将始终为 undefined。

需要注意的是，尽管上述方法可以获取安全的 undefined 值，但在实际编程中，通常不需要特意获取安全的 undefined，因为 JavaScript 在大多数情况下会正确处理 undefined 值。只有在特殊需求下或为了保持代码的可读性时才使用这些方法。

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

Object.is() 和比较操作符 ===、== 在 JavaScript 中用于比较值之间的差异。它们之间的主要区别如下：

===（严格相等操作符）：
- === 比较两个值是否严格相等，即类型和值都相等。
- 如果两个值的数据类型不同或值不同，返回 false。
- 用于避免类型强制转换，因此通常被认为是更安全和可靠的比较方式。
- 例如：1 === 1 返回 true，1 === '1' 返回 false。
==（相等操作符）：
- == 比较两个值是否相等，但允许进行类型强制转换。
- 如果两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再比较。
- 由于类型强制转换可能导致意外的结果，因此通常要谨慎使用。
- 例如：1 == 1 返回 true，1 == '1' 也返回 true，因为后者会将字符串 '1' 转换为数字 1 进行比较。
Object.is()：
- Object.is() 是 ECMAScript 6 中引入的方法，用于比较两个值是否严格相等。
- 与 === 不同的是，Object.is() 对于特殊值（NaN和0）有不同的行为。
- Object.is() 会返回 true，只有当两个值在严格相等性比较下也相等，或者都是 NaN 时才返回 true。否则，返回 false。
- 例如：Object.is(NaN, NaN) 返回 true，Object.is(0, -0) 返回 false。

比较操作符 === 和 == 的主要区别在于类型转换。使用 === 可以避免类型强制转换，更容易预测和理解。Object.is() 则在特殊情况下，如 NaN 和 -0 的比较上表现不同，它更关注于严格相等性的概念。在选择使用哪种比较方式时，需要根据具体需求和预期结果来决定。

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

JavaScript 中的包装类型是指基本数据类型（如字符串、数字、布尔等）对应的对象类型。这些包装类型允许您在基本数据类型和对象之间进行转换，使得基本数据类型能够调用对象的方法和访问属性。JavaScript 中有三种常见的包装类型：

String 包装类型：

对应基本数据类型字符串。
允许字符串调用对象的方法。

例如：

let str = 'Hello, World!';
let strObject = new String(str); // 使用构造函数创建字符串包装对象
let length = strObject.length; // 使用包装对象的属性
let uppercase = strObject.toUpperCase(); // 使用包装对象的方法

Number 包装类型：

对应基本数据类型数字。
允许数字调用对象的方法。

例如：

let num = 42;
let numObject = new Number(num); // 使用构造函数创建数字包装对象
let decimalPlaces = numObject.toFixed(2); // 使用包装对象的方法

Boolean 包装类型：

对应基本数据类型布尔值。
允许布尔值调用对象的方法。

例如：

let bool = true;
let boolObject = new Boolean(bool); // 使用构造函数创建布尔包装对象
let valueOf = boolObject.valueOf(); // 使用包装对象的方法

需要注意的是，尽管可以使用构造函数创建包装对象，但通常不建议这样做，因为它会导致性能下降，并且可能引发意外的行为。最好的做法是直接使用基本数据类型，只在必要时使用包装类型。JavaScript 引擎会在需要时自动将基本数据类型转换为包装类型，然后执行操作，然后再将其转换回基本数据类型。这个过程被称为自动装箱（Autoboxing）和自动拆箱（Unboxing）。

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

BigInt 的提案是为了解决 JavaScript 中整数表示范围的限制问题。在 JavaScript 中，整数是基于 IEEE 754 浮点数标准的双精度浮点数表示的，这导致了整数的表示范围有限，最大安全整数是 2^53 - 1，即 Number.MAX_SAFE_INTEGER。

BigInt 提案的主要动机如下：

大整数运算：在某些应用中，需要处理非常大的整数，例如密码学、大数据计算、高精度数学计算等。传统的 JavaScript 整数无法满足这些需求。
整数精度：浮点数精度有限，对于大整数计算可能会导致精度丢失。BigInt 提供了可以表示任意精度的整数，不会发生精度丢失的问题。
与其他语言的互操作性：许多其他编程语言都具有原生支持大整数的能力，为了与这些语言进行互操作，JavaScript 需要提供类似的功能。

BigInt 提案引入了新的数据类型 BigInt，以及一组操作符和方法来支持大整数计算。以下是 BigInt 的一些示例用法：

const bigIntValue = 1234567890123456789012345678901234567890n; // 创建 BigInt
const result = bigIntValue + 1n; // 进行 BigInt 运算
console.log(result); // 输出 1234567890123456789012345678901234567891n

要注意的是，BigInt 是一种特殊的数据类型，与常规的数字（Number）不兼容。因此，BigInt 不支持与 Number 直接混合运算，需要通过显式转换或使用 BigInt 相关的操作符来处理。

BigInt 的提案已经被添加到 ECMAScript 标准中，因此现在可以在支持的 JavaScript 引擎中使用 BigInt 进行大整数计算。这使得 JavaScript 可以更好地满足处理大整数的需求，并增强了语言的通用性和功能性。

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

要判断一个对象是否是空对象，您可以使用以下几种方法：

使用Object.keys()方法：
Object.keys(obj) 返回一个包含对象所有属性名称的数组。如果对象是空对象，那么这个数组应该是空的。

function isEmptyObject(obj) {
  return Object.keys(obj).length === 0;
}

const emptyObject = {};
const nonEmptyObject = { key: 'value' };

console.log(isEmptyObject(emptyObject));      // true
console.log(isEmptyObject(nonEmptyObject));   // false

使用for...in循环：
通过遍历对象的属性，如果没有任何属性被遍历到，那么对象就是空的。

function isEmptyObject(obj) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      return false;
    }
  }
  return true;
}

const emptyObject = {};
const nonEmptyObject = { key: 'value' };

console.log(isEmptyObject(emptyObject));      // true
console.log(isEmptyObject(nonEmptyObject));   // false

使用JSON.stringify()：
JSON.stringify(obj) 将对象转换为 JSON 字符串。如果对象是空对象，那么 JSON 字符串应该是'{}'。

function isEmptyObject(obj) {
  return JSON.stringify(obj) === '{}';
}

const emptyObject = {};
const nonEmptyObject = { key: 'value' };

console.log(isEmptyObject(emptyObject));      // true
console.log(isEmptyObject(nonEmptyObject));   // false

这些方法都可以用来判断一个对象是否为空对象，您可以根据自己的需求选择其中的任何一个。请注意，这些方法都不会检查对象的原型链上的属性，只会检查对象本身的可枚举属性。

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

在 JavaScript 中，使用 const 声明的变量是常量，这意味着它们不能被重新赋值。然而，const 声明的对象本身是不可变的，但对象属性（对象的值）是可以被修改的。

例如，您可以声明一个包含对象的常量，并修改该对象的属性：

const person = {
  name: 'John',
  age: 30
};

// 可以修改对象的属性
person.name = 'Alice';
person.age = 35;

console.log(person); // { name: 'Alice', age: 35 }

在上面的示例中，person 是一个常量，但我们可以修改 person 对象的属性（name 和 age）的值。这是因为 const 仅限制了变量（person）的重新赋值，而不限制对象属性的更改。

如果您希望完全禁止对象属性的修改，可以考虑使用 Object.freeze() 方法来冻结对象：

const person = Object.freeze({
  name: 'John',
  age: 30
});

// 尝试修改对象的属性会导致错误
person.name = 'Alice'; // 无效，但不会报错

console.log(person); // { name: 'John', age: 30 }

在这种情况下，任何尝试修改 person 对象的属性都将被忽略，但不会引发错误。