zuku · 每天一道面試題

**1.TS 類型有哪些？** ![](https://img.kancloud.cn/9d/ce/9dce5c694a99fd23a9e2a7fd12a723e2_355x199.png) **2. 什么是深拷貝？** 「深拷貝」就是在拷貝數據的時候，將數據的所有**引用結構**都拷貝一份。簡單的說就是，在內存中存在兩個數據結構完全相同又相互獨立的數據，將引用型類型進行復制，而不是只復制其引用關系。分析下怎么做「深拷貝」： 1. 首先假設深拷貝這個方法已經完成，為 deepClone 2. 要拷貝一個數據，我們肯定要去遍歷它的屬性，如果這個對象的屬性仍是對象，繼續使用這個方法，如此往復 ``` function deepClone(o1, o2) { for (let k in o2) { if (typeof o2[k] === 'object') { o1[k] = {}; deepClone(o1[k], o2[k]); } else { o1[k] = o2[k]; } } } ``` 遞歸容易造成爆棧，尾部調用可以解決遞歸的這個問題，Chrome 的 V8 引擎做了尾部調用優化，我們在寫代碼的時候也要注意尾部調用寫法。遞歸的爆棧問題可以通過將遞歸改寫成枚舉的方式來解決，就是通過for或者while來代替遞歸。 ## 3. 克隆數組的方法（一）slice方法 ``` let arr = [1,2,3,4] let arr1= arr.slice()?//或者是?? let arr1= arr.slice(0) arr[0] = 6 console.log(arr)??// [6, 2, 3, 4] console.log(arr1)?``// [1, 2, 3, 4] ``` （二）自己封裝一個myClone函數 ~~~ Array.prototype.myClone = function(){ let newArr=[]; for(let i=0;i<this.length;i++) { newArr.push(this[i]); } return newArr; } let arr = ['aaa','bbb','ccc','wwwww','ddd'] let arr2 = arr.myClone() console.log(arr) //["aaa", "bbb", "ccc", "wwwww", "ddd"] console.log(arr2) //["aaa", "bbb", "ccc", "wwwww", "ddd"] console.log( arr2 === arr ) //false ~~~ （三）展開運算符 [...arr] ~~~ const arr1 = [1, 2]; const arr2 = [...a1]; arr1[0] = 6 console.log(arr1) // [6, 2] console.log(arr2) // [1, 2] ~~~ （四）concat方法 ~~~ var arr1 = [1,2,3] var arr2 = arr1.concat() //或者是 var arr2 = arr1.concat([]) arr1[0] = 6 console.log(arr1) //[6,1,2] console.log(arr2) //[1,2,3] ~~~ （五）Object.assign() ~~~ let arr = [1,2,3,4]; let arr1 = []; Object.assign(arr1,arr); arr[0] = 6; console.log(arr); // [6, 2, 3, 4] console.log(arr1); // [1, 2, 3, 4] 　　 ~~~ (六) ~~~tsx const deepClone(obj)=>JSON.parse(JSON.stringify(obj)) ~~~ ## 數組主要有哪些方法？哪些可以改變原數組？哪些不能改變原數組？ ![](https://img.kancloud.cn/66/97/6697660f7988ff87d9650e5f7346eeb8_1575x483.png) ![](https://img.kancloud.cn/59/a4/59a49c8760e1d8410cf565eab697bb34_1575x550.png) ![](https://img.kancloud.cn/65/c8/65c87aaaf7ba7262b4c38e3dedf6b0f4_1576x500.png) ## Session Cookie localStorage ?安全性： Session 比 Cookie 安全，Session 是存儲在服務器端的，Cookie 是存儲在客戶端的。 ?存取值的類型不同：Cookie 只支持存字符串數據，想要設置其他類型的數據，需要將其轉換成字符串，Session 可以存任意數據類型。 ?有效期不同： Cookie 可設置為長時間保持，比如我們經常使用的默認登錄功能，Session 一般失效時間較短，客戶端關閉（默認情況下）或者 Session 超時都會失效。 ?存儲大小不同：單個 Cookie 保存的數據不能超過 4K，Session 可存儲數據遠高于 Cookie，但是當訪問量過多，會占用過多的服務器資源。 ![](https://img.kancloud.cn/a2/30/a230a881c36c67b1d7868a4b0b110441_838x510.png) ~~~ var a = 0; var b = a; b++; alert(a); //=>"0" var o = {}; o.a = 0; var b = o; b.a = 10; alert(o.a); //=>"10" ~~~ ![](https://img.kancloud.cn/b8/1b/b81b3f3b8f7cf7d6e8e6c0a54963803b_594x530.png) ~~~ let x = [1, 2, 3]; let y = x; let z = [4, 5, 6]; y[0] = 10; y = z; z[1] = 20; x[2] = z = 30; console.log(x, y, z); ~~~ ![](https://img.kancloud.cn/ff/61/ff616cdf39a1f30d601d90caa0e39d25_590x333.png) ![](https://img.kancloud.cn/5f/66/5f663f975edaec5e7f56de3afde8017c_883x515.png) ## setState何時同步何時異步？ **由React控制的事件處理程序，以及生命周期函數調用setState不會同步更新state** 。 **React控制之外的事件中調用setState是同步更新的。比如原生js綁定的事件，setTimeout/setInterval等**。大部分開發中用到的都是React封裝的事件，比如onChange、onClick、onTouchMove等，這些事件處理程序中的setState都是異步處理的。 ## React是怎樣控制異步和同步的呢？在 React 的 setState 函數實現中，會根據一個變量 isBatchingUpdates 判斷是直接更新 this.state 還是放到隊列中延時更新，而 isBatchingUpdates 默認是 false，表示 setState 會同步更新 this.state；但是，有一個函數 batchedUpdates，該函數會把 isBatchingUpdates 修改為 true，而當 React 在調用事件處理函數之前就會先調用這個 batchedUpdates將isBatchingUpdates修改為true，這樣由 React 控制的事件處理過程 setState 不會同步更新 this.state。 ## react hook使用規則 1：只在最頂層使用 Hook** 不要在循環，條件或嵌套函數中調用 Hook， 2：不要在普通的 JavaScript 函數中調用 Hook。但可以： * ? 在 React 的函數組件中調用 Hook * ? 在自定義 Hook 中調用其他 Hook css居中 ## (1) text-align: center; ``` div.center{ text-align: center; background: hsl(0,100%,97%); } div.center img{ width: 33%; height: auto; } ``` html ``` <div class="center"> <img src="img.png"> </div> ``` ## (2) margin: 0 auto; ``` <style> div.center{ background: hsl(60,100%,97%); } div.center img{ display: block; width: 33%; height: auto; margin: 0 auto; } </style> <div class="center"> <img src="img.png"> </div> ``` ## (3) table-cell ``` <style> .center-aligned{ display: table; background: hsl(120,100%,97%); width: 100%; } .center-core{ display: table-cell; text-align: center; vertical-align: middle; } .center-core img{ width: 33%; height: auto; } </style> <div class="center-aligned"> <div class="center-core"> <img src="img.png"> </div> </div> ``` ## (4) position: absolute; ``` <style> .absolute-aligned{ position: relative; min-height: 500px; background: hsl(200,100%,97%); } .absolute-aligned img{ width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top:0; left: 0; bottom: 0; right: 0; } </style> </head> <body>  <div class="absolute-aligned"> <img src="img.png"> </div> ``` ### (5) translate ``` <style> .center{ background: hsl(180,100%,97%); position: relative; min-height: 500px; } .center img{ position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width: 30%; height: auto; } </style> </head> <body>  <div class="center"> <img src="img.png"> </div> ``` ### (6) flex ``` <style> .center{ background: hsl(240,100%,97%); display: flex; justify-content: center; align-items: center; } .center img{ width: 30%; height: auto; } </style>  <div class="center"> <img src="img.png"> </div> ``` ### (7) calc ``` <style> .center{ background: hsl(300,100%,97%); min-height: 600px; position: relative; } .center img{ width: 40%; height: auto; position: absolute; top:calc(50% - 20%); left: calc(50% - 20%); } </style>  <div class="center"> <img src="img.png"> </div> ``` ### (8) margin left 一半 ``` <style> div{ position: absolute; width: 500px; height: 300px; margin: auto; top:50%; left: 50%; margin:-150px 0 0 -250px; background-color: pink; } </style> </head> <body> <div>center</div> ``` ## HTTP 狀態碼 HTTP 狀態碼，有`2xx``3xx``4xx``5xx`這幾種，比較常用的有以下幾種： * `200`正常 * `3xx` * `301`永久重定向。如`http://xxx.com`這個 GET 請求（最后沒有`/`），就會被`301`到`http://xxx.com/`（最后是`/`） * `302`臨時重定向。臨時的，不是永久的 * `304`資源找到但是不符合請求條件，不會返回任何主體。如發送 GET 請求時，head 中有`If-Modified-Since: xxx`（要求返回更新時間是`xxx`時間之后的資源），如果此時服務器端資源未更新，則會返回`304`，即不符合要求 * `404`找不到資源 * `5xx`服務器端出錯了