這篇文章主要介紹“分享常見(jiàn)的JavaScript測(cè)驗(yàn)及解答”,在日常操作中,相信很多人在分享常見(jiàn)的JavaScript測(cè)驗(yàn)及解答問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”分享常見(jiàn)的JavaScript測(cè)驗(yàn)及解答”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
成都創(chuàng)新互聯(lián)公司是一家集策劃、設(shè)計(jì)、技術(shù)開(kāi)發(fā)一體的專(zhuān)業(yè)的建站公司,技術(shù)團(tuán)隊(duì)十多年來(lái)致力于為客戶(hù)提供企業(yè)網(wǎng)站定制,成都做手機(jī)網(wǎng)站。經(jīng)過(guò)多年發(fā)展,公司技術(shù)團(tuán)隊(duì),先后服務(wù)了1000多家客戶(hù),包括各類(lèi)中小企業(yè)、上市公司、高校、政府。公司在過(guò)去十多年的資源積累,追求并一直堅(jiān)持,為客戶(hù)打造更有價(jià)值的互聯(lián)網(wǎng)平臺(tái)。
查看以下代碼,并回答輸出的內(nèi)容(以及原因)。
// situation 1 console.log(person); var person = 'John'; // situation 2 console.log(person); let person = 'Phill'; // situation 3 console.log(person); const person = 'Frank'; // situation 4 const person = 'Vanessa'; console.log(person); person = 'Mike'; console.log(person); // situation 5 var person = 'John'; let person = 'Mike'; console.log(person); // situation 6 var person = 'John'; if (person) { let person = 'Mike'; console.log(person); } console.log(person);
說(shuō)明
Situation 1: 預(yù)期結(jié)果是在控制臺(tái)中看到文本 John,但是令人驚訝的是,我們看到記錄了undefined。想知道為什么嗎?
好吧,這是經(jīng)典的 JavaScript 在起作用。這種行為被稱(chēng)為提升。在后臺(tái),該語(yǔ)言將變量聲明和值分配分為兩部分。不管變量最初由開(kāi)發(fā)人員在哪里聲明,變量都將移動(dòng)到頂部,聲明時(shí)將其值設(shè)置為 undefined。看起來(lái)像這樣:
var person; console.log(person); person = 'John';
Situation 2: 在這里,結(jié)果將是引用錯(cuò)誤。
Uncaught ReferenceError: Cannot access 'person' before initialization
錯(cuò)誤文本說(shuō)明了一切。因?yàn)槲覀兪褂昧岁P(guān)鍵字 let,所以我們的變量被提升,但沒(méi)有初始化,并且拋出該錯(cuò)誤,通知我們正在嘗試訪問(wèn)未初始化的變量。在 ES6 中引入了關(guān)鍵字 let,使我們能夠使用塊作用域中的變量,從而幫助我們防止意外行為。
在這里,我們會(huì)得到與 Situation 2 中相同的錯(cuò)誤。
不同之處在于我們使用了關(guān)鍵字 const,從而防止在初始化后重新分配變量。 ES6 中也引入了此關(guān)鍵字。
Situation 4: 在這種情況下,我們可以看到關(guān)鍵字 const 是如何工作的,以及它如何避免無(wú)意中重新分配變量。在我們的示例中,首先會(huì)在控制臺(tái)中看到 Vanessa,然后是一個(gè)類(lèi)型錯(cuò)誤。
Uncaught TypeError: Assignment to constant variable
const 變量的使用隨著我們的代碼庫(kù)呈指數(shù)增長(zhǎng)。
Situation 5: 如果已經(jīng)在某個(gè)作用域內(nèi)使用關(guān)鍵字 var 定義了變量,則在同一作用域中用關(guān)鍵字 let 再次聲明該變量將會(huì)引發(fā)錯(cuò)誤。
因此,在我們的示例中,將不會(huì)輸出任何內(nèi)容,并且會(huì)看到語(yǔ)法錯(cuò)誤提示。
Uncaught SyntaxError: Identifier 'person' has already been declared
Situation 6: 我們分別有一個(gè)函數(shù)作用域的變量,和塊作用域的變量。在這種情況下,它們是否有相同的名字或標(biāo)識(shí)符并不重要。
在控制臺(tái)中,我們應(yīng)該看到 Mike 和 John 被依次輸出。為什么?
因?yàn)殛P(guān)鍵字 let 為我們提供了塊作用域內(nèi)的變量,這意味著它們僅存在于自己創(chuàng)建的作用域內(nèi),在這種情況下,位于if...else 語(yǔ)句中。內(nèi)部變量?jī)?yōu)先于外部變量,這就是為什么我們可以使用相同標(biāo)識(shí)符的原因。
考慮以下類(lèi),并嘗試回答輸出了什么以及為什么。
class Person { constructor() { this.sayHello = () => { return 'Hello'; } } sayBye() { return 'Bye'; } } class Student extends Person { sayHello() { return 'Hello from Student'; } } const student = new Student(); console.log(student.sayHello());
說(shuō)明
如果你的答案是 Hello,那是對(duì)的!
為什么:每次我們創(chuàng)建一個(gè)新的 Student 實(shí)例時(shí),都會(huì)將 sayHello 屬性設(shè)置為是一個(gè)函數(shù),并返回字符串 Hello。這是在父類(lèi)(Person)類(lèi)的構(gòu)造函數(shù)中發(fā)生的。
在 JavaScript 中,類(lèi)是語(yǔ)法糖,在我們的例子中,在原型鏈上定義了 Student 類(lèi)中的 sayHello 方法??紤]到每次我們創(chuàng)建 Student 類(lèi)的實(shí)例時(shí),都會(huì)將 sayHello 屬性設(shè)置為該實(shí)例,使其成為返回字符串 Hello 的 function,因此我們永遠(yuǎn)不會(huì)使用原型鏈上定義的函數(shù),也就永遠(yuǎn)不會(huì)看到消息 Hello from Student 。
思考以下情況中每個(gè)部分的輸出:
// situation 1 const user = { name: 'John', surname: 'Doe' } user = { name: 'Mike' } console.log(user); // situation 2 const user = { name: 'John', surname: 'Doe' } user.name = 'Mike'; console.log(user.name); // situation 3 const user = { name: 'John', surname: 'Doe' } const anotherUser = user; anotherUser.name = 'Mike'; console.log(user.name); // situation 4 const user = { name: 'John', surname: 'Doe', address: { street: 'My Street' } } Object.freeze(user); user.name = 'Mike'; user.address.street = 'My Different Street'; console.log(user.name); console.log(user.address.street);
說(shuō)明
Situation 1: 正如我們?cè)谏弦还?jié)中所了解的,我們?cè)噲D重新分配不允許使用的 const 變量,所以將會(huì)得到類(lèi)型錯(cuò)誤。
控制臺(tái)中的結(jié)果將顯示以下文本:
Uncaught TypeError: Assignment to constant variable
Situation 2: 在這種情況下,即使我們改用關(guān)鍵字 const 聲明的變量,也會(huì)有不同的行為。不同之處在于我們正在修改對(duì)象屬性而不是其引用,這在 const 對(duì)象變量中是允許的。
控制臺(tái)中的結(jié)果應(yīng)為單詞 Mike。
Situation 3: 通過(guò)將 user 分配給 anotherUser 變量,可以在它們之間共享引用或存儲(chǔ)位置(如果你愿意)。換句話(huà)說(shuō),它們兩個(gè)都會(huì)指向內(nèi)存中的同一個(gè)對(duì)象,因所以更改一個(gè)對(duì)象的屬性將反映另一個(gè)對(duì)象的更改。
控制臺(tái)中的結(jié)果應(yīng)為 Mike。
Situation 4: 在這里,我們使用 Object.freeze 方法來(lái)提供先前場(chǎng)景(Situation 3)所缺乏的功能。通過(guò)這個(gè)方法,我們可以“凍結(jié)”對(duì)象,從而不允許修改它的屬性值。但是有一個(gè)問(wèn)題!它只會(huì)進(jìn)行淺凍結(jié),這意味著它不會(huì)保護(hù)深層屬性的更新。這就是為什么我們能夠?qū)? street 屬性進(jìn)行更改,而 name 屬性保持不變的原因。
控制臺(tái)中的輸出依次為 John 和 My Different Street 。
運(yùn)行以下代碼段后,將會(huì)輸出什么以及原因:
const student = { school: 'My School', fullName: 'John Doe', printName: () => { console.log(this.fullName); }, printSchool: function () { console.log(this.school); } }; student.printName(); student.printSchool();
說(shuō)明
控制臺(tái)中的輸出將依次為 undefined 和 My School。
你可能會(huì)熟悉以下語(yǔ)法:
var me = this; // or var self = this; // ... // ... // somewhere deep... // me.doSomething();
你可以把 me 或 self 變量視為父作用域,該作用域可用于在其中創(chuàng)建的每個(gè)嵌套函數(shù)。
當(dāng)使用箭頭函數(shù)時(shí),這會(huì)自動(dòng)完成,我們不再需要存儲(chǔ) this 引用來(lái)訪問(wèn)代碼中更深的地方。箭頭函數(shù)不綁定自己,而是從父作用域繼承一個(gè)箭頭函數(shù),這就是為什么在調(diào)用 printName 函數(shù)后輸出了 undefined 的原因。
請(qǐng)查看下面的銷(xiāo)毀信息,并回答將要輸出的內(nèi)容。給定的語(yǔ)法是否允許,否則會(huì)引發(fā)錯(cuò)誤?
const rawUser = { name: 'John', surname: 'Doe', email: 'john@doe.com', displayName: 'SuperCoolJohn', joined: '2016-05-05', image: 'path-to-the-image', followers: 45 } let user = {}, userDetails = {}; ({ name: user.name, surname: user.surname, ...userDetails } = rawUser); console.log(user); console.log(userDetails);
說(shuō)明
盡管有點(diǎn)開(kāi)箱即用,但是上面的語(yǔ)法是允許的,并且不會(huì)引發(fā)錯(cuò)誤! 很整潔吧?
上面的語(yǔ)法功能強(qiáng)大,使我們能夠輕松地將任何對(duì)象分成兩個(gè)更具體的對(duì)象,上面的示例在控制臺(tái)的輸出為:
// {name: "John", surname: "Doe"} // {email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45}
調(diào)用以下函數(shù)后將輸出什么?
(async () => { let result = 'Some Data'; let promise = new Promise((resolve, reject) => { setTimeout(() => resolve('Some data retrieved from the server'), 2000); }); result = await promise; console.log(result); })();
說(shuō)明
如果你認(rèn)為是兩秒鐘后輸出 Some data retrieved from the server ,那么你是對(duì)的!
代碼將會(huì)暫停,直到 promise 得到解決。兩秒鐘后,它將繼續(xù)執(zhí)行并輸出給定的文本。這意味著 JavaScript 引擎實(shí)際上會(huì)等到異步操作完成。可以說(shuō) async/await 是用來(lái)獲得 promise 結(jié)果的語(yǔ)法糖。也有人認(rèn)為它是比 promise.then 更具可讀性的方式。
const multiplyByTwo = (x) => { return { result: x * 2 }; } console.log(multiplyByTwo(2));
說(shuō)明
如果你的答案是 {result: 4},那你就錯(cuò)了。輸出是 undefined。但是不要對(duì)自己太苛刻,考慮到我也寫(xiě) C# 代碼,這也曾經(jīng)困擾著我,這在 C# 那兒不是個(gè)問(wèn)題。
由于自動(dòng)分號(hào)插入的原因,上面的代碼將返回 undefined。 return 關(guān)鍵字和表達(dá)式之間不允許使用行結(jié)束符
解決方案是用以下列方式之一去修復(fù)這個(gè)函數(shù):
const multiplyByTwo = (x) => { return { result: x * 2 }; }
要么
const multiplyByTwo = (x) => { return ( { result: x * 2 } ); }
到此,關(guān)于“分享常見(jiàn)的JavaScript測(cè)驗(yàn)及解答”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
本文名稱(chēng):分享常見(jiàn)的JavaScript測(cè)驗(yàn)及解答
網(wǎng)頁(yè)網(wǎng)址:http://muchs.cn/article2/pdgjoc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號(hào)、手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站、自適應(yīng)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)