14、介紹下觀察者模式和訂閱-發(fā)布模式的區(qū)別，各自適用于什么場景？

答案：觀察者模式中主體和觀察者是互相感知的，發(fā)布-訂閱模式是借助第三方來實現(xiàn)調(diào)度的，發(fā)布者和訂閱者之間互不感知：

觀察者模式就好像 個體奶農(nóng)和個人的關(guān)系。奶農(nóng)負(fù)責(zé)統(tǒng)計有多少人訂了產(chǎn)品，所以個人都會有一個相同拿牛奶的方法。奶農(nóng)有新奶了就負(fù)責(zé)調(diào)用這個方法；

發(fā)布-訂閱模式就好像報社， 郵局和個人的關(guān)系，報紙的訂閱和分發(fā)是由郵局來完成的。報社只負(fù)責(zé)將報紙發(fā)送給郵局；

觀察者模式為一刀切模式，對所有訂閱者一視同仁；
發(fā)布訂閱模式?可以戴有色眼鏡，有一層過濾或者說暗箱操作?。

?

15、全局作用域中，用 const 和 let 聲明的變量不在 window 上，那到底在哪里？如何去獲取？

答案：首先我們要知道，在ES5中，頂層對象的屬性和全局變量是等價的，var 命令和 function 命令聲明的全局變量，自然也是頂層對象：

var a = 12; function f() {};console.log(window.a); // 12 console.log(window.f); // f() {}

但ES6規(guī)定，var 命令和 function 命令聲明的全局變量，依舊是頂層對象的屬性，但 let命令、const命令、class命令聲明的全局變量，不屬于頂層對象的屬性：

let aa = 1; const bb = 2;console.log(window.aa); // undefined console.log(window.bb); // undefined

在全局作用域中，用 let 和 const 聲明的全局變量并沒有在全局對象中，只是一個塊級作用域（Script）中，想要獲取，直接在塊作用域中獲取，既然不屬于頂層對象，那就不加 window（global）就可以獲取到。

?

16、cookie 和 token 都存放在 header 中，為什么不會劫持 token？

答案：

cookie：登陸后后端生成一個sessionid放在cookie中返回給客戶端，并且服務(wù)端一直記錄著這個sessionid，客戶端以后每次請求都會帶上這個sessionid，服務(wù)端通過這個sessionid來驗證身份之類的操作。所以別人拿到了cookie拿到了sessionid后，就可以完全替代你。

token：登陸后后端不返回一個token給客戶端，客戶端將這個token存儲起來，然后每次客戶端請求都需要開發(fā)者手動將token放在header中帶過去，服務(wù)端每次只需要對這個token進(jìn)行驗證就能使用token中的信息來進(jìn)行下一步操作了。

xss：用戶通過各種方式將惡意代碼注入到其他用戶的頁面中。就可以通過腳本獲取信息，發(fā)起請求，之類的操作。

csrf：跨站請求攻擊，簡單地說，是攻擊者通過一些技術(shù)手段欺騙用戶的瀏覽器去訪問一個自己曾經(jīng)認(rèn)證過的網(wǎng)站并運行一些操作（如發(fā)郵件，發(fā)消息，甚至財產(chǎn)操作如轉(zhuǎn)賬和購買商品）。由于瀏覽器曾經(jīng)認(rèn)證過，所以被訪問的網(wǎng)站會認(rèn)為是真正的用戶操作而去運行。這利用了web中用戶身份驗證的一個漏洞：簡單的身份驗證只能保證請求發(fā)自某個用戶的瀏覽器，卻不能保證請求本身是用戶自愿發(fā)出的。csrf并不能夠拿到用戶的任何信息，它只是欺騙用戶瀏覽器，讓其以用戶的名義進(jìn)行操作。

csrf例子：假如一家銀行用以運行轉(zhuǎn)賬操作的URL地址如下：?http://www.examplebank.com/withdraw?account=AccoutName&amount=1000&for=PayeeName
那么，一個惡意攻擊者可以在另一個網(wǎng)站上放置如下代碼：?<img src="<http://www.examplebank.com/withdraw?account=Alice&amount=1000&for=Badman>">
如果有賬戶名為Alice的用戶訪問了惡意站點，而她之前剛訪問過銀行不久，登錄信息尚未過期，那么她就會損失1000資金。

以上面的csrf攻擊為例：

對cookie來說，用戶點擊了鏈接，cookie未失效，導(dǎo)致發(fā)起請求后后端以為是用戶正常操作，于是進(jìn)行扣款操作；但是對于token來說，用戶點擊鏈接，瀏覽器不會自動帶上token，所以即使發(fā)送了請求，后端的token驗證也不會通過，所以不進(jìn)行扣款操作。

?

但是注意，對于xss來說，token和cookie都沒用。xss劫持cookie或者localStorage，從而偽造用戶身份相關(guān)信息。前端層面token會存在哪兒？不外乎cookie localStorage sessionStorage，這些東西都是通過js代碼獲取到的。解決方案：過濾標(biāo)簽<>，不信任用戶輸入， 對用戶身份等cookie層面的信息進(jìn)行http-only處理。

?

17、請把倆個數(shù)組 [A1, A2, B1, B2, C1, C2, D1, D2] 和 [A, B, C, D]，合并為 [A1, A2, A, B1, B2, B, C1, C2, C, D1, D2, D]

答案：

const arr1 = ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2']; const arr2 = ['A', 'B', 'C', 'D']; const ret = []; let tmp = arr2[0]; let j = 0;for (let i = 0; i < arr1.length; i++) {if (tmp === arr1[i].charAt(0)) { // charAt() 方法用于返回指定索引處的字符ret.push(arr1[i])} else {ret.push(tmp);ret.push(arr1[i]);tmp = arr2[++j]}if (i === arr1.length - 1) {ret.push(tmp)} }console.log(ret)

?

總結(jié)

以上是生活随笔為你收集整理的前端笔试题整理：活到老学到老②的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。