十道前端面试题（3），十道经典面试题

十道前端面试题（3），十道经典面试题

---

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. == 和 === 的区别

• 如果两个值的数据类型相同，再比较其值，相同返回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. 写一下不知道宽高元素垂直水平居中方法

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

---

5. 301和302的区别

点击查看更多http状态码 >>

---

6. git命令（点击查看）>>

---

7. JS基本数据类型

---

8.css选择器的优先级

css优先级高低排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

---

9. 行内元素，块级元素区别

---

10. css伪元素有哪些

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

文章最后发布于: 2019-10-22 14:22:59