前端常见面试题及答案（实战版）.docxVIP

前端常见面试题及答案（实战版）

一、HTML/CSS部分

问：什么是语义化HTML？实际开发中为什么要做？

答：语义化就是用有明确含义的标签（比如header、nav、main、article）代替全用div，让HTML结构本身能表达内容含义。

实际开发里主要有两个好处：一是维护方便，比如新人接手项目，看标签就知道哪是导航、哪是主体内容，不用猜class名；二是SEO友好，搜索引擎能通过语义标签更快识别页面核心内容，比如article里的内容会被优先抓取，另外屏幕阅读器也依赖语义标签做无障碍访问。

问：CSS盒模型分哪两种？实际开发中常用哪种？怎么设置？

答：分标准盒模型和怪异盒模型（IE盒模型）。

标准盒模型：width/height只算内容区（content），padding和border会撑大元素；怪异盒模型：width/height包含content+padding+border，元素整体尺寸不会被padding/border影响。

实际开发基本都用怪异盒模型，因为不用手动计算“内容区宽度=总宽度-padding-border”，比如做卡片组件时，加padding不会让卡片超出预期宽度。设置方式是给元素加box-sizing:border-box;，一般会在全局样式里写*{box-sizing:border-box;}统一处理。

问：Flex布局里，flex:1具体代表什么？

答：flex是flex-grow、flex-shrink、flex-basis的简写，flex:1相当于flex:110%。

实际用的时候，比如做两栏布局，侧边栏固定宽度，主内容区写flex:1，它就会自动占满剩余空间。这里要注意，flex-basis设为0%时，会完全按flex-grow分配剩余空间；如果没设（默认auto），会先考虑元素自身内容宽度，再分剩余空间，容易出布局偏差，所以写flex:1比单独调三个属性更稳妥。

二、JavaScript部分

问：闭包是什么？实际项目里在哪用过？

答：闭包简单说就是“函数套函数，内层函数能访问外层函数的变量，即使外层函数已经执行完”。

实际项目里用得还挺多，比如封装防抖节流函数（比如搜索框输入防抖，用闭包存定时器id，避免每次触发都重新创建）；还有封装私有变量，比如写工具类时，不想让某些变量被外部修改，就用闭包包起来，只暴露方法。举个防抖的例子：

functiondebounce(fn,delay){

lettimer=null;//闭包保存timer，不会每次调用都重置

returnfunction(...args){

clearTimeout(timer);

timer=setTimeout(()=fn.apply(this,args),delay);

};

}

//搜索框输入时用这个防抖函数，避免频繁发请求

input.addEventListener(input,debounce(fetchData,300));

问：Promise和async/await的区别？实际开发中怎么选？

答：async/await是Promise的语法糖，本质还是基于Promise。

区别主要在写法和错误处理：Promise用.then()链式调用，嵌套多了会有“回调地狱”（比如先调接口A，再用A的结果调接口B，再用B的结果调接口C，就会.then套.then）；async/await能写成同步一样的代码，更易读。

实际开发里优先用async/await，除非是很简单的单步异步（比如只调一个接口）。但要注意，async函数里的错误不能用try/catch的话，会变成未捕获错误，所以一般会包try/catch，比如：

asyncfunctiongetInfo(){

try{

constresA=awaitfetch(/api/A);

constdataA=awaitresA.json();

constresB=awaitfetch(`/api/B?uid=${dataA.uid}`);

constdataB=awaitresB.json();

returndataB;

}catch(err){

console.error(请求出错：,err);

//这里还能加错误提示，比如弹Toast

}

}

问：数组的forEach和map有什么区别？什么时候用map，什么时候用forEac