分享常見的JavaScript測驗及解答

這篇文章主要介紹“分享常見的JavaScript測驗及解答”，在日常操作中，相信很多人在分享常見的JavaScript測驗及解答問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”分享常見的JavaScript測驗及解答”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1.聲明

查看以下代碼，并回答輸出的內容(以及原因)。

// 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);

說明

Situation 1: 預期結果是在控制臺中看到文本 John，但是令人驚訝的是，我們看到記錄了undefined。想知道為什么嗎?

好吧，這是經典的 JavaScript  在起作用。這種行為被稱為提升。在后臺，該語言將變量聲明和值分配分為兩部分。不管變量最初由開發人員在哪里聲明，變量都將移動到頂部，聲明時將其值設置為  undefined。看起來像這樣：

var person; console.log(person); person = 'John';

Situation 2: 在這里，結果將是引用錯誤。

Uncaught ReferenceError: Cannot access 'person' before initialization

錯誤文本說明了一切。因為我們使用了關鍵字 let，所以我們的變量被提升，但沒有初始化，并且拋出該錯誤，通知我們正在嘗試訪問未初始化的變量。在 ES6  中引入了關鍵字 let，使我們能夠使用塊作用域中的變量，從而幫助我們防止意外行為。

在這里，我們會得到與 Situation 2 中相同的錯誤。

不同之處在于我們使用了關鍵字 const，從而防止在初始化后重新分配變量。 ES6 中也引入了此關鍵字。

Situation 4: 在這種情況下，我們可以看到關鍵字 const  是如何工作的，以及它如何避免無意中重新分配變量。在我們的示例中，首先會在控制臺中看到 Vanessa，然后是一個類型錯誤。

Uncaught TypeError: Assignment to constant variable

const 變量的使用隨著我們的代碼庫呈指數增長。

Situation 5: 如果已經在某個作用域內使用關鍵字 var 定義了變量，則在同一作用域中用關鍵字 let 再次聲明該變量將會引發錯誤。

因此，在我們的示例中，將不會輸出任何內容，并且會看到語法錯誤提示。

Uncaught SyntaxError: Identifier 'person' has already been declared

Situation 6: 我們分別有一個函數作用域的變量，和塊作用域的變量。在這種情況下，它們是否有相同的名字或標識符并不重要。

在控制臺中，我們應該看到 Mike 和 John 被依次輸出。為什么?

因為關鍵字 let 為我們提供了塊作用域內的變量，這意味著它們僅存在于自己創建的作用域內，在這種情況下，位于if...else  語句中。內部變量優先于外部變量，這就是為什么我們可以使用相同標識符的原因。

2.繼承

考慮以下類，并嘗試回答輸出了什么以及為什么。

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());

說明

如果你的答案是 Hello，那是對的!

為什么：每次我們創建一個新的 Student 實例時，都會將 sayHello 屬性設置為是一個函數，并返回字符串  Hello。這是在父類(Person)類的構造函數中發生的。

在 JavaScript 中，類是語法糖，在我們的例子中，在原型鏈上定義了 Student 類中的 sayHello 方法。考慮到每次我們創建  Student 類的實例時，都會將 sayHello 屬性設置為該實例，使其成為返回字符串 Hello 的  function，因此我們永遠不會使用原型鏈上定義的函數，也就永遠不會看到消息 Hello from Student 。

3.對象可變性

思考以下情況中每個部分的輸出：

// 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);

說明

Situation 1: 正如我們在上一節中所了解的，我們試圖重新分配不允許使用的 const 變量，所以將會得到類型錯誤。

控制臺中的結果將顯示以下文本：

Uncaught TypeError: Assignment to constant variable

Situation 2: 在這種情況下，即使我們改用關鍵字 const 聲明的變量，也會有不同的行為。不同之處在于我們正在修改對象屬性而不是其引用，這在  const 對象變量中是允許的。

控制臺中的結果應為單詞 Mike。

Situation 3: 通過將 user 分配給 anotherUser  變量，可以在它們之間共享引用或存儲位置(如果你愿意)。換句話說，它們兩個都會指向內存中的同一個對象，因所以更改一個對象的屬性將反映另一個對象的更改。

控制臺中的結果應為 Mike。

Situation 4: 在這里，我們使用 Object.freeze 方法來提供先前場景(Situation  3)所缺乏的功能。通過這個方法，我們可以“凍結”對象，從而不允許修改它的屬性值。但是有一個問題!它只會進行淺凍結，這意味著它不會保護深層屬性的更新。這就是為什么我們能夠對  street 屬性進行更改，而 name 屬性保持不變的原因。

控制臺中的輸出依次為 John 和 My Different Street 。

4.箭頭函數

運行以下代碼段后，將會輸出什么以及原因：

const student = {   school: 'My School',   fullName: 'John Doe',   printName: () => {     console.log(this.fullName);   },   printSchool: function () {     console.log(this.school);   } };  student.printName(); student.printSchool();

說明

控制臺中的輸出將依次為 undefined 和 My School。

你可能會熟悉以下語法：

var me = this; // or var self = this;  // ... // ... // somewhere deep... // me.doSomething();

你可以把 me 或 self 變量視為父作用域，該作用域可用于在其中創建的每個嵌套函數。

當使用箭頭函數時，這會自動完成，我們不再需要存儲 this  引用來訪問代碼中更深的地方。箭頭函數不綁定自己，而是從父作用域繼承一個箭頭函數，這就是為什么在調用 printName 函數后輸出了 undefined  的原因。

5.解構

請查看下面的銷毀信息，并回答將要輸出的內容。給定的語法是否允許，否則會引發錯誤?

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);

說明

盡管有點開箱即用，但是上面的語法是允許的，并且不會引發錯誤! 很整潔吧?

上面的語法功能強大，使我們能夠輕松地將任何對象分成兩個更具體的對象，上面的示例在控制臺的輸出為：

// {name: "John", surname: "Doe"} // {email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45}

6.異步/等待

調用以下函數后將輸出什么?

(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); })();

說明

如果你認為是兩秒鐘后輸出 Some data retrieved from the server ，那么你是對的!

代碼將會暫停，直到 promise 得到解決。兩秒鐘后，它將繼續執行并輸出給定的文本。這意味著 JavaScript 引擎實際上會等到異步操作完成。可以說  async/await 是用來獲得 promise 結果的語法糖。也有人認為它是比 promise.then 更具可讀性的方式。

7. Return 語句

const multiplyByTwo = (x) => {     return     {         result: x * 2     }; } console.log(multiplyByTwo(2));

說明

如果你的答案是 {result: 4}，那你就錯了。輸出是 undefined。但是不要對自己太苛刻，考慮到我也寫 C# 代碼，這也曾經困擾著我，這在  C# 那兒不是個問題。

由于自動分號插入的原因，上面的代碼將返回 undefined。 return 關鍵字和表達式之間不允許使用行結束符

解決方案是用以下列方式之一去修復這個函數：

const multiplyByTwo = (x) => {     return {         result: x * 2     }; }

要么

const multiplyByTwo = (x) => {   return (     {       result: x * 2     }   ); }

到此，關于“分享常見的JavaScript測驗及解答”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！