前段时间在阿里巴巴的电话面试，遇到过一些试题，且面试中出现机率较高的提问/笔试，有些答的不是很好挂掉了，今天终于有时间整理出来分享给大家，内容主要分为两部分：面试中遇到的、在复习过程中看到认为值得加深巩固的; 如有理解的错误或不足之处，欢迎留言纠错。
前端面试——那些年踩过的炸弹！
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，快速升职加薪，走上人生巅峰。
网友评论