日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當(dāng)前位置:首頁 > 科技  > 軟件

被難倒了! 針對高級前端的八個級JavaScript面試問題

來源: 責(zé)編: 時間:2023-09-20 21:54:25 317觀看
導(dǎo)讀JavaScript 是一種功能強(qiáng)大的語言,也是構(gòu)建現(xiàn)代 Web 的基礎(chǔ)之一。這種強(qiáng)大的語言也有一些自己的怪癖。例如,你知道 0 === -0 會計(jì)算為 true,或者 Number("") 會返回 0 嗎?有時候,這些怪癖會讓你百思不得其解,甚至讓你懷疑 B

uR128資訊網(wǎng)——每日最新資訊28at.com

JavaScript 是一種功能強(qiáng)大的語言,也是構(gòu)建現(xiàn)代 Web 的基礎(chǔ)之一。這種強(qiáng)大的語言也有一些自己的怪癖。例如,你知道 0 === -0 會計(jì)算為 true,或者 Number("") 會返回 0 嗎?uR128資訊網(wǎng)——每日最新資訊28at.com

有時候,這些怪癖會讓你百思不得其解,甚至讓你懷疑 Brendan Eich 在發(fā)明 JavaScript 的那一天是不是狀態(tài)不佳。但這里的重點(diǎn)并不是說 JavaScript 是一種糟糕的編程語言,或者如其批評者所說的那樣,是一種“邪惡”的語言。所有的編程語言都有某種程度的怪癖,JavaScript 也不例外。uR128資訊網(wǎng)——每日最新資訊28at.com

在這篇博客文章中,我們將深入解釋一些重要的 JavaScript 面試問題。我的目標(biāo)是徹底解釋這些面試問題,以便我們能夠理解背后的基本概念,并希望在面試中解決其他類似的問題。uR128資訊網(wǎng)——每日最新資訊28at.com

1、仔細(xì)觀察 + 和 - 運(yùn)算符

console.log(1 + '1' - 1);

你能猜到在上面這種情況下,JavaScript 的 + 和 - 運(yùn)算符會有什么行為嗎?uR128資訊網(wǎng)——每日最新資訊28at.com

當(dāng) JavaScript 遇到 1 + '1' 時,它會使用 + 運(yùn)算符來處理這個表達(dá)式。+ 運(yùn)算符有一個有趣的特性,那就是當(dāng)其中一個操作數(shù)是字符串時,它更傾向于執(zhí)行字符串的連接。在我們的例子中,'1' 是一個字符串,因此 JavaScript 隱式地將數(shù)字 1 轉(zhuǎn)換為字符串。因此,1 + '1' 變成了 '1' + '1',結(jié)果是字符串 '11'。uR128資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在,我們的等式是 '11' - 1。- 運(yùn)算符的行為正好相反。它更傾向于執(zhí)行數(shù)字減法,而不考慮操作數(shù)的類型。當(dāng)操作數(shù)不是數(shù)字類型時,JavaScript 會執(zhí)行隱式轉(zhuǎn)換,將它們轉(zhuǎn)換為數(shù)字。在這種情況下,'11' 被轉(zhuǎn)換為數(shù)字值 11,表達(dá)式簡化為 11 - 1。uR128資訊網(wǎng)——每日最新資訊28at.com

綜合考慮:uR128資訊網(wǎng)——每日最新資訊28at.com

'11' - 1 = 11 - 1 = 10

2、數(shù)組元素的復(fù)制

考慮以下的 JavaScript 代碼,并嘗試找出其中的問題:uR128資訊網(wǎng)——每日最新資訊28at.com

function duplicate(array) {  for (var i = 0; i < array.length; i++) {    array.push(array[i]);  }  return array;}const arr = [1, 2, 3];const newArr = duplicate(arr);console.log(newArr);

在這段代碼片段中,我們需要創(chuàng)建一個新數(shù)組,該數(shù)組包含輸入數(shù)組的重復(fù)元素。初步檢查后,代碼似乎通過復(fù)制原始數(shù)組 arr 中的每個元素來創(chuàng)建一個新數(shù)組 newArr。然而,在 duplicate 函數(shù)內(nèi)部出現(xiàn)了一個嚴(yán)重的問題。uR128資訊網(wǎng)——每日最新資訊28at.com

duplicate 函數(shù)使用循環(huán)來遍歷給定數(shù)組中的每個項(xiàng)目。但在循環(huán)內(nèi)部,它使用 push() 方法在數(shù)組末尾添加新元素。這導(dǎo)致數(shù)組每次都會變長,從而產(chǎn)生一個問題:循環(huán)永遠(yuǎn)不會停止。因?yàn)閿?shù)組長度不斷增加,循環(huán)條件(i < array.length)始終為真。這使得循環(huán)無限進(jìn)行下去,導(dǎo)致程序陷入僵局。uR128資訊網(wǎng)——每日最新資訊28at.com

為了解決由于數(shù)組長度增長而導(dǎo)致的無限循環(huán)問題,可以在進(jìn)入循環(huán)之前將數(shù)組的初始長度存儲在一個變量中。然后,可以使用這個初始長度作為循環(huán)迭代的限制。這樣,循環(huán)只會針對數(shù)組中的原始元素進(jìn)行,并不會受到由于添加重復(fù)項(xiàng)而導(dǎo)致數(shù)組增長的影響。以下是修改后的代碼:uR128資訊網(wǎng)——每日最新資訊28at.com

function duplicate(array) {  var initialLength = array.length; // 存儲初始長度  for (var i = 0; i < initialLength; i++) {    array.push(array[i]); // 推入每個元素的副本  }  return array;}const arr = [1, 2, 3];const newArr = duplicate(arr);console.log(newArr);

輸出將顯示數(shù)組末尾的重復(fù)元素,并且循環(huán)不會導(dǎo)致無限循環(huán):uR128資訊網(wǎng)——每日最新資訊28at.com

[1, 2, 3, 1, 2, 3]

3、prototype 和 proto 的區(qū)別

prototype 屬性是與 JavaScript 中的構(gòu)造函數(shù)相關(guān)聯(lián)的屬性。構(gòu)造函數(shù)用于在 JavaScript 中創(chuàng)建對象。當(dāng)您定義一個構(gòu)造函數(shù)時,還可以將屬性和方法附加到其 prototype 屬性上。這些屬性和方法然后變得可以被該構(gòu)造函數(shù)創(chuàng)建的所有對象實(shí)例訪問。因此,prototype 屬性充當(dāng)共享方法和屬性的通用存儲庫。uR128資訊網(wǎng)——每日最新資訊28at.com

考慮以下代碼片段:uR128資訊網(wǎng)——每日最新資訊28at.com

// 構(gòu)造函數(shù)function Person(name) {  this.name = name;}// 添加一個方法到 prototypePerson.prototype.sayHello = function() {  console.log(`Hello, my name is ${this.name}.`);};// 創(chuàng)建實(shí)例const person1 = new Person("Haider Wain");const person2 = new Person("Omer Asif");// 調(diào)用共享的方法person1.sayHello();  // 輸出:Hello, my name is Haider Wain.person2.sayHello();  // 輸出:Hello, my name is Omer Asif.

另一方面,__proto__ 屬性,通常讀作 "dunder proto",存在于每一個 JavaScript 對象中。在 JavaScript 中,除了原始類型外,一切都可以被視為對象。每個這樣的對象都有一個原型,該原型作為對另一個對象的引用。__proto__ 屬性簡單地是對這個原型對象的引用。uR128資訊網(wǎng)——每日最新資訊28at.com

當(dāng)你試圖訪問對象上的一個屬性或方法時,JavaScript 會進(jìn)行查找過程來找到它。這個過程主要涉及兩個步驟:uR128資訊網(wǎng)——每日最新資訊28at.com

對象的自有屬性:JavaScript 首先檢查對象自身是否直接擁有所需的屬性或方法。如果在對象內(nèi)找到了該屬性,則直接訪問和使用。原型鏈查找:如果在對象自身沒有找到該屬性,JavaScript 將查看對象的原型(由 __proto__ 屬性引用)并在那里搜索該屬性。這個過程會遞歸地沿著原型鏈進(jìn)行,直到找到該屬性或直到查找達(dá)到 Object.prototype。如果在 Object.prototype 中甚至沒有找到該屬性,JavaScript 將返回 undefined,表示該屬性不存在。uR128資訊網(wǎng)——每日最新資訊28at.com

4、作用域

當(dāng)編寫 JavaScript 代碼時,理解作用域的概念非常重要。作用域指的是變量在代碼的不同部分的可訪問性或可見性。下面我們通過一個代碼片段來更仔細(xì)地了解這個概念:uR128資訊網(wǎng)——每日最新資訊28at.com

function foo() {  console.log(a);}function bar() {  var a = 3;  foo();}var a = 5;bar();

代碼定義了兩個函數(shù) foo() 和 bar(),以及一個值為5的變量 a。所有這些聲明都發(fā)生在全局作用域中。在bar()函數(shù)內(nèi)部,聲明了一個變量a并賦值為 3。那么當(dāng)bar()函數(shù)被調(diào)用時,你認(rèn)為會輸出哪個值的a?uR128資訊網(wǎng)——每日最新資訊28at.com

當(dāng)JavaScript引擎執(zhí)行這段代碼時,全局變量a被聲明并賦值為5。然后調(diào)用了bar()函數(shù)。在bar()函數(shù)內(nèi)部,聲明了一個局部變量a并賦值為3。這個局部變量a與全局變量a是不同的。之后,從bar()函數(shù)內(nèi)部調(diào)用了foo()函數(shù)。uR128資訊網(wǎng)——每日最新資訊28at.com

在foo()函數(shù)內(nèi)部,console.log(a)語句試圖輸出變量a的值。由于在foo()函數(shù)的作用域內(nèi)沒有定義局部變量a,JavaScript會查找作用域鏈以找到最近的名為a的變量。uR128資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在,我們來解答JavaScript將在哪里搜索變量a的問題。它會查找bar函數(shù)的作用域嗎,還是會探索全局作用域?事實(shí)證明,JavaScript會在全局作用域中搜索,這種行為是由一個叫做詞法作用域的概念驅(qū)動的。uR128資訊網(wǎng)——每日最新資訊28at.com

詞法作用域是指函數(shù)或變量在代碼中被編寫時的作用域。當(dāng)我們定義了foo函數(shù),它被賦予了訪問自己的局部作用域和全局作用域的權(quán)限。這一特性在我們無論在哪里調(diào)用foo函數(shù)時都是一致的,無論是在bar函數(shù)內(nèi)部還是在其他模塊中運(yùn)行。詞法作用域并不是由我們在哪里調(diào)用函數(shù)來決定的。uR128資訊網(wǎng)——每日最新資訊28at.com

最終結(jié)果是,輸出始終是全局作用域中找到的a的值,在這個例子中是5。uR128資訊網(wǎng)——每日最新資訊28at.com

然而,如果我們在bar函數(shù)內(nèi)部定義了foo函數(shù),情況就會有所不同:uR128資訊網(wǎng)——每日最新資訊28at.com

function bar() {  var a = 3;  function foo() {    console.log(a);  }  foo();}var a = 5;bar();

在這種情況下,foo 的詞法作用域?qū)ㄈ齻€不同的作用域:它自己的局部作用域,bar 函數(shù)的作用域,以及全局作用域。詞法作用域是由你在源代碼中放置代碼的位置在編譯時決定的。uR128資訊網(wǎng)——每日最新資訊28at.com

當(dāng)這段代碼運(yùn)行時,foo 位于 bar 函數(shù)內(nèi)部。這種安排改變了作用域的動態(tài)。現(xiàn)在,當(dāng)foo試圖訪問變量a時,它首先會在自己的局部作用域內(nèi)進(jìn)行搜索。由于沒有找到a,它會擴(kuò)大搜索范圍到bar函數(shù)的作用域。果然,那里存在一個值為3的a。因此,控制臺語句將輸出3。uR128資訊網(wǎng)——每日最新資訊28at.com

5、對象強(qiáng)制類型轉(zhuǎn)換

const obj = {  valueOf: () => 42,  toString: () => 27};console.log(obj + '');

一個引人入勝的方面是探究JavaScript如何處理對象轉(zhuǎn)換為基本值,例如字符串、數(shù)字或布爾值。這是一個有趣的問題,測試你是否了解對象的強(qiáng)制類型轉(zhuǎn)換。uR128資訊網(wǎng)——每日最新資訊28at.com

在像字符串連接或算術(shù)運(yùn)算這樣的場景中與對象一起工作時,這種轉(zhuǎn)換至關(guān)重要。為了實(shí)現(xiàn)這一點(diǎn),JavaScript 依賴兩個特殊的方法:valueOf 和 toString。uR128資訊網(wǎng)——每日最新資訊28at.com

valueOf 方法是JavaScript對象轉(zhuǎn)換機(jī)制的一個基礎(chǔ)部分。當(dāng)一個對象在需要基本值的上下文中被使用時,JavaScript 首先會在對象內(nèi)部查找valueOf方法。在valueOf方法不存在或不返回適當(dāng)?shù)幕局档那闆r下,JavaScript會退回到toString方法。這個方法負(fù)責(zé)提供對象的字符串表示形式。uR128資訊網(wǎng)——每日最新資訊28at.com

回到我們最初的代碼片段:uR128資訊網(wǎng)——每日最新資訊28at.com

const obj = {  valueOf: () => 42,  toString: () => 27};console.log(obj + '');

當(dāng)我們運(yùn)行這段代碼時,對象obj被轉(zhuǎn)換為一個基本值。在這種情況下,valueOf 方法返回42,然后由于與空字符串的連接,它被隱式地轉(zhuǎn)換為字符串。因此,代碼的輸出將是 42。uR128資訊網(wǎng)——每日最新資訊28at.com

然而,在valueOf方法不存在或不返回適當(dāng)?shù)幕局档那闆r下,JavaScript會退回到toString方法。讓我們修改之前的示例:uR128資訊網(wǎng)——每日最新資訊28at.com

const obj = {  toString: () => 27};console.log(obj + '');

在這里,我們已經(jīng)移除了 valueOf 方法,只留下了返回?cái)?shù)字27的toString方法。在這種情況下,JavaScript 將依賴 toString 方法進(jìn)行對象轉(zhuǎn)換。uR128資訊網(wǎng)——每日最新資訊28at.com

6、理解對象鍵(Object Keys)

當(dāng)在JavaScript中使用對象時,理解鍵是如何在其他對象的上下文中被處理和分配的非常重要。考慮以下代碼片段,并花點(diǎn)時間猜測輸出:uR128資訊網(wǎng)——每日最新資訊28at.com

let a = {};let b = { key: 'test' };let c = { key: 'test' };a[b] = '123';a[c] = '456';console.log(a);

乍一看,這段代碼似乎應(yīng)該生成一個具有兩個不同鍵值對的對象a。然而,由于JavaScript對對象鍵的處理方式,結(jié)果完全不同。uR128資訊網(wǎng)——每日最新資訊28at.com

JavaScript 使用默認(rèn)的toString()方法將對象鍵轉(zhuǎn)換為字符串。為什么呢?在JavaScript中,對象鍵總是字符串(或 symbols),或者通過隱式強(qiáng)制轉(zhuǎn)換自動轉(zhuǎn)換為字符串。當(dāng)你在對象中使用除字符串之外的任何值(例如,數(shù)字、對象或符號)作為鍵時,JavaScript將在使用它作為鍵之前內(nèi)部將該值轉(zhuǎn)換為其字符串表示形式。uR128資訊網(wǎng)——每日最新資訊28at.com

因此,當(dāng)我們在對象a中使用對象b和c作為鍵時,兩者都轉(zhuǎn)換為相同的字符串表示形式:[object Object]。由于這種行為,第二個賦值a[c] = '456';會覆蓋第一個賦值a[b] = '123';。uR128資訊網(wǎng)——每日最新資訊28at.com

最終,當(dāng)我們記錄對象a時,我們觀察到以下輸出:uR128資訊網(wǎng)——每日最新資訊28at.com

{ '[object Object]': '456' }

7、雙等號運(yùn)算符

console.log([] == ![]);

這個有點(diǎn)復(fù)雜。那么,你認(rèn)為輸出會是什么呢?uR128資訊網(wǎng)——每日最新資訊28at.com

這個問題相當(dāng)復(fù)雜。那么,你認(rèn)為輸出結(jié)果會是什么呢?讓我們一步一步地來評估。首先,讓我們看一下兩個操作數(shù)的類型:uR128資訊網(wǎng)——每日最新資訊28at.com

typeof([]) // "object"typeof(![]) // "boolean"

對于 [],它是一個對象,這是可以理解的,因?yàn)樵贘avaScript中,包括數(shù)組和函數(shù)在內(nèi)的一切都是對象。但操作數(shù) ![] 是如何具有布爾類型的呢?讓我們嘗試?yán)斫庖幌隆.?dāng)你使用 ! 與一個原始值(primitive value)一起時,會發(fā)生以下轉(zhuǎn)換:uR128資訊網(wǎng)——每日最新資訊28at.com

  • Falsy Values(假值):如果原始值是一個假值(例如 false、0、null、undefined、NaN 或一個空字符串 ''),應(yīng)用 ! 將把它轉(zhuǎn)換為 true。
  • Truthy Values(真值):如果原始值是一個真值(即任何不是假值的值),應(yīng)用 ! 將把它轉(zhuǎn)換為 false。

在我們的案例中,[] 是一個空數(shù)組,這在JavaScript中是一個真值。因?yàn)?nbsp;[] 是真值,![] 變成了 false。因此,我們的表達(dá)式變?yōu)椋?span style="display:none">uR128資訊網(wǎng)——每日最新資訊28at.com

[] == ![][] == false

現(xiàn)在,讓我們繼續(xù)了解 == 運(yùn)算符。當(dāng)使用 == 運(yùn)算符比較兩個值時,JavaScript會執(zhí)行“抽象相等性比較算法(Abstract Equality Comparison Algorithm)”。這個算法會考慮比較值的類型并進(jìn)行必要的轉(zhuǎn)換。uR128資訊網(wǎng)——每日最新資訊28at.com

uR128資訊網(wǎng)——每日最新資訊28at.com


uR128資訊網(wǎng)——每日最新資訊28at.com

在我們的情況中,讓我們把 x 記作 [],y 記作 ![]。我們檢查了 x 和 y 的類型,并發(fā)現(xiàn) x 是對象,y 是布爾值。由于 y 是布爾值,x 是對象,算法的第7個條件被應(yīng)用:uR128資訊網(wǎng)——每日最新資訊28at.com

如果 Type(y) 是 Boolean,則返回 x == ToNumber(y) 的比較結(jié)果。

這意味著如果其中一個類型是布爾值,我們需要在比較之前將其轉(zhuǎn)換為數(shù)字。ToNumber(y) 的值是多少呢?如我們所見,[] 是一個真值,取反使其變?yōu)?nbsp;false。因此,Number(false) 是 0。uR128資訊網(wǎng)——每日最新資訊28at.com

[] == false[] == Number(false)[] == 0

現(xiàn)在我們有了 [] == 0 的比較,這次算法的第8個條件起作用:uR128資訊網(wǎng)——每日最新資訊28at.com

如果 Type(x) 是 String 或 Number,而 Type(y) 是 Object,則返回 x == ToPrimitive(y) 的比較結(jié)果。uR128資訊網(wǎng)——每日最新資訊28at.com

基于這個條件,如果其中一個操作數(shù)是對象,我們必須將其轉(zhuǎn)換為一個原始值。這就是“ToPrimitive算法”出現(xiàn)的地方。我們需要將 x(即 [])轉(zhuǎn)換為一個原始值。數(shù)組在JavaScript中是對象。當(dāng)將對象轉(zhuǎn)換為原始值時,valueOf 和 toString 方法會起作用。在這種情況下,valueOf 返回?cái)?shù)組本身,這不是一個有效的原始值。因此,我們轉(zhuǎn)向 toString 以獲取輸出。將 toString 方法應(yīng)用于空數(shù)組會得到一個空字符串,這是一個有效的原始值:uR128資訊網(wǎng)——每日最新資訊28at.com

[] == 0[].toString() == 0"" == 0

將空數(shù)組轉(zhuǎn)換為字符串給了我們一個空字符串 "",現(xiàn)在我們面對的比較是:"" == 0。uR128資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在其中一個操作數(shù)的類型是字符串,另一個是數(shù)字,算法的第5個條件成立:uR128資訊網(wǎng)——每日最新資訊28at.com

如果 Type(x) 是 String,而 Type(y) 是 Number,則返回 ToNumber(x) == y 的比較結(jié)果。uR128資訊網(wǎng)——每日最新資訊28at.com

因此,我們需要將空字符串 "" 轉(zhuǎn)換為數(shù)字,這給了我們一個 0。uR128資訊網(wǎng)——每日最新資訊28at.com

"" == 0ToNumber("") == 00 == 0

最后,兩個操作數(shù)具有相同的類型和條件1成立。由于兩者具有相同的值,最終的輸出是:uR128資訊網(wǎng)——每日最新資訊28at.com

0 == 0 // true

至此,我們已經(jīng)利用了強(qiáng)制轉(zhuǎn)換(coercion)來解決了我們探討的最后幾個問題,這是掌握J(rèn)avaScript和解決面試中這類常見問題的重要概念。我強(qiáng)烈建議你查看我的關(guān)于強(qiáng)制轉(zhuǎn)換的詳細(xì)博客文章。它以清晰和徹底的方式解釋了這個概念。這里是鏈接。uR128資訊網(wǎng)——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-10636-0.html被難倒了! 針對高級前端的八個級JavaScript面試問題

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: Ceph 使用 NVME 是否可以實(shí)現(xiàn) 10k 混合 IOPS ?

下一篇: Java 21 發(fā)布:新增虛擬線程、AI 接口,最新 LTS 版本支持八年

標(biāo)簽:
  • 熱門焦點(diǎn)
Top 主站蜘蛛池模板: 神木县| 阿拉善盟| 大荔县| 彩票| 沽源县| 凤凰县| 荆门市| 江源县| 蕲春县| 泽州县| 若羌县| 禄劝| 阿城市| 大连市| 海兴县| 四川省| 古交市| 桦南县| 临颍县| 青海省| 辽阳市| 和龙市| 无为县| 建阳市| 灵璧县| 栾城县| 永春县| 海门市| 淮滨县| 汝城县| 嘉祥县| 乌拉特中旗| 陵川县| 山阳县| 利川市| 舟曲县| 上饶县| 博乐市| 安溪县| 峡江县| 桂平市|