vivo TWS Air開箱體驗(yàn)：真輕 臻好聽
在vivo S15系列新機(jī)的發(fā)布會上，vivo的最新款真無線藍(lán)牙耳機(jī)vivo TWS Air也一同發(fā)布，本次就這款耳機(jī)新品給大家?guī)硪粋€(gè)簡單的分享。外包裝盒上，vivo TWS Air保持了vivo自家產(chǎn)
JavaScript 是一種功能強(qiáng)大的語言，也是構(gòu)建現(xiàn)代 Web 的基礎(chǔ)之一。這種強(qiáng)大的語言也有一些自己的怪癖。例如，你知道 0 === -0 會計(jì)算為 true，或者 Number("") 會返回 0 嗎？
有時(shí)候，這些怪癖會讓你百思不得其解，甚至讓你懷疑 Brendan Eich 在發(fā)明 JavaScript 的那一天是不是狀態(tài)不佳。但這里的重點(diǎn)并不是說 JavaScript 是一種糟糕的編程語言，或者如其批評者所說的那樣，是一種“邪惡”的語言。所有的編程語言都有某種程度的怪癖，JavaScript 也不例外。
在這篇博客文章中，我們將深入解釋一些重要的 JavaScript 面試問題。我的目標(biāo)是徹底解釋這些面試問題，以便我們能夠理解背后的基本概念，并希望在面試中解決其他類似的問題。
console.log(1 + '1' - 1);你能猜到在上面這種情況下，JavaScript 的 + 和 - 運(yùn)算符會有什么行為嗎？
當(dāng) JavaScript 遇到 1 + '1' 時(shí)，它會使用 + 運(yùn)算符來處理這個(gè)表達(dá)式。+ 運(yùn)算符有一個(gè)有趣的特性，那就是當(dāng)其中一個(gè)操作數(shù)是字符串時(shí)，它更傾向于執(zhí)行字符串的連接。在我們的例子中，'1' 是一個(gè)字符串，因此 JavaScript 隱式地將數(shù)字 1 轉(zhuǎn)換為字符串。因此，1 + '1' 變成了 '1' + '1'，結(jié)果是字符串 '11'。
現(xiàn)在，我們的等式是 '11' - 1。- 運(yùn)算符的行為正好相反。它更傾向于執(zhí)行數(shù)字減法，而不考慮操作數(shù)的類型。當(dāng)操作數(shù)不是數(shù)字類型時(shí)，JavaScript 會執(zhí)行隱式轉(zhuǎn)換，將它們轉(zhuǎn)換為數(shù)字。在這種情況下，'11' 被轉(zhuǎn)換為數(shù)字值 11，表達(dá)式簡化為 11 - 1。
綜合考慮：
'11' - 1 = 11 - 1 = 10考慮以下的 JavaScript 代碼，并嘗試找出其中的問題：
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)建一個(gè)新數(shù)組，該數(shù)組包含輸入數(shù)組的重復(fù)元素。初步檢查后，代碼似乎通過復(fù)制原始數(shù)組 arr 中的每個(gè)元素來創(chuàng)建一個(gè)新數(shù)組 newArr。然而，在 duplicate 函數(shù)內(nèi)部出現(xiàn)了一個(gè)嚴(yán)重的問題。
duplicate 函數(shù)使用循環(huán)來遍歷給定數(shù)組中的每個(gè)項(xiàng)目。但在循環(huán)內(nèi)部，它使用 push() 方法在數(shù)組末尾添加新元素。這導(dǎo)致數(shù)組每次都會變長，從而產(chǎn)生一個(gè)問題：循環(huán)永遠(yuǎn)不會停止。因?yàn)閿?shù)組長度不斷增加，循環(huán)條件（i < array.length）始終為真。這使得循環(huán)無限進(jìn)行下去，導(dǎo)致程序陷入僵局。
為了解決由于數(shù)組長度增長而導(dǎo)致的無限循環(huán)問題，可以在進(jìn)入循環(huán)之前將數(shù)組的初始長度存儲在一個(gè)變量中。然后，可以使用這個(gè)初始長度作為循環(huán)迭代的限制。這樣，循環(huán)只會針對數(shù)組中的原始元素進(jìn)行，并不會受到由于添加重復(fù)項(xiàng)而導(dǎo)致數(shù)組增長的影響。以下是修改后的代碼：
function duplicate(array) { var initialLength = array.length; // 存儲初始長度 for (var i = 0; i < initialLength; i++) { array.push(array[i]); // 推入每個(gè)元素的副本 } return array;}const arr = [1, 2, 3];const newArr = duplicate(arr);console.log(newArr);輸出將顯示數(shù)組末尾的重復(fù)元素，并且循環(huán)不會導(dǎo)致無限循環(huán)：
[1, 2, 3, 1, 2, 3]prototype 屬性是與 JavaScript 中的構(gòu)造函數(shù)相關(guān)聯(lián)的屬性。構(gòu)造函數(shù)用于在 JavaScript 中創(chuàng)建對象。當(dāng)您定義一個(gè)構(gòu)造函數(shù)時(shí)，還可以將屬性和方法附加到其 prototype 屬性上。這些屬性和方法然后變得可以被該構(gòu)造函數(shù)創(chuàng)建的所有對象實(shí)例訪問。因此，prototype 屬性充當(dāng)共享方法和屬性的通用存儲庫。
考慮以下代碼片段：
// 構(gòu)造函數(shù)function Person(name) { this.name = name;}// 添加一個(gè)方法到 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"，存在于每一個(gè) JavaScript 對象中。在 JavaScript 中，除了原始類型外，一切都可以被視為對象。每個(gè)這樣的對象都有一個(gè)原型，該原型作為對另一個(gè)對象的引用。__proto__ 屬性簡單地是對這個(gè)原型對象的引用。
當(dāng)你試圖訪問對象上的一個(gè)屬性或方法時(shí)，JavaScript 會進(jìn)行查找過程來找到它。這個(gè)過程主要涉及兩個(gè)步驟：
對象的自有屬性：JavaScript 首先檢查對象自身是否直接擁有所需的屬性或方法。如果在對象內(nèi)找到了該屬性，則直接訪問和使用。原型鏈查找：如果在對象自身沒有找到該屬性，JavaScript 將查看對象的原型（由 __proto__ 屬性引用）并在那里搜索該屬性。這個(gè)過程會遞歸地沿著原型鏈進(jìn)行，直到找到該屬性或直到查找達(dá)到 Object.prototype。如果在 Object.prototype 中甚至沒有找到該屬性，JavaScript 將返回 undefined，表示該屬性不存在。
當(dāng)編寫 JavaScript 代碼時(shí)，理解作用域的概念非常重要。作用域指的是變量在代碼的不同部分的可訪問性或可見性。下面我們通過一個(gè)代碼片段來更仔細(xì)地了解這個(gè)概念：
function foo() { console.log(a);}function bar() { var a = 3; foo();}var a = 5;bar();代碼定義了兩個(gè)函數(shù) foo() 和 bar()，以及一個(gè)值為5的變量 a。所有這些聲明都發(fā)生在全局作用域中。在bar()函數(shù)內(nèi)部，聲明了一個(gè)變量a并賦值為 3。那么當(dāng)bar()函數(shù)被調(diào)用時(shí)，你認(rèn)為會輸出哪個(gè)值的a？
當(dāng)JavaScript引擎執(zhí)行這段代碼時(shí)，全局變量a被聲明并賦值為5。然后調(diào)用了bar()函數(shù)。在bar()函數(shù)內(nèi)部，聲明了一個(gè)局部變量a并賦值為3。這個(gè)局部變量a與全局變量a是不同的。之后，從bar()函數(shù)內(nèi)部調(diào)用了foo()函數(shù)。
在foo()函數(shù)內(nèi)部，console.log(a)語句試圖輸出變量a的值。由于在foo()函數(shù)的作用域內(nèi)沒有定義局部變量a，JavaScript會查找作用域鏈以找到最近的名為a的變量。
現(xiàn)在，我們來解答JavaScript將在哪里搜索變量a的問題。它會查找bar函數(shù)的作用域嗎，還是會探索全局作用域？事實(shí)證明，JavaScript會在全局作用域中搜索，這種行為是由一個(gè)叫做詞法作用域的概念驅(qū)動的。
詞法作用域是指函數(shù)或變量在代碼中被編寫時(shí)的作用域。當(dāng)我們定義了foo函數(shù)，它被賦予了訪問自己的局部作用域和全局作用域的權(quán)限。這一特性在我們無論在哪里調(diào)用foo函數(shù)時(shí)都是一致的，無論是在bar函數(shù)內(nèi)部還是在其他模塊中運(yùn)行。詞法作用域并不是由我們在哪里調(diào)用函數(shù)來決定的。
最終結(jié)果是，輸出始終是全局作用域中找到的a的值，在這個(gè)例子中是5。
然而，如果我們在bar函數(shù)內(nèi)部定義了foo函數(shù)，情況就會有所不同：
function bar() { var a = 3; function foo() { console.log(a); } foo();}var a = 5;bar();在這種情況下，foo 的詞法作用域?qū)ㄈ齻€(gè)不同的作用域：它自己的局部作用域，bar 函數(shù)的作用域，以及全局作用域。詞法作用域是由你在源代碼中放置代碼的位置在編譯時(shí)決定的。
當(dāng)這段代碼運(yùn)行時(shí)，foo 位于 bar 函數(shù)內(nèi)部。這種安排改變了作用域的動態(tài)。現(xiàn)在，當(dāng)foo試圖訪問變量a時(shí)，它首先會在自己的局部作用域內(nèi)進(jìn)行搜索。由于沒有找到a，它會擴(kuò)大搜索范圍到bar函數(shù)的作用域。果然，那里存在一個(gè)值為3的a。因此，控制臺語句將輸出3。
const obj = { valueOf: () => 42, toString: () => 27};console.log(obj + '');一個(gè)引人入勝的方面是探究JavaScript如何處理對象轉(zhuǎn)換為基本值，例如字符串、數(shù)字或布爾值。這是一個(gè)有趣的問題，測試你是否了解對象的強(qiáng)制類型轉(zhuǎn)換。
在像字符串連接或算術(shù)運(yùn)算這樣的場景中與對象一起工作時(shí)，這種轉(zhuǎn)換至關(guān)重要。為了實(shí)現(xiàn)這一點(diǎn)，JavaScript 依賴兩個(gè)特殊的方法：valueOf 和 toString。
valueOf 方法是JavaScript對象轉(zhuǎn)換機(jī)制的一個(gè)基礎(chǔ)部分。當(dāng)一個(gè)對象在需要基本值的上下文中被使用時(shí)，JavaScript 首先會在對象內(nèi)部查找valueOf方法。在valueOf方法不存在或不返回適當(dāng)?shù)幕局档那闆r下，JavaScript會退回到toString方法。這個(gè)方法負(fù)責(zé)提供對象的字符串表示形式。
回到我們最初的代碼片段：
const obj = { valueOf: () => 42, toString: () => 27};console.log(obj + '');當(dāng)我們運(yùn)行這段代碼時(shí)，對象obj被轉(zhuǎn)換為一個(gè)基本值。在這種情況下，valueOf 方法返回42，然后由于與空字符串的連接，它被隱式地轉(zhuǎn)換為字符串。因此，代碼的輸出將是 42。
然而，在valueOf方法不存在或不返回適當(dāng)?shù)幕局档那闆r下，JavaScript會退回到toString方法。讓我們修改之前的示例：
const obj = { toString: () => 27};console.log(obj + '');在這里，我們已經(jīng)移除了 valueOf 方法，只留下了返回?cái)?shù)字27的toString方法。在這種情況下，JavaScript 將依賴 toString 方法進(jìn)行對象轉(zhuǎn)換。
當(dāng)在JavaScript中使用對象時(shí)，理解鍵是如何在其他對象的上下文中被處理和分配的非常重要。考慮以下代碼片段，并花點(diǎn)時(shí)間猜測輸出：
let a = {};let b = { key: 'test' };let c = { key: 'test' };a[b] = '123';a[c] = '456';console.log(a);乍一看，這段代碼似乎應(yīng)該生成一個(gè)具有兩個(gè)不同鍵值對的對象a。然而，由于JavaScript對對象鍵的處理方式，結(jié)果完全不同。
JavaScript 使用默認(rèn)的toString()方法將對象鍵轉(zhuǎn)換為字符串。為什么呢？在JavaScript中，對象鍵總是字符串（或 symbols），或者通過隱式強(qiáng)制轉(zhuǎn)換自動轉(zhuǎn)換為字符串。當(dāng)你在對象中使用除字符串之外的任何值（例如，數(shù)字、對象或符號）作為鍵時(shí)，JavaScript將在使用它作為鍵之前內(nèi)部將該值轉(zhuǎn)換為其字符串表示形式。
因此，當(dāng)我們在對象a中使用對象b和c作為鍵時(shí)，兩者都轉(zhuǎn)換為相同的字符串表示形式：[object Object]。由于這種行為，第二個(gè)賦值a[c] = '456';會覆蓋第一個(gè)賦值a[b] = '123';。
最終，當(dāng)我們記錄對象a時(shí)，我們觀察到以下輸出：
{ '[object Object]': '456' }console.log([] == ![]);這個(gè)有點(diǎn)復(fù)雜。那么，你認(rèn)為輸出會是什么呢？
這個(gè)問題相當(dāng)復(fù)雜。那么，你認(rèn)為輸出結(jié)果會是什么呢？讓我們一步一步地來評估。首先，讓我們看一下兩個(gè)操作數(shù)的類型：
typeof([]) // "object"typeof(![]) // "boolean"對于 []，它是一個(gè)對象，這是可以理解的，因?yàn)樵贘avaScript中，包括數(shù)組和函數(shù)在內(nèi)的一切都是對象。但操作數(shù) ![] 是如何具有布爾類型的呢？讓我們嘗試?yán)斫庖幌隆．?dāng)你使用 ! 與一個(gè)原始值（primitive value）一起時(shí)，會發(fā)生以下轉(zhuǎn)換：
在我們的案例中，[] 是一個(gè)空數(shù)組，這在JavaScript中是一個(gè)真值。因?yàn)?nbsp;[] 是真值，![] 變成了 false。因此，我們的表達(dá)式變?yōu)椋?span style="display:none">PIM28資訊網(wǎng)——每日最新資訊28at.com
[] == ![][] == false現(xiàn)在，讓我們繼續(xù)了解 == 運(yùn)算符。當(dāng)使用 == 運(yùn)算符比較兩個(gè)值時(shí)，JavaScript會執(zhí)行“抽象相等性比較算法（Abstract Equality Comparison Algorithm）”。這個(gè)算法會考慮比較值的類型并進(jìn)行必要的轉(zhuǎn)換。
在我們的情況中，讓我們把 x 記作 []，y 記作 ![]。我們檢查了 x 和 y 的類型，并發(fā)現(xiàn) x 是對象，y 是布爾值。由于 y 是布爾值，x 是對象，算法的第7個(gè)條件被應(yīng)用：
如果 Type(y) 是 Boolean，則返回 x == ToNumber(y) 的比較結(jié)果。這意味著如果其中一個(gè)類型是布爾值，我們需要在比較之前將其轉(zhuǎn)換為數(shù)字。ToNumber(y) 的值是多少呢？如我們所見，[] 是一個(gè)真值，取反使其變?yōu)?nbsp;false。因此，Number(false) 是 0。
[] == false[] == Number(false)[] == 0現(xiàn)在我們有了 [] == 0 的比較，這次算法的第8個(gè)條件起作用：
如果 Type(x) 是 String 或 Number，而 Type(y) 是 Object，則返回 x == ToPrimitive(y) 的比較結(jié)果。
基于這個(gè)條件，如果其中一個(gè)操作數(shù)是對象，我們必須將其轉(zhuǎn)換為一個(gè)原始值。這就是“ToPrimitive算法”出現(xiàn)的地方。我們需要將 x（即 []）轉(zhuǎn)換為一個(gè)原始值。數(shù)組在JavaScript中是對象。當(dāng)將對象轉(zhuǎn)換為原始值時(shí)，valueOf 和 toString 方法會起作用。在這種情況下，valueOf 返回?cái)?shù)組本身，這不是一個(gè)有效的原始值。因此，我們轉(zhuǎn)向 toString 以獲取輸出。將 toString 方法應(yīng)用于空數(shù)組會得到一個(gè)空字符串，這是一個(gè)有效的原始值：
[] == 0[].toString() == 0"" == 0將空數(shù)組轉(zhuǎn)換為字符串給了我們一個(gè)空字符串 ""，現(xiàn)在我們面對的比較是："" == 0。
現(xiàn)在其中一個(gè)操作數(shù)的類型是字符串，另一個(gè)是數(shù)字，算法的第5個(gè)條件成立：
如果 Type(x) 是 String，而 Type(y) 是 Number，則返回 ToNumber(x) == y 的比較結(jié)果。
因此，我們需要將空字符串 "" 轉(zhuǎn)換為數(shù)字，這給了我們一個(gè) 0。
"" == 0ToNumber("") == 00 == 0最后，兩個(gè)操作數(shù)具有相同的類型和條件1成立。由于兩者具有相同的值，最終的輸出是：
0 == 0 // true至此，我們已經(jīng)利用了強(qiáng)制轉(zhuǎn)換（coercion）來解決了我們探討的最后幾個(gè)問題，這是掌握J(rèn)avaScript和解決面試中這類常見問題的重要概念。我強(qiáng)烈建議你查看我的關(guān)于強(qiáng)制轉(zhuǎn)換的詳細(xì)博客文章。它以清晰和徹底的方式解釋了這個(gè)概念。這里是鏈接。
本文鏈接：http://www.tebozhan.com/showinfo-26-10636-0.html被難倒了! 針對高級前端的八個(gè)級JavaScript面試問題
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號