十道前端面試題（3）

1. 手寫一下深拷貝
2. == 和 === 的區別
3. 寫一個方法提取一下search裏面的參數
4. 寫一下不知道寬高元素垂直水平居中方法
5. 301和302的區別
6. git命令
7. JS基本數據類型
8. css選擇器的優先級
9. 行內元素，塊級元素區別
10. css僞元素有哪些

---

1. 手寫一下深拷貝

1. 淺拷貝： 只是複製了對像的引用地址，兩個對象指向同一個地址，其中一個改變，另一個也跟着改變。

2. 深拷貝：指改變一個對象的屬性，另一個對象不會改變

實現深拷貝：

1. 創建一個新的對對象，循環遞歸實現深拷貝

點擊查看判斷一個引用類型是數組還是對象的方法 >>

function deepClone(obj){
	let newObj;
	// 先判斷數據類型
	if(obj.constructor === Array) {    // 數組
		newObj = [];
		for(const item of obj) {
			newObj.push(item);
		}
	} else if(obj.constructor === Object) {    // 對象
		newObj = {};
		for(let key in obj){
			newObj[key] = deepClone(obj[key]);
		}
	} else {
		return obj;
	}
	return newObj;
}

2. 使用JSON.parse(JSON.stringify(obj))的方法實現深拷貝

function deepClone(obj){
	return JSON.parse(JSON.stringify(obj));
}

---

2. == 和 === 的區別

1. ==比較過程

• 如果兩個值的數據類型相同，再比較其值，相同返回true，不同返回false
• 如果兩個值的數據類型不同，進行數據類型轉換，轉換規則如下：

(1). 如果一個是null，一個是undefined，二者相等
(2). 如果一個是字符串一個是數值，把字符串轉換爲數值再比較

null == undefined;   	 // true
'1' == 1;    			 // true
'true' == true;      	 // false

2. === 比較過程

• 如果二者數據類型不同直接返回false

使用 === 返回true時，說明比較的兩個數據不僅類型相同，而且值也相等

使用 == 返回true時，二者數據類型不一定相同，但是轉換爲相同類型後的值一定相等

⚠️ NaN不等於任何值，包括本身

---

3. 寫一個方法提取一下search裏面的參數

?id=1&num=123

正則表達式獲取指定參數

function getUrlParam(name, search){
    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    let r = search.substr(1).match(reg);
    if (r!=null) {
   		 return unescape(r[2]);
    }
 return null;
}

getUrlParam('num', '?id=1&num=123');    // 123

---

4. 寫一下不知道寬高元素垂直水平居中方法

1. display:table-cell
   組合使用display:table-cell和vertical-align、text-align，使父元素內的所有行內元素水平垂直居中（內部div設置display:inline-block即可）。

2. transform:translate(-50%,-50%)

3. 彈性佈局

display:flex;
justify-content:center;
align-items:center;

---

5. 301和302的區別

1. 301是永久重定向。表示請求的資源已經被永久移動到新的URI，返回新URI，並且瀏覽器會自動定向到新的URI，今後的任何新請求，應使用新的URI
2. 臨時移動。與301類似，資源被臨時移動，繼續使用原始URI

點擊查看更多http狀態碼 >>

---

6. git命令（點擊查看）>>

---

7. JS基本數據類型

1. String
2. Number
3. Boolean
4. null
5. undefined

---

8.css選擇器的優先級

css優先級高低排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性

---

9. 行內元素，塊級元素區別

1. 塊級元素會獨佔一行，其寬度自動填滿其父元素寬度行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裏，知道一行排不下，纔會換行，其寬度隨元素的內容而變化

2. 一般情況下，塊級元素可以設置width,height屬性，行內元素設置width, height無效(⚠️：塊級元素即使設置了寬度，仍然是獨佔一行的)

3. 塊級元素可以設置margin和 padding. 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right都產生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。（水平方向有效，豎直方向無效）

---

10. css僞元素有哪些

a:link {color: #FF0000}		/* 未訪問的鏈接 */
a:visited {color: #00FF00}	/* 已訪問的鏈接 */
a:hover {color: #FF00FF}	/* 鼠標移動到鏈接上 */
a:active {color: #0000FF}	/* 選定的鏈接 */

1. :active 向被激活的元素添加樣式。
2. :focus 向擁有鍵盤輸入焦點的元素添加樣式。
3. :hover 當鼠標懸浮在元素上方時，向元素添加樣式。
4. :link 向未被訪問的鏈接添加樣式。
5. :visited 向已被訪問的鏈接添加樣式。
6. :first-child向元素的第一個子元素添加樣式。
7. :lang 向帶有指定 lang 屬性的元素添加樣式。
8. :first-letter 向文本的第一個字母添加特殊樣式。
9. :first-line 向文本的首行添加特殊樣式。
10. :before 在元素之前添加內容。
11. :after 在元素之後添加內容。