小红书2020校招前端笔试题卷一
題目1-下列說法正確的是（）多選
A: requestAnimationFrame(foo) 確保使瀏覽器在下一次重繪之前調用 foo 方法B: 在 addEventListener 的處理方法中使用 e.preventDefault() 可以阻止事件冒泡C: 把 <script> 標簽的引入放在文檔末尾可以確保腳本下載和執行均在文檔解析完成后發生D: 多個 <script> 標簽使用 defer 屬性引入腳本時，可以確保腳本的執行是按照其被引入的順序的- 答案
- A,C,D
- 解析
- 更詳細的script的defer和async可以看這位博主的
A選項:
window.requestAnimationFrame() 告訴瀏覽器——你希望執行一個動畫，并且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。該方法需要傳入一個回調函數作為參數，該回調函數會在瀏覽器下一次重繪之前執行
BCD選項:
-
B: 記住,阻止事件默認行為是preventDefault 停止事件冒泡是stopPropagation (記住關鍵字就好了,阻止和停止這二個關鍵字)
-
C: 由于js是單線程的,要么css在解析,要么js在解析,所以某一個時刻要么只有js,要么只有css在運行,所以把script放在最后可以等待css解析完成后執行js腳本
-
D: <script defer></script>
- 具有defer特性的腳本不會阻塞頁面,相當于遇到了就丟到后臺去執行
- 具有defer特征的腳本總是到等到DOM解析完畢,但在 DOMContentLoaded 事件之前執行。
- 具有defer特征的腳本保持其引入順序執行,(有多個defer,則執行順序按照引入順序來執行)
假設，我們有兩個具有 defer 特性的腳本：long.js 在前，small.js 在后。
<script defer src="https://javascript.info/article/script-async-defer/long.js"></script> <script defer src="https://javascript.info/article/script-async-defer/small.js"></script>瀏覽器掃描頁面尋找腳本，然后并行下載它們，以提高性能。因此，在上面的示例中，兩個腳本是并行下載的。small.js 可能會先下載完成。
……但是，defer 特性除了告訴瀏覽器“不要阻塞頁面”之外，還可以確保腳本執行的相對順序。因此，即使 small.js 先加載完成，它也需要等到 long.js 執行結束才會被執行。
當我們需要先加載 JavaScript 庫，然后再加載依賴于它的腳本時，這可能會很有用。
總結:
? 使用 defer 屬性可以讓腳本在文檔完全呈現之后再執行,延遲腳本總是按照指定它們的順序執行。
? 使用 async 屬性可以表示當前腳本不必等待其他腳本，也不必阻塞文檔呈現。不能保證異步腳本按照它們在頁面中出現的順序執行。
題目2-請根據下面的示例描述原型鏈與繼承的關系并解釋原因：
class A {} class B extends A {} const a = new A() const b = new B() a.__proto__ === b.__proto__ === B.__proto === B.prototype.__proto__ === b.__proto__.__proto__ ===-
答案
a.__proto__ === A.prototype b.__proto__ === B.prototype B.__proto__ === A B.prototype.__proto__ === A.prototype b.__proto__.__proto__ === A.prorotype
解析
- 這位博主寫的很詳細
大概意思就是如圖
題目3-ajax 的 readyState 有哪幾個狀態，含義分別是什么？
有5個狀態,分別是
0 : 代表open方法還沒有被調用
1: 代表send方法還沒有被調用
2: 還沒有收到響應(剛剛發送)
3: 收到一部分響應(數據流一樣慢慢來)
4: 收到全部數據(數據傳輸完成)
補充:
使用XMLHttpRequest發送ajax請求
var xhr = new XMLHttpRequest(); xhr.open("get","http://127.0.0.1:8000"); xhr.send(); xhr.onreadystatechange = function() {// xhr.readyState === 4 && xhr.status >=200 && xhr.stats <300也可以if(xhr.readyState === 4 && xhr.status === 200){console.log(xhr.responseText);} } xhr.onerror = function (error) {console.log(error) };使用javascript實現每隔三位使用逗號分隔一次
代碼:參考大佬的
function paddingNum(num){//記錄下是正數還是負數let flag = num > 0 ? true : false;//取絕對值并轉化為字符串num = Math.abs(num)+"";//獲取整數部分和小數部分let [numberLeft,numberRight] = num.split(".");//沒有小數位就用空字符串填充下numberRight = numberRight ? "."+numberRight : "";//暫存數字let temp = "";while(numberLeft.length > 3){//每次截取整數部分后3個字符串temp = "," + numberLeft.slice(-3) + temp;//將整數部分除去最后三個字符串numberLeft = numberLeft.slice(0,numberLeft.length - 3);}//循環結束,最后長度小于3,就將剩余的連接上return flag ? numberLeft+temp+numberRight : "-"+numberLeft+temp+numberRight; }當然,你需要的話也可以用這種方法
const paddingNum = num => (num).toLocaleString('en-US')//寫復雜點就是 function paddingNum(num){let temp = num.toLocaleString('en-US');return temp; }題目3-給定長度為n的整數數組nums,其中n > 1,返回輸出數組output ，其中output[i] 等于nums中除nums[i] 之外其余各元素的乘積
代碼:
function productExceptSelf(numArray) {let tempArray = [];numArray.forEach(item1 => {let num = 1;numArray.forEach(item2 => {if (item1 != item2) {num = num * item2;}});tempArray.push(num);});return tempArray; }題目4-薯隊長帶著小紅薯參加密室逃脫團建游戲，首先遇到了反轉游戲，小紅薯們根據游戲提示收集了多個單詞線索，并將單詞按要求加一個空格組 成了句子，最終要求把句子按單詞反轉解密。 說明：收集的時候單詞前后可能會有多個空格，反轉后單詞不能有多個空格，具體見輸入輸出樣例。
輸入描述:
輸入一個字符串。包含空格和可見字符。長度<=100000。
輸出描述:
輸出一個字符串，表示反轉后結果。
示例1
輸入 the sky is blue!輸出 blue! is sky the代碼:
<script>console.log(reverse("the sky is blue!"));function reverse(str) {//匹配任何非空白字符。等價于[^ \f\n\r\t\v]。var a = str.match(/(\S+)/g);//調用數組的方法a = a.reverse();return a.join(" ");} </script> 測試數據 jifgykoserhurjkcnhskdncvgkiyhnsjdukzecrunyst 827136547tr8yh74f8o9l3w92qujwhe8iu7ryhf uincymh9oxw,z.ej/09l8kyut8w9o,x.9elo58km4yu ;78p0[2845){*(){P:T*#Q)I(OPUQjfpii[upOYHUIYG 9430q80965tpyw4[h 898888888888888888888888888888888888888888 iouy4ewrt8iu7hgfo2UIYTRFYJHMGDSAI f87e6rwtyugfhkjhki ZHONGGUOGONGCHANDANGWANSUI MAOZHUXIWANSUI總結
以上是生活随笔為你收集整理的小红书2020校招前端笔试题卷一的全部內容，希望文章能夠幫你解決所遇到的問題。
