整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          今天的這些Javascript面試題,你真的確定都能回答上來嗎?

          在前端面試時,Javascript的面試是必不可少的,之前看到一道關于Javascript預解析相關的面試題目,覺得很有意義,就在這里講解一下,大家認真看下,沒準在你面試的時候就遇到了呢。

          Javascript

          主要知識點

          在講解下面的題目之前,我們先說下文章中涉及的主要知識點,掌握了下面的知識點后,看了文章中的題目就清楚了。

          • 變量提升,在JavaScript中定義的變量聲明會提前到函數頂部。

          • 函數聲明優先級大于變量聲明。

          • 函數表達式不會產生變量提升。

          題目1

          記住上面的知識點后,我們先來看題目1。

          題目1

          我們一步步分析會得出什么樣的結果。

          • 在第三行中定義了var a=3,同時又在下面聲明了一個函數a,兩者都會進行變量提升,由于函數聲明會優于變量聲明,因此a實際定義為一個函數function,所以第一行代碼會輸出function a(){alert(10)}。

          • 接下來在第二行,執行了a函數,輸出10。

          • 第三行代碼,又對a執行了賦值操作,這時a不再是一個函數,而是數字值3,因此在第7行代碼中會輸出3。

          • 在第八行代碼中又對a值進行了修改,為數字6,在第九行中進行調用,但是此時a已經不指向函數,此時再執行a方法,會報錯。

          所以上面題目的整體結果如下圖所示。

          題目1結果

          題目2

          接下來我們對題目1稍作改動,將其中的函數聲明變成函數表達式類型,得到題目2,代碼如下所示。

          題目2

          按照之前的理論,只有函數聲明才可以進行變量提升,而函數表達式不能進行變量提升。

          所以題目2中,只有var a = 3;才進行了變量提升,在執行第一行代碼時,實際a只進行了聲明,并未賦值,因此會輸出undefined。

          在執行第二行代碼時,由于a為undefined,再調用a()方法,會報錯。

          因此題目2的結果如下圖所示。

          題目2結果

          題目3

          題目3的代碼比較簡單,如下所示。

          題目3

          在執行aa方法后,在函數中會輸出a的值,由于變量提升只會發生在函數內部,因此a變量的聲明會提到aa方法的頂部,然后執行輸出,又由于作用域的限制,會優先輸出函數內部的變量a,而此時a還未賦值,因此輸出undefined。

          題目4

          題目4的代碼如下所示。

          題目4

          題目4中,會首先調用aa(5);傳入一個參數5,此時執行到函數內部,雖然也會產生變量提升,但是其優先級要低于傳遞的參數,因此a會優先賦值為5,所以會先輸出5。

          在外面的輸出語句中,因為作用域的問題,只能訪問到外部的全局變量a=0,因此會輸出0。

          所以題目4的結果是輸出5,0。

          題目5

          題目5的代碼如下所示。

          題目5

          題目5相比于題目4,只是去掉了aa方法中的var a=3;前面的var。

          在aa方法中雖然對a的值進行了修改,但實際是修改了函數傳遞的參數a,而不是外面全局變量a,因此對實際輸出并沒有影響。

          題目5的結果輸出5,0。

          題目6

          題目6代碼如下所示。

          題目6

          題目6中,在執行aa()方法時,傳入了一個參數a,但是參數的優先級會高于變量聲明的優先級,所以雖然產生了變量提升,但是會通過參數優先賦值,因此首先a=5,第一個輸出為5。

          然后執行代碼a=3,修改a的值,在第二個輸出時,就輸出3。

          題目6的結果是5,3。

          題目7

          題目7代碼如下所示。

          題目7

          題目7中,定義了一個函數aa,接收一個參數,但是在調用時并未傳入參數,因此在執行第一個輸出時,a未定義,因此輸出undefined。

          需要注意的是,在aa方法中并沒有變量提升操作,因為a只是形參而已。

          然后a=3,修改的也是形參a的值,在第二個輸出時,輸出的實際是形參a的值。

          最后一行語句輸出a時,輸出的是全局變量a的值,雖然在aa方法中有修改a的值,但是實際修改的是形參的值,不是全局變量a的值,因此全局變量a的值并沒有發生變化,最后輸出0。

          題目7的結果是undefined,3,0。

          結束語

          今天文章中的所有題目都講解完畢了,大家都掌握了嗎?如果上面的題目都會做的話,應該對JavaScript預解析,變量提升等概念掌握的差不多了。

          擊右上方紅色按鈕關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!

          有關CSS布局的重要性,這里就不在多說了,每次在面試的時候,我都會問幾個與CSS布局相關且實用的問題,因為這是我們前端最重要的基礎知識點之一。而在所有的問題中,問的最多的估計就是居中了。正如今天要說的一道面試題。如下

          多種方式實現未知或者已知寬度的垂直水平居中?

          這道題大家應該都遇到過,或多或少也知道幾種答案,不管怎么樣,今天就當溫習或者復習也好,來參考一下下面這四種解決是否也是你心中的答案。

          方式一:固寬高+margin

          方式二:未知寬高+transform

          方式三:flex

          方式四:table

          . 下面代碼的輸出是什么?

          function* generator(i) {
           yield i; 
           yield i * 2;
          }
          const gen = generator(10);
          console.log(gen.next().value);
          console.log(gen.next().value);
          
          • A: [0,10],[10,20]
          • B: 20,20
          • C: 10,20
          • D: 0,10and10,20

          答案: C

          一般的函數在執行之后是不能中途停下的。但是,生成器函數卻可以中途“停下”,之后可以再從停下的地方繼續。當生成器遇到 yield關鍵字的時候,會生成 yield后面的值。注意,生成器在這種情況下不 返回(return )值,而是 生成 (yield)值。

          首先,我們用 10作為參數 i來初始化生成器函數。然后使用 next()方法一步步執行生成器。第一次執行生成器的時候, i的值為 10,遇到第一個 yield關鍵字,它要生成 i的值。此時,生成器“暫?!保闪?10。

          然后,我們再執行 next()方法。生成器會從剛才暫停的地方繼續,這個時候 i還是 10。于是我們走到了第二個 yield關鍵字處,這時候需要生成的值是 i*2, i為 10,那么此時生成的值便是 20。所以這道題的最終結果是 10,20。

          2. 下面代碼的返回值是什么?

          const firstPromise = new Promise((res, rej) => {
           setTimeout(res, 500, "one");
          });
          const secondPromise = new Promise((res, rej) => {
           setTimeout(res, 100, "two");
          });
          Promise.race([firstPromise, secondPromise]).then(res => console.log(res));
          
          • A: "one"
          • B: "two"
          • C: "two""one"
          • D: "one""two"

          答案: B

          當我們向 Promise.race方法中傳入多個 Promise時,會進行 優先 解析。在這個例子中,我們用 setTimeout給 firstPromise和 secondPromise分別設定了500ms和100ms的定時器。這意味著 secondPromise會首先解析出字符串 two。那么此時 res參數即為 two,是為輸出結果。

          3. 下面代碼的輸出是什么?

          let person = { name: "Lydia" };
          const members = [person];
          person = null;
          console.log(members);
          
          • A: null
          • B: [null]
          • C: [{}]
          • D: [{name:"Lydia"}]

          答案: D

          首先我們聲明了一個擁有 name屬性的對象 person。

          然后我們又聲明了一個變量 members. 將首個元素賦值為變量 person。 當設置兩個對象彼此相等時,它們會通過 引用 進行交互。但是當你將引用從一個變量分配至另一個變量時,其實只是執行了一個 復制 操作。(注意一點,他們的引用 并不相同!)

          接下來我們讓 person等于 null。

          我們沒有修改數組第一個元素的值,而只是修改了變量 person的值,因為元素(復制而來)的引用與 person不同。members的第一個元素仍然保持著對原始對象的引用。當我們輸出 members數組時,第一個元素會將引用的對象打印出來。

          4. 下面代碼的輸出是什么?

          const person = {
           name: "Lydia",
           age: 21
          };
          for (const item in person) {
           console.log(item);
          }
          
          • A: {name:"Lydia"},{age:21}
          • B: "name","age"
          • C: "Lydia",21
          • D: ["name","Lydia"],["age",21]

          答案: B

          在 for-in循環中,我們可以通過對象的key來進行迭代,也就是這里的 name和 age。在底層,對象的key都是字符串(如果他們不是Symbol的話)。在每次循環中,我們將 item設定為當前遍歷到的key.所以一開始, item是 name,之后 item輸出的則是 age。

          5. 下面代碼的輸出是什么?

          console.log(3 + 4 + "5"); 
          
          • A: "345"
          • B: "75"
          • C: 12
          • D: "12"

          答案: B

          當所有運算符的 優先級 相同時,計算表達式需要確定運算符的結合順序,即從右到左還是從左往右。在這個例子中,我們只有一類運算符 +,對于加法來說,結合順序就是從左到右。

          3+4首先計算,得到數字 7.

          由于類型的強制轉換, 7+'5'的結果是 "75". JavaScript將 7轉換成了字符串,可以參考問題15.我們可以用 +號把兩個字符串連接起來。"7"+"5" 就得到了 "75".

          6. num的值是什么?

          const num = parseInt("7*6", 10);
          
          • A: 42
          • B: "42"
          • C: 7
          • D: NaN

          答案: C

          只返回了字符串中第一個字母. 設定了 進制 后 (也就是第二個參數,指定需要解析的數字是什么進制: 十進制、十六機制、八進制、二進制等等……), parseInt 檢查字符串中的字符是否合法. 一旦遇到一個在指定進制中不合法的字符后,立即停止解析并且忽略后面所有的字符。

          *就是不合法的數字字符。所以只解析到 "7",并將其解析為十進制的 7. num的值即為 7.

          7. 下面代碼的輸出是什么?

          [1, 2, 3].map(num => {
           if (typeof num === "number") return;
           return num * 2;
          });
          
          • A: []
          • B: [null,null,null]
          • C: [undefined,undefined,undefined]
          • D: [3x empty]

          答案: C

          對數組進行映射的時候, num就是當前循環到的元素. 在這個例子中,所有的映射都是number類型,所以if中的判斷 typeofnum==="number"結果都是 true.map函數創建了新數組并且將函數的返回值插入數組。

          但是,沒有任何值返回。當函數沒有返回任何值時,即默認返回 undefined.對數組中的每一個元素來說,函數塊都得到了這個返回值,所以結果中每一個元素都是 undefined.

          8. 下面代碼輸出的是什么?

          function getInfo(member, year) {
           member.name = "Lydia";
           year = "1998";
          }
          const person = { name: "Sarah" };
          const birthYear = "1997";
          getInfo(person, birthYear);
          console.log(person, birthYear);
          
          • A: {name:"Lydia"},"1997"
          • B: {name:"Sarah"},"1998"
          • C: {name:"Lydia"},"1998"
          • D: {name:"Sarah"},"1997"

          答案: A

          普通參數都是 值 傳遞的,而對象則不同,是 引用 傳遞。所以說, birthYear是值傳遞,因為他是個字符串而不是對象。當我們對參數進行值傳遞時,會創建一份該值的 復制 。(可以參考問題46)

          變量 birthYear有一個對 "1997"的引用,而傳入的參數也有一個對 "1997"的引用,但二者的引用并不相同。當我們通過給 year賦值 "1998"來更新 year的值的時候我們只是更新了 year(的引用)。此時 birthYear仍然是 "1997".

          而 person是個對象。參數 member引用與之 相同的 對象。當我們修改 member所引用對象的屬性時, person的相應屬性也被修改了,因為他們引用了相同的對象. person的 name屬性也變成了 "Lydia".

          9. 下面代碼的輸出是什么?

          function greeting() { 
           throw "Hello world!";
          }
          function sayHi() {
           try {
           const data = greeting();
           console.log("It worked!", data);
           } catch (e) {
           console.log("Oh no an error!", e);
           }
          }
          sayHi();
          
          • A: "It worked! Hello world!"
          • B: "Oh no an error: undefined
          • C: SyntaxError:can onlythrowErrorobjects
          • D: "Oh no an error: Hello world!

          答案: D

          通過 throw語句,我么可以創建自定義錯誤。而通過它,我們可以拋出異常。異常可以是一個字符串, 一個 數字, 一個 布爾類型 或者是一個 對象。在本例中,我們的異常是字符串 'Hello world'.

          通過 catch語句,我們可以設定當 try語句塊中拋出異常后應該做什么處理。在本例中拋出的異常是字符串 'Hello world'. e就是這個字符串,因此被輸出。最終結果就是 'Oh an error: Hello world'.

          10. 下面代碼的輸出是什么?

          function Car() {
           this.make = "Lamborghini";
           return { make: "Maserati" };
          }
          const myCar = new Car();
          console.log(myCar.make);
          
          • A: "Lamborghini"
          • B: "Maserati"
          • C: ReferenceError
          • D: TypeError

          答案: B

          返回屬性的時候,屬性的值等于 返回的 值,而不是構造函數中設定的值。我們返回了字符串"Maserati",所以 myCar.make等于 "Maserati".

          11. 下面代碼的輸出是什么?

          (() => {
           let x = (y = 10);
          })();
          console.log(typeof x);
          console.log(typeof y);
          
          • A: "undefined","number"
          • B: "number","number"
          • C: "object","number"
          • D: "number","undefined"

          答案: A

          letx=y=10; 是下面這個表達式的縮寫:

          y = 10;
          let x = y;
          

          我們設定 y等于 10時,我們實際上增加了一個屬性 y給全局對象(瀏覽器里的 window, Nodejs里的 global)。在瀏覽器中, window.y等于 10.

          然后我們聲明了變量 x等于 y,也是 10.但變量是使用 let聲明的,它只作用于 塊級作用域, 僅在聲明它的塊中有效;就是案例中的立即調用表達式(IIFE)。使用 typeof操作符時, 操作值 x沒有被定義:因為我們在 x聲明塊的外部,無法調用它。這就意味著 x未定義。未分配或是未聲明的變量類型為 "undefined". console.log(typeofx)返回 "undefined".

          而我們創建了全局變量 y,并且設定 y等于 10.這個值在我們的代碼各處都訪問的到。y已經被定義了,而且有一個 "number"類型的值。console.log(typeofy)返回 "number".

          12. 下面代碼的輸出是什么?

          class Dog {
           constructor(name) { 
           this.name = name;
           }
          }
          Dog.prototype.bark = function() {
           console.log(`Woof I am ${this.name}`);
          };
          const pet = new Dog("Mara");
          pet.bark();
          delete Dog.prototype.bark;
          pet.bark();
          
          • A: "Woof I am Mara", TypeError
          • B: "Woof I am Mara", "Woof I am Mara"
          • C: "Woof I am Mara", undefined
          • D: TypeError, TypeError

          答案: A

          我們可以用 delete關鍵字刪除對象的屬性,對原型也是適用的。刪除了原型的屬性后,該屬性在原型鏈上就不可用了。在本例中,函數 bark在執行了 deleteDog.prototype.bark后不可用, 然而后面的代碼還在調用它。

          當我們嘗試調用一個不存在的函數時 TypeError異常會被拋出。在本例中就是 TypeError:pet.barkisnotafunction,因為 pet.bark是 undefined.

          13. 下面代碼的輸出是什么?

          const set = new Set([1, 1, 2, 3, 4]);
          console.log(set); 
          
          • A: [1,1,2,3,4]
          • B: [1,2,3,4]
          • C: {1,1,2,3,4}
          • D: {1,2,3,4}

          答案: D

          Set對象手機 獨一無二 的值:也就是說同一個值在其中僅出現一次。

          我們傳入了數組 [1,1,2,3,4],他有一個重復值 1.以為一個集合里不能有兩個重復的值,其中一個就被移除了。所以結果是 {1,2,3,4}.

          14. 下面代碼的輸出是什么?

          // counter.js
          let counter = 10;
          export default counter;
          
          // index.js
          import myCounter from "./counter";
          myCounter += 1;
          console.log(myCounter);
          
          • A: 10
          • B: 11
          • C: Error
          • D: NaN

          答案: C

          引入的模塊是 只讀 的: 你不能修改引入的模塊。只有導出他們的模塊才能修改其值。

          當我們給 myCounter增加一個值的時候會拋出一個異常:myCounter是只讀的,不能被修改。

          15. 下面代碼的輸出是什么?

          const name = "Lydia"; 
          age = 21;
          console.log(delete name);
          console.log(delete age); 
          
          • A: false, true
          • B: "Lydia", 21
          • C: true, true
          • D: undefined, undefined

          答案: A

          delete操作符返回一個布爾值:true指刪除成功,否則返回 false. 但是通過 var, const或let 關鍵字聲明的變量無法用 delete 操作符來刪除。

          name變量由 const關鍵字聲明,所以刪除不成功:返回 false. 而我們設定 age等于 21時,我們實際上添加了一個名為 age的屬性給全局對象。對象中的屬性是可以刪除的,全局對象也是如此,所以 deleteage返回 true.

          16. 下面代碼的輸出是什么?

          const numbers = [1, 2, 3, 4, 5];
          const [y] = numbers;
          console.log(y);
          
          • A: [[1,2,3,4,5]]
          • B: [1,2,3,4,5]
          • C: 1
          • D: [1]

          答案: C

          我們可以通過解構賦值來解析來自對象的數組或屬性的值,比如說:

          [a, b] = [1, 2];
          

          a的值現在是 1, b的值現在是 2.而在題目中,我們是這么做的:

          [y] = [1, 2, 3, 4, 5];
          

          也就是說, y等于數組的第一個值就是數字 1.我們輸出 y, 返回 1.

          17. 下面代碼的輸出是什么?

          const user = { name: "Lydia", age: 21 };
          const admin = { admin: true, ...user };
          console.log(admin);
          
          • A: {admin:true,user:{name:"Lydia",age:21}}
          • B: {admin:true,name:"Lydia",age:21}
          • C: {admin:true,user:["Lydia",21]}
          • D: {admin:true}

          答案: B

          擴展運算符 ...為對象的組合提供了可能。你可以復制對象中的鍵值對,然后把它們加到另一個對象里去。在本例中,我們復制了 user對象鍵值對,然后把它們加入到 admin對象中。admin對象就擁有了這些鍵值對,所以結果為 {admin:true,name:"Lydia",age:21}.

          18. 下面代碼的輸出是什么?

          const person = { name: "Lydia" };
          Object.defineProperty(person, "age", { value: 21 });
          console.log(person);
          console.log(Object.keys(person));
          
          • A: {name:"Lydia",age:21}, ["name","age"]
          • B: {name:"Lydia",age:21}, ["name"]
          • C: {name:"Lydia"}, ["name","age"]
          • D: {name:"Lydia"}, ["age"]

          答案: B

          通過 defineProperty方法,我們可以給對象添加一個新屬性,或者修改已經存在的屬性。而我們使用 defineProperty方法給對象添加了一個屬性之后,屬性默認為 不可枚舉(not enumerable). Object.keys方法僅返回對象中 可枚舉(enumerable) 的屬性,因此只剩下了 "name".

          用 defineProperty方法添加的屬性默認不可變。你可以通過 writable, configurable 和 enumerable屬性來改變這一行為。這樣的話, 相比于自己添加的屬性, defineProperty方法添加的屬性有了更多的控制權。

          19. 下面代碼的輸出是什么?

          const settings = {
           username: "lydiahallie",
           level: 19,
           health: 90
          };
          const data = JSON.stringify(settings, ["level", "health"]);
          console.log(data);
          
          • A: "{"level":19, "health":90}"
          • B: "{"username": "lydiahallie"}"
          • C: "["level", "health"]"
          • D: "{"username": "lydiahallie", "level":19, "health":90}"

          答案: A

          JSON.stringify的第二個參數是 替代者(replacer). 替代者(replacer)可以是個函數或數組,用以控制哪些值如何被轉換為字符串。

          如果替代者(replacer)是個 數組 ,那么就只有包含在數組中的屬性將會被轉化為字符串。在本例中,只有名為 "level" 和 "health" 的屬性被包括進來, "username"則被排除在外。data 就等于 "{"level":19, "health":90}".

          而如果替代者(replacer)是個 函數,這個函數將被對象的每個屬性都調用一遍。函數返回的值會成為這個屬性的值,最終體現在轉化后的JSON字符串中(譯者注:Chrome下,經過實驗,如果所有屬性均返回同一個值的時候有異常,會直接將返回值作為結果輸出而不會輸出JSON字符串),而如果返回值為 undefined,則該屬性會被排除在外。

          20. 下面代碼的輸出是什么?

          let num = 10;
          const increaseNumber = () => num++;
          const increasePassedNumber = number => number++;
          const num1 = increaseNumber();
          const num2 = increasePassedNumber(num1);
          console.log(num1);
          console.log(num2);
          
          • A: 10, 10
          • B: 10, 11
          • C: 11, 11
          • D: 11, 12

          答案: A

          一元操作符 ++ 先返回 操作值, 再累加 操作值。num1的值是 10, 因為 increaseNumber函數首先返回 num的值,也就是 10,隨后再進行 num的累加。

          num2是 10因為我們將 num1傳入 increasePassedNumber. number等于 10( num1的值。同樣道理, ++ 先返回 操作值, 再累加 操作值。) number是 10,所以 num2也是 10.

          21. 下面代碼輸出什么?

          const value = { number: 10 };
          const multiply = (x = { ...value }) => {
           console.log(x.number *= 2);
          };
          multiply();
          multiply();
          multiply(value);
          multiply(value);
          
          • A: 20, 40, 80, 160
          • B: 20, 40, 20, 40
          • C: 20, 20, 20, 40
          • D: NaN, NaN, 20, 40

          答案: C

          在ES6中,我們可以使用默認值初始化參數。如果沒有給函數傳參,或者傳的參值為 "undefined" ,那么參數的值將是默認值。上述例子中,我們將 value 對象進行了解構并傳到一個新對象中,因此 x 的默認值為 {number:10} 。

          默認參數在調用時才會進行計算,每次調用函數時,都會創建一個新的對象。我們前兩次調用 multiply 函數且不傳遞值,那么每一次 x 的默認值都為 {number:10} ,因此打印出該數字的乘積值為 20。

          第三次調用 multiply 時,我們傳遞了一個參數,即對象 value。*=運算符實際上是 x.number=x.number*2的簡寫,我們修改了 x.number的值,并打印出值 20。

          第四次,我們再次傳遞 value對象。x.number之前被修改為 20,所以 x.number*=2打印為 40。

          22. 下面代碼輸出什么?

          [1, 2, 3, 4].reduce((x, y) => console.log(x, y));
          
          • A: 12 and 33 and 64
          • B: 12 and 23 and 34
          • C: 1undefined and 2undefined and 3undefined and 4undefined
          • D: 12 and undefined3 and undefined4

          答案: D

          reducer 函數接收4個參數:

          1. Accumulator (acc) (累計器)
          2. Current Value (cur) (當前值)
          3. Current Index (idx) (當前索引)
          4. Source Array (src) (源數組)

          reducer 函數的返回值將會分配給累計器,該返回值在數組的每個迭代中被記住,并最后成為最終的單個結果值。

          reducer 函數還有一個可選參數 initialValue, 該參數將作為第一次調用回調函數時的第一個參數的值。如果沒有提供 initialValue,則將使用數組中的第一個元素。

          在上述例子, reduce方法接收的第一個參數(Accumulator)是 x, 第二個參數(Current Value)是 y。

          在第一次調用時,累加器 x為 1,當前值 “y”為 2,打印出累加器和當前值:1和 2。

          例子中我們的回調函數沒有返回任何值,只是打印累加器的值和當前值。如果函數沒有返回值,則默認返回 undefined。在下一次調用時,累加器為 undefined,當前值為“3”, 因此 undefined和 3被打印出。

          在第四次調用時,回調函數依然沒有返回值。累加器再次為 undefined ,當前值為“4”。undefined和 4被打印出。

          23. 使用哪個構造函數可以成功繼承 Dog類?

          class Dog {
           constructor(name) { 
           this.name = name;
           }
          };
          class Labrador extends Dog {
           // 1
           constructor(name, size) {
           this.size = size;
           }
           // 2
           constructor(name, size) {
           super(name);
           this.size = size;
           }
           // 3
           constructor(size) {
           super(name);
           this.size = size;
           }
           // 4
           constructor(name, size) {
           this.name = name;
           this.size = size;
           }
          };
          
          • A: 1
          • B: 2
          • C: 3
          • D: 4

          答案: B

          在子類中,在調用 super之前不能訪問到 this關鍵字。如果這樣做,它將拋出一個 ReferenceError:1和4將引發一個引用錯誤。

          使用 super關鍵字,需要用給定的參數來調用父類的構造函數。父類的構造函數接收 name參數,因此我們需要將 name傳遞給 super。

          Labrador類接收兩個參數, name參數是由于它繼承了 Dog, size作為 Labrador類的額外屬性,它們都需要傳遞給 Labrador的構造函數,因此使用構造函數2正確完成。

          24. 下面代碼輸出什么?

          // index.js
          console.log('running index.js');
          import { sum } from './sum.js';
          console.log(sum(1, 2));
          // sum.js
          console.log('running sum.js');
          export const sum = (a, b) => a + b;
          
          • A: running index.js, running sum.js, 3
          • B: running sum.js, running index.js, 3
          • C: running sum.js, 3, running index.js
          • D: running index.js, undefined, running sum.js

          答案: B

          import命令是編譯階段執行的,在代碼運行之前。因此這意味著被導入的模塊會先運行,而導入模塊的文件會后執行。

          這是CommonJS中 require()和 import之間的區別。使用 require(),您可以在運行代碼時根據需要加載依賴項。如果我們使用 require而不是 import, running index.js, running sum.js, 3會被依次打印。

          25. 下面代碼輸出什么?

          console.log(Number(2) === Number(2))
          console.log(Boolean(false) === Boolean(false))
          console.log(Symbol('foo') === Symbol('foo'))
          
          • A: true, true, false
          • B: false, true, false
          • C: true, false, true
          • D: true, true, true

          答案: A

          每個 Symbol都是完全唯一的。傳遞給 Symbol的參數只是給 Symbol的一個描述。Symbol的值不依賴于傳遞的參數。當我們測試相等時,我們創建了兩個全新的符號:第一個 Symbol('foo'),第二個 Symbol('foo'), 這兩個值是唯一的,彼此不相等,因此返回 false。

          26. 下面代碼輸出什么?

          const name = "Lydia Hallie"
          console.log(name.padStart(13))
          console.log(name.padStart(2))
          
          • A: "Lydia Hallie", "Lydia Hallie"
          • B: " Lydia Hallie", " Lydia Hallie" ( "[13x whitespace]Lydia Hallie", "[2x whitespace]Lydia Hallie")
          • C: " Lydia Hallie", "Lydia Hallie" ( "[1x whitespace]Lydia Hallie", "Lydia Hallie")
          • D: "Lydia Hallie", "Lyd"

          答案: C

          使用 padStart方法,我們可以在字符串的開頭添加填充。傳遞給此方法的參數是字符串的總長度(包含填充)。字符串 LydiaHallie的長度為 12, 因此 name.padStart(13)在字符串的開頭只會插入1( 13-12=1)個空格。

          如果傳遞給 padStart方法的參數小于字符串的長度,則不會添加填充。

          27. 下面代碼輸出什么?

          console.log("" + "");
          
          • A: ""
          • B: 257548
          • C: A string containing their code points
          • D: Error

          答案: A

          使用 +運算符,您可以連接字符串。上述情況,我們將字符串 “”與字符串 ”“連接起來,產生 ”“。

          28. 如何能打印出 console.log語句后注釋掉的值?

          function* startGame() {
           const answer = yield "Do you love JavaScript?";
           if (answer !== "Yes") {
           return "Oh wow... Guess we're gone here";
           }
           return "JavaScript loves you back ??";
          }
          const game = startGame();
          console.log(/* 1 */); // Do you love JavaScript?
          console.log(/* 2 */); // JavaScript loves you back ??
          
          • A: game.next("Yes").value and game.next().value
          • B: game.next.value("Yes") and game.next.value()
          • C: game.next().value and game.next("Yes").value
          • D: game.next.value() and game.next.value("Yes")

          答案: C

          generator函數在遇到 yield關鍵字時會“暫?!逼鋱绦小J紫?,我們需要讓函數產生字符串Doyou loveJavaScript?,這可以通過調用 game.next().value來完成。上述函數的第一行就有一個 yield關鍵字,那么運行立即停止了, yield表達式本身沒有返回值,或者說總是返回 undefined, 這意味著此時變量 answer 為 undefined

          next方法可以帶一個參數,該參數會被當作上一個 yield 表達式的返回值。當我們調用 game.next("Yes").value時,先前的 yield 的返回值將被替換為傳遞給 next()函數的參數 "Yes"。此時變量 answer 被賦值為 "Yes", if語句返回 false,所以 JavaScriptloves you back??被打印。

          29. 下面代碼輸出什么?

          console.log(String.raw`Hello\nworld`);
          
          • A: Helloworld!
          • B: Hello

          world

          • C: Hello\nworld
          • D: Hello\n

          world

          答案: C

          String.raw函數是用來獲取一個模板字符串的原始字符串的,它返回一個字符串,其中忽略了轉義符( \n, \v, \t等)。但反斜杠可能造成問題,因為你可能會遇到下面這種類似情況:

          const path = `C:\Documents\Projects\table.html`
          String.raw`${path}`
          

          這將導致:

          "C:DocumentsProjects able.html"

          直接使用 String.raw

          String.raw`C:\Documents\Projects\table.html`
          

          它會忽略轉義字符并打?。篊:\Documents\Projects\table.html

          上述情況,字符串是 Hello\nworld被打印出。

          30.下面代碼輸出什么?

          async function getData() {
           return await Promise.resolve("I made it!");
          }
          const data = getData();
          console.log(data);
          
          • A: "I made it!"
          • B: Promise{<resolved>:"I made it!"}
          • C: Promise{<pending>}
          • D: undefined

          答案: C

          異步函數始終返回一個promise。 await仍然需要等待promise的解決:當我們調用 getData()并將其賦值給 data,此時 data為 getData方法返回的一個掛起的promise,該promise并沒有解決。

          如果我們想要訪問已解決的值 "I made it!",可以在 data上使用 .then()方法:

          data.then(res=>console.log(res))

          這樣將打印 "I made it!"

          31. 下面代碼輸出什么?

          function addToList(item, list) {
           return list.push(item);
          }
          const result = addToList("apple", ["banana"]);
          console.log(result);
          
          • A: ['apple','banana']
          • B: 2
          • C: true
          • D: undefined

          答案: B

          push()方法返回新數組的長度。一開始,數組包含一個元素(字符串 "banana"),長度為1。 在數組中添加字符串 "apple"后,長度變為2,并將從 addToList函數返回。

          push方法修改原始數組,如果你想從函數返回數組而不是數組長度,那么應該在push item之后返回 list。

          關注+私信《資料》獲??!

          感謝您的朗讀。想學習前端的小伙伴們可以關注+私信回復:【資料】已經為大家準備好最新的前端資料。


          主站蜘蛛池模板: 国产视频一区二区在线播放| 91福利一区二区| 成人无码AV一区二区| 麻豆精品久久久一区二区| 在线免费视频一区| 精品无码人妻一区二区免费蜜桃| 国产色精品vr一区区三区| 日韩一区二区三区射精| 精品国产一区二区三区色欲| 国产免费无码一区二区| 久久精品无码一区二区三区日韩| 国产精品538一区二区在线| 色综合视频一区二区三区44| 亚洲美女一区二区三区| 香蕉久久一区二区不卡无毒影院 | 亚洲另类无码一区二区三区| 中文字幕VA一区二区三区| 中文无码精品一区二区三区| 亚洲免费视频一区二区三区 | 亚洲视频一区在线播放| 福利一区二区三区视频在线观看| 久久精品人妻一区二区三区 | 亚洲国产高清在线一区二区三区| 日本一区免费电影| 国产成人一区二区精品非洲| 在线观看国产一区二区三区| 国产激情一区二区三区四区| 国产天堂在线一区二区三区 | 99久久国产精品免费一区二区| 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 麻豆AV一区二区三区久久| 老熟女五十路乱子交尾中出一区| 亚洲一区中文字幕在线电影网 | 精品一区二区三区在线观看| 奇米精品一区二区三区在| 国产激情无码一区二区app| 精品无码一区二区三区爱欲| 精品亚洲av无码一区二区柚蜜| 制服美女视频一区| 农村人乱弄一区二区 | 国产一区韩国女主播|