以下是個人線下面試遇到的真實的題，僅供參考和學習

1.?css?選擇符有哪些？哪些屬性可以繼承？優先級算法加何計算？

CSS選擇符有很多種，例如類型選擇器、類選擇器、ID選擇器、屬性選擇器、偽類選擇器、偽元素選擇器等。

?

?

CSS屬性可以分為繼承屬性和非繼承屬性。繼承屬性是指當元素沒有指定該屬性的值時，會取父元素的同屬性的計算值。例如，字體、顏色、文本對齊等屬性是繼承屬性。非繼承屬性是指當元素沒有指定該屬性的值時，會取該屬性的初始值。例如，寬度、高度、邊框、背景等屬性是非繼承屬性。
CSS優先級算法是根據選擇器中的每一種選擇器類型的數值來計算的。數值越高，優先級越高。數值由四個部分組成，分別是內聯樣式、ID選擇器、類選擇器和類型選擇器。每個部分用一個0-255之間的數字表示，數字越大，權重越高。例如，內聯樣式的數值是1000，ID選擇器的數值是100，類選擇器的數值是10，類型選擇器的數值是1。如果兩個規則的數值相同，那么后出現的規則會覆蓋前面的規則。

2.?GET?和POST?請求的區別？?HTTP?與?HTTPS?的區別？

GET和POST都是HTTP協議中的請求方式，它們有以下幾個區別：

- GET請求的參數是在URL上，而POST請求的參數是在消息主體中。
- GET請求的參數有URL長度限制，而POST請求的參數沒有限制。
- GET請求的參數只能是ASCII字符，而POST請求的參數可以是任意類型。
- GET請求更容易被緩存、保存在服務器日志、以及瀏覽器瀏覽記錄中，因此POST請求更安全。
- GET請求表示從服務器獲取資源，而POST請求表示向服務器提交數據。

B站一位博主我覺得的講的很好：

【前端面試】當被面試官問到 get 和 post 的區別

HTTP和HTTPS都是網絡協議，它們有以下幾個區別：

- HTTPS是HTTP的安全版本，它使用了SSL/TLS協議進行了加密處理，因此傳輸的數據更安全。
- HTTPS需要申請證書，一般需要一定的費用，而HTTP不需要。
- HTTP和HTTPS使用的是不同的連接方式和端口，HTTP是80端口，HTTPS是443端口
- HTTPS比HTTP更耗費服務器資源，因為它需要進行加密和解密的操作

B站一位博主我覺得的講的很好：

http和https到底有什么區別？

3.描述?AJAX?的跨城問題，有哪些解決方案？

AJAX跨域問題是指瀏覽器的同源策略限制了AJAX請求不同域名的數據。這是為了保護用戶的信息安全，防止惡意網站竊取數據。

解決AJAX跨域問題的常用方案有：

**JSONP**：利用script標簽可以跨域的原理，動態插入一個回調函數，由服務器返回數據缺點是只能發起GET請求，需要服務器支持。
**nginx反向代理**：利用nginx把跨域請求轉發為同域請求，從而繞過瀏覽器的限制。缺點是需要在nginx進行額外配置，語義不清晰。
**CORS**：跨域資源共享，是一種規范化的跨域請求解決方案，通過在服務器端設置響應頭來允許不同域名的請求。優點是安全可靠，支持各種請求方式，可以自定義規則。

ajax請求，解決跨域的問題

同源策略是瀏覽器的一種安全策略，它用于限制一個源的文檔或者它加載的腳本如何能與另一個源的資源進行交互。它能幫助阻隔惡意文檔，減少可能被攻擊的媒介。

如果兩個URL的**協議**、**域名**、**端口**都相同的話，則這兩個URL是**同源**的。例如，`http://www.example.com/foo.html`和`http://www.example.com/bar.html`是同源的，

但是`http://www.example.com:8080/foo.html`和`http://www.example.net/bar.html`不是同源的。

ajax和接口的關系是

ajax是一種前端技術，它可以通過XMLHttpRequest對象向服務器發送請求和接收響應，從而實現無刷新的頁面更新。

接口是后端提供的一種數據交換的方式，它可以返回json或jsonp格式的數據給前端，從而實現前后端的數據交互。

ajax和接口之間需要遵守同源策略，也就是說，如果請求的接口不是同一個域，就會產生跨域問題。解決跨域問題的方法有很多種，例如CORS、JSONP、代理服務器等。CORS和JSONP的原理和用法已經在上一條介紹過了。代理服務器的方法是利用一個中間服務器來轉發請求和響應，從而繞過瀏覽器的跨域限制。

4.?JS?的淺拷貝和深拷貝的實現

淺拷貝和深拷貝是指復制一個對象時，是否復制對象本身還是只復制對象的引用。

淺拷貝只復制一層，更深層次的對象只拷貝引用，所以修改新對象會影響舊對象。

深拷貝則復制并創建一個一模一樣的對象，不共享內存，修改新對象不會影響舊對象。

JS中實現淺拷貝的方法有：Object.assign()Array.prototype.slice()Array.prototype.concat()等

實現深拷貝的方法有：JSON.parse(JSON.stringify())、遞歸遍歷、lodash.cloneDeep()等

?淺拷貝：

    <script>var obj = {id: 1,name: 'andy',msg: {age: 18,color: ['pink', 'blue']}};var o = {}for (var k in obj) {// k 是屬性名 obj[k] 是屬性值o[k] = obj[k];}console.log(o);o.msg.age = 20;console.log(obj);// Object.assign(o, obj) // 淺拷貝語法糖// console.log(o);// o.msg.age = 20;// console.log(obj);</script>

?深拷貝

    <script>var obj = {id: 1,name: 'andy',msg: {age: 18},color: ['pink', 'red']};var o = {};// 用遞歸的方式完成深拷貝// 封裝函數function deepCopy(newobj, oldobj) {// 遍歷oldobj的屬性名for (var k in oldobj) {// 判斷屬性屬于哪種數據類型// 1.獲取屬性值 oldobj[k]var item = oldobj[k];// 2.判斷是否屬于數組(因為數組也屬于對象，所以必須先判斷數組)if (item instanceof Array) {newobj[k] = []; // (1)先給newobj添加一個屬性k，同oldobj里的kdeepCopy(newobj[k], item) // (2)再用oldobj[k]賦值給newobj[k]} else if (item instanceof Object) {// 3.判斷是否屬于對象newobj[k] = {};deepCopy(newobj[k], item)} else {// 4.屬于簡單數據類型newobj[k] = item}}}deepCopy(o, obj)console.log(o);</script>

5.?請描述一下?cookies,?sessionstorage?和 localStorage?的區別？

cookies, sessionStorage 和 localStorage 都是用于在瀏覽器端存儲數據的技術，但它們有以下區別：

cookies 數據始終在同源的 http 請求中攜帶，即 cookies 在瀏覽器和服務器間來回傳遞，而 sessionStorage 和 localStorage 不會自動把數據發給服務器，僅在本地保存。
cookies 的大小一般不超過 4k，而 sessionStorage 和 localStorage 的大小可以達到 5M 甚至更多。
cookies 可以設置失效時間，如果沒有設置時間，關閉瀏覽器 cookies 失效，如果設置了時間，cookies 就會存儲在硬盤中，過期失效。sessionStorage 的有效期是頁面會話持續，如果頁面會話結束（關閉窗口或標簽頁），sessionStorage 就會消失。localStorage 的有效期是永久的，除非手動刪除。
?cookies 可以設置作用域（domain 和 path），限制其發送范圍。sessionStorage 和 localStorage 的作用域是同源的（協議相同/域名相同/端口相同）。

6.?JS實現一個折半查找

折半查找，也叫二分查找，是一種在有序數組中查找指定值的高效算法。它的基本思想是，每次比較數組的中間元素和目標值，如果相等，就返回中間元素的索引；如果不等，就根據目標值和中間元素的大小關系，縮小查找范圍，重復上述過程，直到找到目標值或者數組為空1。

JS 實現一個折半查找的代碼如下2：
function binSearch(arr, data) {// arr 是有序數組，data 是要查找的值var upperBound = arr.length - 1; // 上界var lowerBound = 0; // 下界while (lowerBound <= upperBound) {var mid = Math.floor((upperBound + lowerBound) / 2); // 中間索引if (arr[mid] < data) {lowerBound = mid + 1; // 如果中間元素小于目標值，下界變為中間索引加一} else if (arr[mid] > data) {upperBound = mid - 1; // 如果中間元素大于目標值，上界變為中間索引減一} else {return mid; // 如果中間元素等于目標值，返回中間索引}}return -1; // 如果沒有找到目標值，返回-1
}

7.有一天，一個人要過一座長為80?米的橋，而這個人有一個特點：他每走1米就要吃掉一顆花生米。可惜的是，這個人的身上最多只能裝?60?顆花生米，假如現在橋頭邊有足夠多的花生米，請問，這個人最少要吃多少顆花生米才能順利過橋呢？

這是一個經典的智力題，也是百度校招面試題。這個人最少要吃**140**顆花生米才能順利過橋。具體的解法是：

第一次（帶60）走到20米處，吃掉40顆花生米（走過去+返回橋頭），放下20顆花生米，回到橋頭；
第二次（帶60）走到20米處，吃掉40顆花生米（走過去+返回橋頭），放下20顆花生米（此時20米處有40顆），回到橋頭；
第三次（帶40），走到20米，還剩下（20）再加上20米處的40，剛好60顆，走完剩下的60米，過橋成功。
總共吃掉了60+40+40=140顆花生米。