面試 JavaScript 框架八股文十問十答第六期

作者：程序員小白條，個(gè)人博客

相信看了本文后，對(duì)你的面試是有一定幫助的！關(guān)注專欄后就能收到持續(xù)更新！

?點(diǎn)贊?收藏?不迷路！?

1）use strict是什么意思 ? 使用它區(qū)別是什么？

"use strict" 是在 JavaScript 中的嚴(yán)格模式聲明。它是 ECMAScript 5 引入的一項(xiàng)特性，用于提供更強(qiáng)的錯(cuò)誤檢查和更規(guī)范的行為。使用嚴(yán)格模式有以下特點(diǎn)：

• 錯(cuò)誤檢測： 嚴(yán)格模式會(huì)更嚴(yán)格地檢查代碼中的錯(cuò)誤，并在一些情況下拋出錯(cuò)誤，例如變量未聲明時(shí)。
• 安全性提高： 一些不安全的操作，例如禁止使用 with 語句，可以避免在嚴(yán)格模式下使用。
• 更嚴(yán)格的 this 指向： 在函數(shù)內(nèi)部，嚴(yán)格模式下 this 的值為 undefined，而非嚴(yán)格模式下可能指向全局對(duì)象。
• 禁止刪除變量、函數(shù)等： 在嚴(yán)格模式下，使用 delete 刪除變量、函數(shù)等操作是被禁止的。
• 禁止重復(fù)的參數(shù)名和屬性名： 嚴(yán)格模式下不允許定義重復(fù)的函數(shù)參數(shù)名和對(duì)象字面量中的重復(fù)屬性名。

使用 use strict 的區(qū)別在于它會(huì)對(duì)代碼執(zhí)行施加更多的限制和規(guī)則，提高代碼質(zhì)量和可維護(hù)性。

// 嚴(yán)格模式示例
"use strict";// 在嚴(yán)格模式下，下面的代碼會(huì)拋出錯(cuò)誤
undefinedVariable = "Hello"; // ReferenceError: undefinedVariable is not defined

2）如何判斷一個(gè)對(duì)象是否屬于某個(gè)類？

在 JavaScript 中，對(duì)象是否屬于某個(gè)類通常通過檢查其構(gòu)造函數(shù)來判斷?？梢允褂?instanceof 操作符來檢查一個(gè)對(duì)象是否是某個(gè)類（或其原型鏈上的類）的實(shí)例。

示例：

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 類的實(shí)例。如果是，則輸出相應(yīng)的信息。

3）強(qiáng)類型語言和弱類型語言的區(qū)別

• 強(qiáng)類型語言（Strongly Typed）：
  • 強(qiáng)類型語言要求變量的類型在編譯時(shí)就已經(jīng)明確，并且不允許隱式類型轉(zhuǎn)換。
  • 在強(qiáng)類型語言中，對(duì)于不同類型的變量，進(jìn)行操作時(shí)需要明確進(jìn)行類型轉(zhuǎn)換。
• 弱類型語言（Weakly Typed）：
  • 弱類型語言允許在運(yùn)行時(shí)進(jìn)行隱式類型轉(zhuǎn)換。
  • 在弱類型語言中，變量的類型可以更靈活地進(jìn)行轉(zhuǎn)換，而不需要顯式地聲明類型。

比如，JavaScript 是一種弱類型語言，因?yàn)樗试S在運(yùn)行時(shí)進(jìn)行隱式類型轉(zhuǎn)換，而無需明確的類型聲明。

// JavaScript 示例（弱類型）
let x = "5";
let y = 10;let result = x + y; // 字符串和數(shù)字相加，會(huì)發(fā)生隱式類型轉(zhuǎn)換，結(jié)果為 "510"

在強(qiáng)類型語言中，上述操作可能會(huì)導(dǎo)致類型錯(cuò)誤，需要顯式進(jìn)行類型轉(zhuǎn)換。

4）解釋性語言和編譯型語言的區(qū)別

解釋性語言和編譯型語言的區(qū)別在于它們的代碼執(zhí)行方式：

• 解釋性語言在運(yùn)行時(shí)逐行解釋源代碼，并將其轉(zhuǎn)換為機(jī)器代碼執(zhí)行。解釋性語言不需要顯式的編譯過程，代碼可以直接運(yùn)行。例如，JavaScript和Python都是解釋性語言。
• 編譯型語言在運(yùn)行之前需要先通過編譯器將源代碼轉(zhuǎn)換為機(jī)器代碼，然后再執(zhí)行生成的機(jī)器代碼。編譯型語言的代碼執(zhí)行速度通常較快。例如，C++和Java都是編譯型語言。

5）for…in和for…of的區(qū)別

or…in和for…of是JavaScript中的兩種循環(huán)語句，它們的區(qū)別如下：

• for…in循環(huán)用于遍歷對(duì)象的可枚舉屬性。它會(huì)遍歷對(duì)象及其原型鏈上的所有可枚舉屬性，并將屬性名賦值給循環(huán)變量。例如，可以使用for…in循環(huán)遍歷對(duì)象的屬性并進(jìn)行操作。

• for…of循環(huán)用于遍歷可迭代對(duì)象（如數(shù)組、字符串、Set、Map等）。它會(huì)遍歷對(duì)象中的每個(gè)元素，并將元素的值賦值給循環(huán)變量。例如，可以使用for…of循環(huán)遍歷數(shù)組的元素并進(jìn)行操作。

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遍歷對(duì)象

for…of循環(huán)不能直接用于遍歷對(duì)象的屬性，因?yàn)閷?duì)象不是一個(gè)可迭代對(duì)象。但是可以通過結(jié)合Object.keys()方法和for…of循環(huán)來遍歷對(duì)象的屬性。Object.keys()方法會(huì)返回一個(gè)包含對(duì)象自身可枚舉屬性的數(shù)組，然后可以使用for…of循環(huán)來遍歷這個(gè)數(shù)組，進(jìn)而遍歷對(duì)象的屬性。

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的區(qū)別

ajax、axios和fetch都是用于發(fā)送HTTP請求的工具，它們的區(qū)別如下：

• ajax是一種基于XMLHttpRequest對(duì)象的原生JavaScript方法，用于發(fā)送異步請求。它可以發(fā)送各種類型的請求（如GET、POST等），并且可以通過設(shè)置回調(diào)函數(shù)處理響應(yīng)結(jié)果。ajax的使用相對(duì)較底層，需要手動(dòng)處理請求和響應(yīng)的細(xì)節(jié)。
• axios是一個(gè)基于Promise的HTTP客戶端，可以在瀏覽器和Node.js環(huán)境中使用。它封裝了XMLHttpRequest對(duì)象，提供了更簡潔和高級(jí)的API，支持更多的請求配置和攔截器等功能。axios使用起來更加方便和靈活。
• fetch是瀏覽器原生的API，用于發(fā)送HTTP請求。它基于Promise，提供了一種簡單、直觀的方式來發(fā)送請求和處理響應(yīng)。fetch的API設(shè)計(jì)更加現(xiàn)代化，支持鏈?zhǔn)秸{(diào)用和使用ES6的語法特性。然而，fetch在某些方面（如錯(cuò)誤處理和請求取消）上相對(duì)不夠完善，需要額外的處理。

8）數(shù)組的遍歷方法有哪些

數(shù)組的遍歷方法有以下幾種：

• for循環(huán)：使用傳統(tǒng)的for循環(huán)可以遍歷數(shù)組，通過索引訪問每個(gè)元素。
• forEach方法：forEach方法是數(shù)組的一個(gè)內(nèi)置方法，它接受一個(gè)回調(diào)函數(shù)作為參數(shù)，對(duì)數(shù)組中的每個(gè)元素進(jìn)行遍歷操作。
• map方法：map方法也是數(shù)組的一個(gè)內(nèi)置方法，它接受一個(gè)回調(diào)函數(shù)作為參數(shù)，對(duì)數(shù)組中的每個(gè)元素進(jìn)行遍歷操作，并返回一個(gè)新的數(shù)組，新數(shù)組的每個(gè)元素是回調(diào)函數(shù)的返回值。
• for…of循環(huán)：for…of循環(huán)是ES6中引入的一種新的循環(huán)語句，可以用于遍歷可迭代對(duì)象（包括數(shù)組）的元素。
• for…in循環(huán)：for…in循環(huán)用于遍歷對(duì)象的可枚舉屬性，但不推薦用于遍歷數(shù)組，因?yàn)樗鼤?huì)遍歷數(shù)組的所有屬性，包括原型鏈上的屬性。

9）forEach和map方法有什么區(qū)別

forEach方法和map方法的區(qū)別如下：

• forEach方法：它會(huì)對(duì)數(shù)組中的每個(gè)元素執(zhí)行回調(diào)函數(shù)，但不返回新的數(shù)組。它通常用于對(duì)數(shù)組進(jìn)行遍歷操作，可以在回調(diào)函數(shù)中對(duì)數(shù)組元素進(jìn)行修改，但無法改變原數(shù)組。

const arr = [1, 2, 3];
arr.forEach((item, index) => {console.log(item); // 輸出數(shù)組元素：1, 2, 3
});

• map方法：它會(huì)對(duì)數(shù)組中的每個(gè)元素執(zhí)行回調(diào)函數(shù)，并返回一個(gè)新的數(shù)組，新數(shù)組的每個(gè)元素是回調(diào)函數(shù)的返回值。它通常用于對(duì)數(shù)組進(jìn)行變換操作，可以通過回調(diào)函數(shù)的返回值來生成新的數(shù)組。

const arr = [1, 2, 3];
const newArr = arr.map((item, index) => {return item * 2;
});
console.log(newArr); // 輸出新數(shù)組：[2, 4, 6]

10）對(duì)原型、原型鏈的理解

原型（prototype）是JavaScript中的一個(gè)對(duì)象特性，每個(gè)對(duì)象都有一個(gè)原型。原型鏈?zhǔn)怯蓪?duì)象的原型組成的一條鏈，用于查找對(duì)象的屬性和方法。

• 原型：每個(gè)對(duì)象（包括函數(shù)）都有一個(gè)原型對(duì)象，它是一個(gè)普通的對(duì)象?？梢酝ㄟ^Object.prototype來訪問原型對(duì)象。在原型對(duì)象中定義的屬性和方法可以被該對(duì)象的所有實(shí)例共享。
• 原型鏈：每個(gè)對(duì)象都有一個(gè)指向其原型的鏈接，形成原型鏈。當(dāng)訪問一個(gè)對(duì)象的屬性或方法時(shí)，如果對(duì)象本身沒有該屬性或方法，JavaScript引擎會(huì)沿著原型鏈向上查找，直到找到該屬性或方法或者到達(dá)原型鏈的末端（即Object.prototype）。

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

• 實(shí)現(xiàn)屬性和方法的繼承：通過原型鏈，子對(duì)象可以繼承父對(duì)象的屬性和方法。
• 節(jié)省內(nèi)存：多個(gè)對(duì)象共享同一個(gè)原型對(duì)象，避免了重復(fù)定義相同的屬性和方法。
• 動(dòng)態(tài)添加屬性和方法：可以在原型對(duì)象上動(dòng)態(tài)添加屬性和方法，所有實(shí)例對(duì)象都能夠訪問到。

例如，可以通過構(gòu)造函數(shù)和原型來創(chuàng)建對(duì)象，并使用原型鏈實(shí)現(xiàn)屬性和方法的繼承：

function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log("Hello, " + this.name);
}const person = new Person("Alice");
person.sayHello(); // 輸出 "Hello, Alice"

開源項(xiàng)目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

?點(diǎn)贊?收藏?不迷路！?