web前端面試題(●'◡'●)

web前端面試題(●’◡’●)

自己總結的前端高頻面試題

一如前端深似海,回頭無岸 .

hr和項目經理高頻問題

1.盒模型 box-model margin-border-padding-content width:height都爲content的值 設計邊框大小時需要減去content的值

怪異盒模型 width：height（content+boder+padding) 設計邊框大小不需要減去content的值

vue 雙向綁定原理 object.defineProperty 觀察者監聽數據發生變化就返回給訂閱者給

H5新增屬性 canvas audio video output embed article aside footer header meter section datalist

css3 新增屬性

僞元素和僞類元素之間的區別

同：都是給選擇器添加不同的效果

區別：

僞類選擇元素基於的是當前元素處於的狀態，或者說元素當前所具有的特性，而不是元素的id、class、屬性等靜態的標誌。由於狀態是動態變化的，所以一個元素達到一個特定狀態時，它可能得到一個僞類的樣式；當狀態改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基於文檔之外的抽象，所以叫僞類。

與僞類針對特殊狀態的元素不同的是，僞元素是對元素中的特定內容進行操作，它所操作的層次比僞類更深了一層，也因此它的動態性比僞類要低得多。實際上，設計僞元素的目的就是去選取諸如元素內容第一個字（母）、第一行，選取某些內容前面或後面這種普通的選擇器無法完成的工作。它控制的內容實際上和元素是相同的，但是它本身只是基於元素的抽象，並不存在於文檔中，所以叫僞元素。

箭頭向左的三角形
span{
display:block;
width:0;
height:0;
border:10px solid transparent;
border-right-color:red;
}

一、高度塌陷：清除浮動：

1.額外標籤法：

2.老司機法：
overflow:hidden;
3.after僞元素法：
.clearafix:fter{
contant:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
4.雙僞元素法：
.clearfix:before,.clearfix:after{
contant:"";
display:block;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}

二、元素居中（水平，垂直）：

1.水平/垂直：
align=“center”
valign=“middle”
2.轉換單元格法：
display:table-cell;
vertical-align:middle;
3.定位法：
a.
margin:0 auto;
b.
top:50%;
left:50%;
margin-top:-自身高度一半;
margin-left:-自身寬度一半;
c.
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
4.彈性盒法：
display:flex;
justify-contant:center;
align-items:center;

localStroage,sessionStroage,cookie區別

Cookie

（1） cookie的存儲是限制大小，約4k左右，不適合存儲業務數據，尤其是數據量較大的值；
（2） cookie會每次隨http請求一起發送，浪費寬帶。
（但也有場景可能需要到（2）這個特性：比如在項目中你可能需要訪問很多接口，而且爲了保證安全，你需要傳一個標識讓你的後端知道這次訪問是你發出的，而不是別人的網站發出的，防止非本項目的人隨意調接口，你可以在cookie中保存一個標識，項目每次發http請求都會將標識傳到後臺認證）

localstroage：

（1） 存儲數據量大；
（2） 不會隨http請求一起發送；
（3） 在瀏覽器的隱私模式下不能讀取；
（4） 不能被爬蟲讀取

localStorage與sessionStroage區別

（1）localStroage是將信息存儲在硬件設備中的，關閉瀏覽器或網頁也不會消失；
（2）sessionStroage的有效期只是網頁在瀏覽器打開到關閉的時間段
（3）sessionStroage不能在不同的瀏覽器窗口共享，即使是同一個頁面；localStroage在所有的同源窗口中都是共享的；cookie也是在所有的同源窗口中共享的；

深拷貝（數組：for+copy,splice,concat,對象：jsonparse,json.stringify，遞歸）與淺拷貝(object.assign,解構賦值)

檢測數據類型 typeof instanceof constrcutor(這個最好，能夠區分數組和對象，前面兩個認爲數組和null都是object)

數據結構 數組 棧 （先進後出）堆 樹 隊列（先進先出）

原型鏈

閉包 有權訪問另一個函數作用域變量的函數 作用：保護變量 能夠在外部訪問，卻不能修改變量 用全局變成局部

遞歸 函數自己調用自己，會有終止條件，不會陷入死循環

http協議

微任務，宏任務 js是單線程語言，從上往下執行，就不好，需要異步，宏任務相當於銀行排隊辦理業務，上一個沒有完，下一個無法執行，微任務就相當於promise,在宏任務裏面添加其他的任務，只有這些任務完成，纔會往下一個宏任務走

三次握手，四次揮手

數組

(concat()連接兩個或更多的數組，並返回結果。
join()把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。
pop()刪除並返回數組的最後一個元素
push()向數組的末尾添加一個或更多元素，並返回新的長度。
reverse()顛倒數組中元素的順序。
shift()刪除並返回數組的第一個元素
slice()從某個已有的數組返回選定的元素
sort()對數組的元素進行排序
splice()刪除元素，並向數組添加新元素。
toString()把數組轉換爲字符串，並返回結果。
toLocaleString()把數組轉換爲本地數組，並返回結果。
unshift()向數組的開頭添加一個或更多元素，並返回新的長度。

字符串方法

charAT（index） 通過索引找字符
charCodeAt（index） 通過索引找到字符的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數。

方法 charCodeAt() 與 charAt() 方法執行的操作相似，只不過前者返回的是位於指定位置的字符的編碼，而後者返回的是字符子串。

indexOf（） 從前往後找，找到返回內容的索引，找不到返回-1；

lastIndexOf（） 從後往前找，找到返回內容的索引，找不到返回-1；

slice（n，m） 從索引n 查找到索引m 但不包括m，slice可以取負值

substring（n，m） 從索引n 查找到索引m ，但不包括m， 不可以取負值

substr（n，m） 從索引n開始截取m 個

split（切割形式） 把一個字符串分割成字符串數組。

toUpperCase（） 轉大寫字母

toLowerCase（） 轉小寫字母

3.Math對象

Math.floor（） 向下取整

Math.ceil（） 向上取整

Math.random（） 取0-1之間的隨機小數

Math.round（） 四捨五入

Math.abs（） 取絕對值

Math.pow（x，y） x的y次冪
Math.sqrt（） 開平方

Math.max（） 取最大值

Math.min（） 取最小值

4.Date日期對象

new Date（） 創建一個日期對象

getFullYear（） 返回年份

getMonth（） 返回月份數（0-11），想要得到幾月，需要加一

getDay（） 返回一週的第幾天（0-6），想要得到星期幾，需要加一

getDate（） 返回日

getHours（） 返回時

getMinutes（） 返回分

getSeconds（） 返回秒

getTime（） 返回從1970年1月1日00：00到現在的毫秒數（格林尼治時間），也就是時間戳

setYear(yearInt) 設置年份.2位數或4位數

setFullYear(yearInt) 設置年份.4位數

setMonth(monthInt) 設置月份(0-11)

setDate(dateInt) 設置日(1-31)

setHours(hourInt) 設置小時數(0-23)

setMinutes(minInt) 設置分鐘數(0-59)

setSeconds(secInt) 設置秒數(0-59)

setMilliseconds(milliInt) 設置毫秒(0-999)

事件委託 利用事件冒泡，只需要指定一個事件處理程序，就可以處理同一個事件。而且每個函數都是一個對象，對象存儲在堆裏面，對象越多，性能越差

阻止默認行爲 e.preventDefault

造成內存泄漏 閉包，拷貝，意外的全局變量，沒有清楚的DOM元素

改變this指向

call apply bind 總結
相同點： 都可以改變函數內部的this指向
不同點 ：
1.call和apply會調用函數,並且改變函數內部this的指向
2.call和apply傳遞的參數不一樣,call傳遞參數a,2,3…形式 , apply必須數組形式
3.bind 不會調用函數,可以改變函數內部this指向
主要應用場景
1.call經常做繼承
2.apply經常跟數組有關係,比如藉助於數學對象實現數組最大值最小值
3.bind不調用函數,但是還想改變this指向,比如改變定時器內部的this指向
vue 傳參

路由傳參

查詢參數：path？key=val&key=val 獲取 this.$route.query

動態路徑 ：path:參數內容（值） 獲取 this.$route.params

組件傳參

父傳子 props：[屬性] 有駝峯命名法時用-隔開 比如 user-name

子到父

1.父組件定義一個函數，接受子組件傳來的值 this.$event接受傳來的值

2.將方法以自定義事件傳給子組件

3.子組件觸發調用這個方法 this.$emit(“事件名”，“值”)

任意組件

1.創建中央事件總線bus （window.bus=new Vue()）

2.發送消息的組件 bus.$emit(“type”,內容)

3.接消息的組件 bus.$on(“type”,回調函數)

cookie設置有效路徑

http請求頭

webpack

請求攔截

箭頭函數 沒有prototype,所以沒有this指向，箭頭函數的 this 指向在定義的時候繼承自外層第一個普通函數的this，不能直接修改箭頭函數的 this 指向，去修改被繼承的普通函數的 this 指向，然後箭頭函數的 this 指向也會跟着改變，箭頭函數外層沒有普通函數，嚴格模式和非嚴格模式下它的 this 都會指向 window(全局對象)，

vuex

vue全家桶 vuex,router,vue-cli,vue-resource

router route一條路由，routes一組路由，router管理路由

自定義組件 父組件通過props傳遞數據給子組件,子組件接收，並將父組件方法注入到子組件，子組件通過$emit調用

匿名函數

跨域 jsonp,node.js做中間件代理跨域，cros

什麼情況會出現內存泄漏

react

生命週期: 分3 掛載時 更新時 卸載時 api 錯誤處理

掛載時 :

	1.constructor
	2.render
	3.componentDidMount

##更新:
1. render
2. componentDidUpdate

##卸載
1.componentWillUnmount

#錯誤處理
1.static getDerivedStateFromError
2.componentDidCatch

react中key的正確使用方式

key 可以在DOM中的某些元素被增加刪的時候幫助react識別那些元素髮生了變化因此你應當給數組中的每一個元素賦予一個確定的標識。
react利用key來識別組件，它是一種身份標識標識
index item 不要用index作爲組件的key