"面试题1.0不完整版包含了关于JavaScript、前端开发、Vue.js以及HTML5等领域的常见面试问题,如闭包、跨域、CSS布局、浮动清除、性能优化、Vue组件通信和数组方法等。"
1. **闭包**:闭包是一个能够访问并操作函数内部变量的函数,即使该函数已经执行完毕。闭包中的变量不会被垃圾回收机制回收,这使得它们可以用于变量持久化、函数防抖和函数节流等场景。例如,你可以创建一个立即执行函数表达式(IIFE)来创建一个闭包:
```javascript
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
};
}
const counter = outer();
counter(); // 输出 1
counter(); // 输出 2
```
2. **跨域**:浏览器的同源策略限制了不同源(协议、域名、端口)之间的交互,这是为了安全考虑。解决跨域的方法包括:
- JSONP:利用`<script>`标签的跨域特性,通过动态插入带有回调函数名的脚本,服务端返回JSON数据包裹在回调函数中。
- CORS(Cross-Origin Resource Sharing):需要后端服务器配置允许跨域头(Access-Control-Allow-Origin)。
- Vue.js中的代理:在`vue.config.js`中配置devServer的proxy属性,将请求转发到指定代理地址。
3. **垂直居中**:CSS中实现元素垂直居中的方法:
- 弹性布局(Flexbox):设置`align-items: center`。
- 行高对齐:`line-height`等于元素高度,适用于单行文本。
- 绝对定位:`position: absolute; top: 50%; margin-top: -50%;` 或 `transform: translate(-50%, -50%);`。
4. **清除浮动**:处理因浮动元素引起的父元素高度塌陷:
- 添加空标签并设置`clear: both`。
- 使用伪元素,如`::before`或`::after`并添加`clear: both`。
- 父元素使用`overflow: hidden`,但需配合`zoom: 1`以触发hasLayout机制。
- 给父元素设定固定高度。
5. **性能优化**:常见的前端性能优化手段:
- 减少HTTP请求:合并CSS和JS文件,压缩图片。
- 懒加载:延迟加载非首屏图片和路由。
- 使用CDN(内容分发网络)加载外部资源。
- 组件和逻辑复用,减少冗余代码。
- 函数防抖和节流控制执行频率,节省资源。
- 减少全局变量,遵循HTML语义化。
6. **Vue中的传值方法**:
- 父组件向子组件传递数据:使用`props`。
- 子组件向父组件传递数据:通过触发`$emit`事件。
- 非父子组件间的通信:使用`eventBus`(事件总线)或Vuex状态管理库。
7. **数组的常用方法**:JavaScript中的数组方法:
- `filter`:根据条件过滤数组元素。
- `map`:映射数组元素,创建新数组。
- `sort`:对数组进行排序。
- `splice`:在数组中添加、删除元素。
- `slice`:返回数组的一部分。
- `push`、`shift`、`unshift`、`pop`:分别用于在数组末尾添加元素、删除/添加首位元素。
- `indexOf`:查找元素索引。
- `concat`:合并数组。
- `join`:将数组元素连接成字符串。
8. **HTML5的新特性**:
- 语义化标签:如`<nav>`、`<header>`、`<footer>`、`<aside>`、`<section>`,增强网页结构意义。
- Canvas和SVG:用于绘制图形。
- Web Storage(localStorage和sessionStorage):替代cookies存储数据。
- Web Workers:后台处理任务,提高性能。
- Geolocation:获取用户地理位置信息。
- WebSocket:实现双向通信,建立持久连接。
这些知识点是前端开发面试中常见的考察点,掌握它们有助于提升你的技术水平和面试表现。