您好,登錄后才能下訂單哦!
10個JavaScript筆試題的問答是怎樣的,很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
作為JavaScript開發人員,我們可以挑戰自己成長的一個方法就是用刷題來練習!下面的問題旨在具有挑戰性和啟發性。如果你確切地知道如何回答每一個問題,那很好,但如果你答錯了,并知道為什么答錯了,我認為那就更好了!
問題1:數組排序比較
考慮以下數組。在不同的排序條件中會輸出什么?
const arr1 = ['a', 'b', 'c']; const arr2 = ['b', 'c', 'a']; console.log( arr1.sort() === arr1, arr2.sort() == arr2, arr1.sort() === arr2.sort() );
答案: true, true, false
這里有幾個概念在起作用。首先,數組 sort 方法對原始數組進行排序,并返回對該數組的引用。這意味著在編寫 arr2.sort() 時,將對 arr2 數組對象進行排序。
事實證明,在比較對象時,數組的排序順序并不重要。由于 arr1.sort() 和 arr1 指向內存中的同一對象,因此第一個相等測試返回 true。第二個比較也是如此:arr2.sort() 和 arr2 指向內存中的同一對象。
在第三個測試中,arr1.sort() 和 arr2.sort() 的排序順序相同;但是,它們指向內存中的不同對象。因此,第三項測試的結果為 false。
問題2:set 一組對象
考慮下面的對象 Set 集合,它們散布到一個新的數組中。會輸出什么?
const mySet = new Set([{ a: 1 }, { a: 1 }]); const result = [...mySet]; console.log(result);
答案:[{a: 1}, {a: 1}]。
盡管 Set 對象確實會刪除重復項,但是盡管具有相同的鍵值對,但我們使用 Set 創建的兩個值是對內存中不同對象的引用。這與 {a:1} === {a:1} 為 false 的原因相同。
應該注意的是,如果集合是使用對象變量創建的,例如 obj = {a:1},則 new Set([obj,obj]) 將只有一個元素,因為數組中的兩個元素都引用內存中的同一對象。
問題3:深度對象可變性
考慮下面這個代表用戶Joe和他的狗Buttercup的對象。我們使用 Object.freeze 保存我們的對象,然后嘗試更改Buttercup的名稱。會輸出什么?
const user = { name: 'Joe', age: 25, pet: { type: 'dog', name: 'Buttercup' } }; Object.freeze(user); user.pet.name = 'Daffodil'; console.log(user.pet.name);
答案:Daffodil。
Object.freeze 將對對象執行淺層凍結,但不會保護深層屬性不被突變。在此示例中,我們將無法更改user.age,但對 user.pet.name 進行更改不會有問題。如果我們認為需要保護某個對象以免其被“徹底破壞”,則可以遞歸應用 Object.freeze 或使用現有的“deep freeze”庫。
問題4:原型繼承
在這個問題中,我們有一個 Dog 構造函數,我們的 dog 顯然知道說話的命令。當我們要求Pogo講話時,以下示例中將會輸出什么?
function Dog(name) { this.name = name; this.speak = function() { return 'woof'; }; } const dog = new Dog('Pogo'); Dog.prototype.speak = function() { return 'arf'; }; console.log(dog.speak());
答案:woof。
每次創建一個新的 Dog 實例時,我們都會將該實例的 speak 屬性設置為一個返回字符串 woof 的函數。由于每次創建新的 Dog 實例時都會設置該字段,因此解釋器無需再向上尋找原型鏈來查找 speak 屬性。結果,永遠不會使用 Dog.prototype.speak 上的 speak 方法。
問題5:Promise.all Resolve Order
在這個問題中,我們有一個 timer 函數,該函數返回一個 Promise,該Promise將在隨機時間后解析。我們使用 Promise.all 解析 timers 數組。會輸出什么,還是隨機的?
const timer = a => { return new Promise(res => setTimeout(() => { res(a); }, Math.random() * 100) ); }; const all = Promise.all([ timer('first'), timer('second') ]).then(data => console.log(data));
答案: ["first", "second"]。
Promise解決的順序與 Promise.all 無關。我們可以可靠地指望它們以數組參數中提供的相同順序返回。
問題6:Reduce Math
下面的代碼輸出什么?
const arr = [ x => x * 1, x => x * 2, x => x * 3, x => x * 4 ]; console.log(arr.reduce((agg, el) => agg + el(agg), 1));
答案:120。
使用 Array#reduce 時,聚合器的初始值(在這里稱為 agg)在第二個參數中給出。在這種情況下,就是 1。然后,我們可以如下迭代函數:
1 +1 * 1 = 2(下一次迭代中聚合器的值)
2 + 2 * 2 = 6(下一次迭代中聚合器的值)
6 + 6 * 3 = 24(下一次迭代中聚合器的值)
24 + 24 * 4 = 120(最終值)
因此,它是120!
問題7:短路通知
讓我們向用戶顯示一些通知!以下代碼段會輸出什么?
const notifications = 1; console.log( `You have ${notifications} notification${notifications !== 1 && 's'}` );
答案:“You have 1 notificationfalse”。
不幸的是,我們的短路評估將無法按此處的預期進行:notifications!== 1 && 's' 評估為 false,這意味著我們實際上將輸出 You have 1 notificationfalse。如果我們希望代碼段正常工作,則可以考慮條件運算符:${notifications === 1 ? '' : 's'}。
問題8:Spread并重命名
考慮以下具有單個對象的數組。當我們擴展該數組并更改0索引對象上的 firstName 屬性時會發生什么?
const arr1 = [{ firstName: 'James' }]; const arr2 = [...arr1]; arr2[0].firstName = 'Jonah'; console.log(arr1);
答案:[{ firstName: "Jonah" }]。
Spread創建一個數組的淺層副本,這意味著 arr2 中包含的對象仍指向 arr1 對象指向的內存中的同一對象。因此,在一個數組中更改對象的 firstName 屬性將通過另一個數組中的對象更改而反映出來。
問題9:數組方法綁定
在以下情況下會輸出什么?
const map = ['a', 'b', 'c'].map.bind([1, 2, 3]); map(el => console.log(el));
答案:1 2 3。
['a', 'b', 'c'].map,當調用時,將調用 Array.prototype.map,其 this 值為 ['a', 'b', 'c']。但是,當作為引用使用時,['a', 'b', 'c'].map 只是對 Array.prototype.map 的引用,而不是調用。
Function.prototype.bind 將把函數的 this 綁定到第一個參數(在本例中是 [1, 2, 3]),用這樣的this 調用 Array.prototype.map 會導致這些項被迭代并記錄下來。
問題10:Set 唯一性和順序
在以下問題中,我們使用 Set 對象和spread語法創建一個新數組。輸出的內容(考慮:項目被強制為唯一的嗎?它們是否已排序?)
const arr = [...new Set([3, 1, 2, 3, 4])]; console.log(arr.length, arr[2]);
答案:4 2。
Set 對象將強制唯一元素(集合中已經存在的重復元素將被忽略),但不會更改順序。所得的 arr 數組將為[3,1,2,4],表示 arr.length 為 4 ,而 arr [2] (數組的第三個元素)為 2。
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。