7.2上午筆試題

1、請描述cookie,sesstionStorage,localStorage三者之間的區別

• 有效時間：cookie在關閉瀏覽器後失效，sessionStorage在關閉頁面後失效，localStorage需要手動清除才會失效；
• 資料儲存大小：cookie只有4K左右，sessionStorage和LocalStorage一般有5M。
• cookie會在請求頭中一起傳送給伺服器，另外兩個則不參與通訊

2、判斷以下js程式碼是否正確，並描述原因

A "undefined" == undefined
B "8889" == 8889

A的結果是False，'undefined'是已經宣告的一個字串，所以與undefined相比結果為False；B的結果是true，在字串和數字比較時，會將字串轉換為數字再進行比較。

3、請問以下程式碼最終輸出結果是什麼

(function () {
  var a = b = 345;
})();
console.log(b);
console.log(typeof(a));

輸出結果345，undefined，a是通過var關鍵字進行生命，屬於函式內部的區域性作用域，而b被分配到全域性作用域，所以在後邊可以訪問到b的值。

如果在函式內部使用了嚴格模式的話，程式碼會在輸出b的時候報錯Uncaught ReferenceError: b is not defined

4、請用javascript將字串"http://www.alipay.com?orderid=933&ordername=iPhone6s一部”

使用encodeURI()和decodeURI()對url進行編碼和解碼，取出'?'左右兩個子字串可以使用str.split('?')

5、請閱讀以下程式碼並分別寫出param,temp1,temp2三個物件的屬性值

var param={ Idx : 1, Name : 'wawayaya', Gender : '男' };
var temp1 = param;
var temp2 = { };
temp2 = param;
temp1.Name='joyreader';
delete temp2.Gender;
 

物件temp1和temp2直接使用物件複製，三個物件都指向同一個地址，當一個物件改變時，地址中物件的值也會改變，導致另外兩個輸出相同的結果。

6、請將javascript物件account，儲存到sessionStorage中，並將account物件從sessionStorage中取出，取出之後打印出account物件的所有屬性，var account = {Idx:1,Name:'JoyReader'};

sessionStorage.setItem('key', account);
JSON.parse(window.sessionStorage.getItem('key'))；

7、

// 請描述以下程式碼存在的問題，並給出優化方案
var divs = document.getElementsByTagName(“div”);
for(var i=0;i<divs.length;i++){
  document.body.appendChild(document.createElement(“div”));
}

這個應該是作用域的問題，將for迴圈中的var宣告換成let或者包裹在一個 立即執行函式裡。

8、現有一個網頁要求以裝置寬度進行呈現，並且此網頁不允許使用者縮放，當裝置寬度在320px至480px之間時body元素的背景顏色為#d0d0d0，請寫出相關程式碼。

頁面禁止縮放使用meta標籤：<meta name='viewport' content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

獲取裝置寬度使用window.screen.width

9、現有這樣的資料 var data = [{Idx:2,Name:'Qiuguoheng'},{Idx:3,Name:'Liyanhong'},{Idx:4,Name:'Mayun'},....]此陣列的長度為1000,請遍歷此陣列，將結果新增至形如下面的表格中,要求“禁用”連結上要有Idx的屬性值

<table id=“data-tb”>
	<tr><th>Idx</th><th>Name</th><th>操作</th>
</table>

建立一個DocumentFragment，將所有的資料新增到裡邊，最後將DocumentFragment渲染到頁面上，只需要操作一次DOM

10、寫出一些優化網頁載入速度的方案或建議

圖片懶載入、預載入；使用CDN；將JS放在檔案底部，CSS放在檔案頂部；壓縮JS和CSS檔案；http快取；按需載入等

做完以後百度答案，感覺自己又涼了。我又涼了，我驕傲了嗎。

7.2日下午面試

另一家公司，視訊面試，對面戴著口罩倒是很好說話的樣子。

問題大概有下面這些：

• 為什麼選擇使用React

• 陣列遍歷的區別(for、for...in、for...of、forEach、Map)

使用Symbol.iterator可以為物件新增可迭代屬性，使用for...of進行迭代

• 使用過哪些antd元件，有什麼問題

• 三個div怎麼顯示在一行（彈性佈局flex-wrap: nowrap)

• 在專案裡有沒有做過按需載入，懶載入

• 有沒有了解過今年的React庫（沒有。。。）

• useEffect鉤子函式（第二個引數，依賴陣列，當依賴陣列發生改變時呼叫函式）

• let、const、var有什麼區別

• 跨域問題