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

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

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

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

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

1）use strict是什么意思 ? 使用它区别是什么？

"use strict" 是在 JavaScript 中的严格模式声明。它是 ECMAScript 5 引入的一项特性，用于提供更强的错误检查和更规范的行为。使用严格模式有以下特点：

• 错误检测： 严格模式会更严格地检查代码中的错误，并在一些情况下抛出错误，例如变量未声明时。
• 安全性提高： 一些不安全的操作，例如禁止使用 with 语句，可以避免在严格模式下使用。
• 更严格的 this 指向： 在函数内部，严格模式下 this 的值为 undefined，而非严格模式下可能指向全局对象。
• 禁止删除变量、函数等： 在严格模式下，使用 delete 删除变量、函数等操作是被禁止的。
• 禁止重复的参数名和属性名： 严格模式下不允许定义重复的函数参数名和对象字面量中的重复属性名。

使用 use strict 的区别在于它会对代码执行施加更多的限制和规则，提高代码质量和可维护性。

// 严格模式示例
"use strict";

// 在严格模式下，下面的代码会抛出错误
undefinedVariable = "Hello"; // ReferenceError: undefinedVariable is not defined

2）如何判断一个对象是否属于某个类？

在 JavaScript 中，对象是否属于某个类通常通过检查其构造函数来判断。可以使用 instanceof 操作符来检查一个对象是否是某个类（或其原型链上的类）的实例。

示例：

class Animal {
  // ...
}

const cat = new Animal();

if (cat instanceof Animal) {
  console.log("cat is an instance of Animal");
} else {
  console.log("cat is not an instance of Animal");
}

上述代码中，通过 instanceof 操作符检查 cat 是否是 Animal 类的实例。如果是，则输出相应的信息。

3）强类型语言和弱类型语言的区别

• 强类型语言（Strongly Typed）：
  • 强类型语言要求变量的类型在编译时就已经明确，并且不允许隐式类型转换。
  • 在强类型语言中，对于不同类型的变量，进行操作时需要明确进行类型转换。
• 弱类型语言（Weakly Typed）：
  • 弱类型语言允许在运行时进行隐式类型转换。
  • 在弱类型语言中，变量的类型可以更灵活地进行转换，而不需要显式地声明类型。

比如，JavaScript 是一种弱类型语言，因为它允许在运行时进行隐式类型转换，而无需明确的类型声明。

// JavaScript 示例（弱类型）
let x = "5";
let y = 10;

let result = x + y; // 字符串和数字相加，会发生隐式类型转换，结果为 "510"

在强类型语言中，上述操作可能会导致类型错误，需要显式进行类型转换。

4）解释性语言和编译型语言的区别

解释性语言和编译型语言的区别在于它们的代码执行方式：

• 解释性语言在运行时逐行解释源代码，并将其转换为机器代码执行。解释性语言不需要显式的编译过程，代码可以直接运行。例如，JavaScript和Python都是解释性语言。
• 编译型语言在运行之前需要先通过编译器将源代码转换为机器代码，然后再执行生成的机器代码。编译型语言的代码执行速度通常较快。例如，C++和Java都是编译型语言。

5）for…in和for…of的区别

or…in和for…of是JavaScript中的两种循环语句，它们的区别如下：

• for…in循环用于遍历对象的可枚举属性。它会遍历对象及其原型链上的所有可枚举属性，并将属性名赋值给循环变量。例如，可以使用for…in循环遍历对象的属性并进行操作。

• for…of循环用于遍历可迭代对象（如数组、字符串、Set、Map等）。它会遍历对象中的每个元素，并将元素的值赋值给循环变量。例如，可以使用for…of循环遍历数组的元素并进行操作。

const arr = [1, 2, 3];
for (let item of arr) {
  console.log(item); // 输出元素值：1, 2, 3
}

const obj = { a: 1, b: 2, c: 3 };
for (let prop in obj) {
  console.log(prop); // 输出属性名："a", "b", "c"
}

6）如何使用for…of遍历对象

for…of循环不能直接用于遍历对象的属性，因为对象不是一个可迭代对象。但是可以通过结合Object.keys()方法和for…of循环来遍历对象的属性。Object.keys()方法会返回一个包含对象自身可枚举属性的数组，然后可以使用for…of循环来遍历这个数组，进而遍历对象的属性。

const obj = { a: 1, b: 2, c: 3 };
for (let key of Object.keys(obj)) {
  console.log(key); // 输出属性名："a", "b", "c"
}

7）ajax、axios、fetch的区别

ajax、axios和fetch都是用于发送HTTP请求的工具，它们的区别如下：

• ajax是一种基于XMLHttpRequest对象的原生JavaScript方法，用于发送异步请求。它可以发送各种类型的请求（如GET、POST等），并且可以通过设置回调函数处理响应结果。ajax的使用相对较底层，需要手动处理请求和响应的细节。
• axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js环境中使用。它封装了XMLHttpRequest对象，提供了更简洁和高级的API，支持更多的请求配置和拦截器等功能。axios使用起来更加方便和灵活。
• fetch是浏览器原生的API，用于发送HTTP请求。它基于Promise，提供了一种简单、直观的方式来发送请求和处理响应。fetch的API设计更加现代化，支持链式调用和使用ES6的语法特性。然而，fetch在某些方面（如错误处理和请求取消）上相对不够完善，需要额外的处理。

8）数组的遍历方法有哪些

数组的遍历方法有以下几种：

• for循环：使用传统的for循环可以遍历数组，通过索引访问每个元素。
• forEach方法：forEach方法是数组的一个内置方法，它接受一个回调函数作为参数，对数组中的每个元素进行遍历操作。
• map方法：map方法也是数组的一个内置方法，它接受一个回调函数作为参数，对数组中的每个元素进行遍历操作，并返回一个新的数组，新数组的每个元素是回调函数的返回值。
• for…of循环：for…of循环是ES6中引入的一种新的循环语句，可以用于遍历可迭代对象（包括数组）的元素。
• for…in循环：for…in循环用于遍历对象的可枚举属性，但不推荐用于遍历数组，因为它会遍历数组的所有属性，包括原型链上的属性。

9）forEach和map方法有什么区别

forEach方法和map方法的区别如下：

• forEach方法：它会对数组中的每个元素执行回调函数，但不返回新的数组。它通常用于对数组进行遍历操作，可以在回调函数中对数组元素进行修改，但无法改变原数组。

const arr = [1, 2, 3];
arr.forEach((item, index) => {
  console.log(item); // 输出数组元素：1, 2, 3
});

• map方法：它会对数组中的每个元素执行回调函数，并返回一个新的数组，新数组的每个元素是回调函数的返回值。它通常用于对数组进行变换操作，可以通过回调函数的返回值来生成新的数组。

const arr = [1, 2, 3];
const newArr = arr.map((item, index) => {
  return item * 2;
});
console.log(newArr); // 输出新数组：[2, 4, 6]

10）对原型、原型链的理解

原型（prototype）是JavaScript中的一个对象特性，每个对象都有一个原型。原型链是由对象的原型组成的一条链，用于查找对象的属性和方法。

• 原型：每个对象（包括函数）都有一个原型对象，它是一个普通的对象。可以通过Object.prototype来访问原型对象。在原型对象中定义的属性和方法可以被该对象的所有实例共享。
• 原型链：每个对象都有一个指向其原型的链接，形成原型链。当访问一个对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的末端（即Object.prototype）。

原型和原型链的作用包括：

• 实现属性和方法的继承：通过原型链，子对象可以继承父对象的属性和方法。
• 节省内存：多个对象共享同一个原型对象，避免了重复定义相同的属性和方法。
• 动态添加属性和方法：可以在原型对象上动态添加属性和方法，所有实例对象都能够访问到。

例如，可以通过构造函数和原型来创建对象，并使用原型链实现属性和方法的继承：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log("Hello, " + this.name);
}

const person = new Person("Alice");
person.sayHello(); // 输出 "Hello, Alice"

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

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