前端面试——那些年踩过的炸弹！

前段时间面试(包括阿里巴巴的电话面试)，遇到过一些试题，且面试中出现机率较高的提问/笔试，有些答的不是很好挂掉了，今天终于有时间整理出来分享给大家，内容主要分为两部分：面试中遇到的、在复习过程中看到认为值得加深巩固的; 如有理解的错误或不足之处，欢迎留言纠错。
在这里插入图片描述
前端面试——那些年踩过的炸弹！
Javascript篇

1.请将下列b函数进行修改，保证每次调用a都能+1（考闭包）:

function b(){
	var a=1;
};
function b(){
	var a=1;
	return ()=>{
		a++;
		return a;
	}
};
let c = b();
c(); //2
c(); //3
c(); //4

2.js有哪些基本数据类型：

ECMAScript 标准定义有7种数据类型：

Boolean
Null
Undefined
Number
String
Symbol :（ECMAScript 6 新定义，Symbol 生成一个全局唯一、表示独一无二的值）
Object :（Array、Function、Object）
3.用js将 386485473.88 转换为 386,485,473.88（千位分割符）：

var separator=(num)=>{
	if(!num){
		return '0.00';
	};
	let str = parseFloat(num).toFixed(2);
	return str && str
		.toString()
		.replace(/(d)(?=(d{3})+.)/g, function($0, $1) {
			return $1 + ",";
		});
}
separator(386485473.88) //"386,485,473.88"

4.js的 for 跟for in 循环它们之间的区别？

遍历数组时的异同： for循环数组下标的typeof类型:number, for in 循环数组下标的typeof类型:string

var southSu = ['前端攻城小牛','Q群','864305860','男'];
for(var i=0;i<southSu.length;i++){
	console.log(typeof i); //number
	console.log(southSu[i]);//前端攻城小牛 , Q群 , 864305860 , 男
}
var arr = ['前端攻城小牛','Q群','864305860','男','专业过硬'];
for(var k in arr){
	console.log(typeof k);//string
	console.log(arr[k]);// 前端攻城小牛 , Q群 , 864305860 , 男 , 专业过硬
}

遍历对象时的异同：for循环无法用于循环对象，获取不到obj.length; for in 循环遍历对象的属性时，原型链上的所有属性都将被访问，解决方案：使用hasOwnProperty方法过滤或Object.keys会返回自身可枚举属性组成的数组。

Object.prototype.test = '原型链上的属性';
var southSu = {name:'前端攻城小牛',address:'Q群',age:864305860,sex:'男',height:176};
for(var i=0;i<southSu.length;i++){
	console.log(typeof i); //空
	console.log(southSu[i]);//空
}
for(var k in southSu){
	console.log(typeof k);//string
	console.log(southSu[k]);// 前端攻城小牛 , Q群 , 864305860 , 男 , 176 , 原型链上的属性
}

5.给table表格中的每个td绑定事件，td数量为1000+，写一下你的思路(事件委托题)：

<body class="container">
	<table id="table">
		<tr><td>1</td><td>3</td><td>3</td><td>4</td><td>5</td></tr>
		<tr><td>1</td><td>3</td><td>3</td><td>4</td><td>5</td></tr>
		<tr><td>1</td><td>3</td><td>3</td><td>4</td><td>5</td></tr>
		…………
	</table>
<script>
	let table =document.querySelector("#table");
	table.addEventListener("click",(e)=>{
		let {nodeName} = e.target;
		if(nodeName.toUpperCase() === "TD"){
			console.log(e.target);//<td>N</td>
		}
	},false);
</script>
</body>

6、js把一串字符串去重，列出你的思路（两种以上）：

<script>
	let str = "12qwe345671dsfa233dsf9876ds243dsaljhkjfzxcxzvdsf";
	let array = str.split("");
	//方案一：
	array = [...new Set(array)].join("");
	array = ((a)=>[...new Set(a)])(array).join("");
	console.log(array);//12qwe34567dsfa98ljhkzxcv 只能过滤，不会统计
	//方案二：
	function unique (arr) {
		const seen = new Map()
		return (arr.filter((a) => !seen.has(a) && seen.set(a, 1))).join("");
	}
	console.log(unique(array)) // 12qwe34567dsfa98ljhkzxcv
	//方案三：
	function unique (arr) {
		let arrs=[];
		var news_arr = arr.sort();//排序能减少一次循环
		for(var i=0;i<news_arr.length;i++){
				if(news_arr[i] == news_arr[i+1] && news_arr[i]!= news_arr[i-1] ){
						arrs.push(arr[i]);
				};
 
		};
		return arrs.join("");
	}
	console.log(unique(array)) // 12qwe34567dsfa98ljhkzxcv
	//方案四：
	function unique (arr) {
		let obj={};
		for(var i=0;i<arr.length;i++){
			let key = arr[i];
			if(!obj[key] ){
					obj[key]=1;
			}else{
				obj[key]+=1;
			}
 
		};
		return obj;
	}
	console.log(unique(array)) // object 对应每个key以及它重复的次数 
</script>

你对重绘、重排的理解？

首先网页数次渲染生成时，这个可称为重排;

修改DOM、样式表、用户事件或行为（鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）这些都会导致页面重新渲染，那么重新渲染，就需要重新生成布局和重新绘制节点，前者叫做"重排"，后者"重绘";

减少或集中对页面的操作，即多次操作集中在一起执行;

总之可以简单总结为：重绘不一定会重排，但重排必然为会重绘。

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。

前端面试——那些年踩过的炸弹！

猜你喜欢