前端笔试题：HTML+CSS, JS, Vue知识点详解

"亚信公司的前端笔试题目，涵盖了HTML+CSS、JavaScript以及Vue.js的相关知识，旨在测试应试者的基础技能和理解深度。" 一、HTML+CSS部分 1. 左侧定宽200px，右侧自适应布局：这种布局可以通过以下三种方式实现： - 使用浮动布局：左侧元素`float:left; width:200px;`，右侧元素`float:right;` - 使用Flexbox：父容器设置`display:flex;`，左侧元素`flex:0 0 200px;`，右侧元素`flex:1;` - 使用CSS Grid：父容器`display:grid; grid-template-columns:200px auto;` 2. link与@import的区别： - link是HTML标签，用于链接外部资源，如CSS文件，同时支持页面加载时并行下载，有利于性能优化。 - @import是CSS中的导入语句，用于在CSS内部引入其他CSS文件，但会阻塞页面渲染，直到所有CSS资源加载完成。 3. 垂直居中实现： - 单行文字：`line-height: 高度值;` - 多行文字：`display:flex; align-items:center;` - div居中：`position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);` 4. 实现一个三角形： 可以通过CSS的边框塌陷特性，只设置某个方向的边框来实现。例如： ```css .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } ``` 二、JS部分 1. Array.prototype.map方法：遍历数组中的每个元素，执行提供的函数并返回一个新的数组，新数组的元素是原数组元素经过函数处理后的结果。 2. ES6新增的数组方法：例如`includes()`, `find()`, `findIndex()`, `fill()`, `flat()`, `entries()`, `keys()`, `values()`等。 3. 冒泡排序示例： ```javascript function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len - 1; i++) { for (var j = 0; j < len - i - 1; j++) { if (arr[j] > arr[j + 1]) { [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; } } } return arr; } ``` 4. 字符串转换：`str.replace(/-/g, "")` 5. 数组拷贝：`let newArray = oldArray.slice(0)` 或 `let newArray = [...oldArray]` 6. 跨域方式及原理：JSONP、CORS、IFrame、WebSocket等，原理涉及浏览器同源策略的限制和绕过方法。 7. for循环与setTimeout：由于异步执行，console.log会输出5个5，因为setTimeout回调在循环结束后才执行。 三、Vue部分 1. Vue生命周期：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。可以操作DOM的周期有：mounted、updated、beforeDestroy。 2. 双向数据绑定：通过Object.defineProperty重新定义数据属性的getter和setter，实现视图到模型和模型到视图的同步更新。 3. Virtual DOM算法：主要包括Diff、Patch两个步骤，用于比较新旧虚拟DOM树，找出最小更新操作以优化性能。 4. Vue中axios跨域：通过配置Vue的proxyTable或使用axios的baseURL解决。 5. 高德地图信息窗体：可以使用ECharts或其他图表库嵌入图表，结合地图API处理交互事件。 6. Vue.js的template编译：模板被编译为渲染函数，涉及指令解析、插值处理、计算属性绑定等多个步骤。 7. Vuex的实现原理：通过观察者模式和中央仓库，实现组件间状态的共享和管理，包含actions、mutations、getters等概念。