<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          7個常見的 JavaScript 測驗及解答

          時間:?2019-11-01閱讀:?208標簽:?js知識

          介紹

          我相信學習新事物并評估我們所知的東西對自己的進步非常有用,可以避免了我們覺得自己的知識過時的情況。在本文中,我將介紹一些常見的 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
              }
            );
          }
          原文:https://devinduct.com/blogpost/49/7-quick-javascript-pop-quizzes-with-explanations,作者:Milos Protic

          翻譯:瘋狂的技術宅


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/6239

          javascript中什么是句柄?

          一個句柄是指使用的一個唯一的整數值,即一個4字節(64位程序中為8字節)長的數值,來標識應用程序中的不同對象和同類中的不同的實例。

          javascript不可變性是什么?

          不可變性即某個變量在進行了某個操作之后,其本身沒有發生變化,比如對于字符串而言,對字符串的任何操作都會改變字符串本身的值,而是在字符串的基礎上復制出來一個然后再改變,這樣我們就說是不可變的

          為什么javascript不起作用?

          JavaScript是一種屬于網絡的腳本語言,已經被廣泛用于Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

          javascript怎么判斷按鈕被點擊?

          JavaScript可以通過Event對象的target事件或srcElement(IE瀏覽器支持)來判斷按鈕是否被點擊。Event對象代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

          javascript由幾部分組成?

          JavaScript有三部分組成。分別為核心(ECMAScript) 、文檔對象模型(DOM)、瀏覽器對象模型(BOM)。這三部分分別描述了該語言的語法和基本對象、處理網頁內容的方法和接口、與瀏覽器進行交互的方法和接口。

          Js輸出方式有哪些?

          在編寫JavaScript代碼的時候, 一定要記住每一句代碼后面都需要添加一個分號, 并且這個分號必須是英文的分號,我們會發現有時候不寫分號程序也能夠運行, 這里并不是因為不需要分號, 而是瀏覽器自動幫助我們添加了分號

          Js中constructor指向問題

          首先用一個例子指出來constructor存在形式。由上面的代碼我們總結出結論1:上面的代碼在控制臺可以看出constructor是指向構造器Fruit的引用。這個地方就有點奇怪了。這個constructor到底指向的是那個實例的構造器?

          javascript難點是什么?

          javascript難點是什么?下面本篇文章就來給大家介紹一下10個JavaScript難點,感興趣的小伙伴們可以參考一下,希望對大家有所幫助。立即執行函數,即Immediately Invoked Function Expression (IIFE),正如它的名字

          Js如何獲取ul中li的個數?

          javascript如何獲取ul中li的個數?下面本篇文章就來給大家介紹一下使用javascript獲取ul中li個數的方法,希望對大家有所幫助。

          javascript怎么輸出?

          JavaScript怎么輸出?輸出方式有哪些?下面本篇文章就給大家介紹JavaScript的幾種輸出方式。window.alert()方法用于顯示帶有一條指定消息和一個【確認】 按鈕的警告框。

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网