前言
现在开发这个行业太难混了吧,对于我这中大学没毕业,实习经验不到一年的菜鸟太不友好了,前一段时间去面试,当时是约的两点的面试,去了之后,人都傻了那么多人排队面试,数了数大概有三十号人,大多是前端和后端的岗位,当时去了hr给我们安排座位,然后发下来了笔试题,手写30到面试题,人都麻了,有人觉得不靠谱还当场就走了,只有我还抱有一丝希望,坚持写下来了,面试题我偷偷拍了照片分享给在找前端工作的伙计 ,为了及时复盘我总结下来了,答案部分来源于chatgpt
html部分
1.请分别列举一些块级元素和内联元素
块级元素: div、ul、li、table、p、h1等
内联元素: span a img strong em input label
2.请分别说明head中base, meta这两个标签的作用。
base :标签用于为页面上所有的链接设置默认URL地址或目标target。当HTML5文档使用了相对路径时，浏览器会用base标签指定的URL进行补全
meta :用于定义网页的一些元信息
3.请写出空格、小于号、大于号、和号（&）的字符实体名称。
| 描述 | 实体名称 |
|---|---|
| 空格 |  ； |
| 小于号 | <； |
| 大于号 | &rt； |
| 和号 | &； |
4.请列举一些input标签的type属性值
- 单行输入框< input type=“text”/>
- 密码输入框< input type=" password"/>
- 单选按钮< input type=" radio"/>
- 复选框< input type=" checkbox"/>
- 重置按钮< input type=" reset"/>
- 图像形式的提交按钮< input type=" image"/>
- 普通按钮< input type=" button"/>
5.请说明如何获取屏幕和视口的宽高。
- 视口:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
//or
document.documentElement.clientHeight
document.documentElement.clientWidth
//or
document.body.clientHeight
document.body.clientWidth
- 屏幕:
//包含windows任务栏的整个屏幕宽
window.screen.width
window.screen.height
//整个浏览器的宽度
window.outerWidth
window.outerHeight
6.请说明如何用canvas绘制一个红色的矩形。
首先，我们创建一个canvas元素，并为它设置一个id。然后，我们使用JavaScript获取该元素，并将其上下文设置为2D。接下来，我们将颜色设置为红色，并使用fillRect()方法在画布上绘制一个矩形。该方法接受四个参数：x轴坐标，y轴坐标，宽度和高度。在这个例子中，我们将矩形绘制在画布的中心，宽度和高度都是100像素。
<!DOCTYPE html>
<html>
<head>
<title>Canvas Demo</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(50, 50, 100, 100);
</script>
</body>
</html>
7.请说明如何实现拖放
默认情况下，网页中的图像、链接和文本是可以拖动的，而其余的元素若想要被拖动，必须将 draggable 属性设置为 true，这是HTML5规定的新属性，用于设置元素是否能被拖动。因此，图像、链接、文本的 draggable 属性默认为 true，其余元素的 draggable 属性默认为 false，若想要实现元素的拖放，则首先应设置 draggable 属性为 true
8.请说明localStorage和sessionStorage的区别。
localStorage和sessionStorage都是HTML5中新增的Web Storage API，它们可以在浏览器端存储数据。它们之间的区别如下：
- 生命周期
localStorage的生命周期是永久的，即使关闭了浏览器窗口或者电脑重启，存储在localStorage中的数据仍然存在。而sessionStorage的生命周期是会话级别的，即在当前会话（窗口）关闭时，存储在sessionStorage中的数据会被清除。 - 存储大小
localStorage和sessionStorage的存储大小都是5MB（不同浏览器可能会有所差异），但是localStorage的存储大小可以被浏览器设置为更大的值，而sessionStorage则不能。 - 共享性
localStorage存储的数据可以跨浏览器窗口和标签页共享，而sessionStorage存储的数据仅在当前窗口或标签页中共享。 - 存储方式
localStorage和sessionStorage的存储方式都是键值对（Key-Value）形式。 总之，localStorage适用于需要永久保存的数据，而sessionStorage适用于需要在单个会话期间共享的数据。它们都是在客户端存储数据的一种方式，不会像Cookie一样在每个HTTP请求中发送到服务端。
9.请说明cookie和session的区别。
（1）存储位置不同 cookie数据保存在客户端，session数据保存在服务器端。
（2）生命周期的不同 cookie的生命周期是累计的，从创建时就开始计时，30min后cookie生命周期结束 session的生命周期是间隔的，从创建时开始计时如在30min内没有访问session，那么session生命周期就被销毁
（3）存储数据大小限制不同 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
（4）数据的安全性不同 cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。
CSS部分
1.请说明四种选择器和优先级
选择器：元素选择器、ID选择器、类选择器和属性选择器。
优先级：
- !important声明的样式具有最高优先级
- 在样式表中后面出现的样式具有更高的优先级
- 如果选择器的权重相同，则后面出现的样式具有更高的优先级
- ID选择器的权重最高，其次是类选择器和属性选择器，元素选择器的权重最低
- 如果有多个选择器应用于同一个元素，则优先级高的选择器的样式将覆盖优先级低的选择器的样式。
2.请简单画出盒模型
3.请分别说明position、float、flex。
（1）定位布局 position relative 相对定位 定位元素 1）相对的是元素原先的位置 2）不设置偏移量，元素不会发生任何变化 3）不脱离文档流（还是占据原先的位置），宽度默认100% 4）不会改变元素的性质 5）覆盖在其他元素上（z-index），相对定位会提升元素的层级
absolute 绝对定位 定位元素 1）相对的是距离它最近的开起定位的祖先元素的位置，如果没有祖先定位元素，（相对于根元素） 2）不设置偏移量，元素的位置不会发生变化 3）脱离文档流（不占据原先的位置） 4）绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开 5）绝对定位会提升元素的层级
fixed 固定定位 定位元素（也是一种绝对定位，大部分特点和绝对定位一样） 1）相对于浏览器的视口 2）脱离文档流 3）不会随着浏览器滚动而滚动
sticky 粘滞定位 定位元素（与相对定位特点一致） 1）使用top、right、bottom、left设置一个过渡点，当超过这个过度点的时候，就会体现fixed固定在页面上 2）不脱离文档流，仍然保留元素原本在文档流中的位置
（2）浮动布局 （float） left 向左浮动 right 向右浮动 none 不浮动 inherit 不浮动继承父元素 （3）弹性布局（flex） flex-direction 设置主轴的方向 flex-wrap 设置子元素是否换行 justify-content 主轴上子元素的排列方式 align-items 控制伸缩盒子在交叉轴的对齐方式（单行） align-content 多轴排列在交叉轴对齐方式（多行）
4.请分别说明如何实现“水平居中”和“垂直居中”。
（1）水平居中 若是行内元素, 给其父元素设置 text-align:center, 若是块级元素, 该元素设置 margin:0 auto 使用flex 布局, 子元素设置如下{display: flex;justify-content: center;} （2）垂直居中 若元素是单行文本, 则可设置 line-height 等于父元素高度 在想要垂直居中的父元素上设置display: flex; align-items: center 行内块元素统一设置vertical-align: middle，
js部分
1.请写出字符串的查找索引、替换、分割、截取的方法名。
查找索引:
1. indexOf() //查找某个字符出串,有则返回匹配到得位置,无则返回-1
let str='我叫张三'
consloe.log(str.indexOf('三')) //返回下标 3
2. includes() //该方法用于判断字符串是否包含指定得字符串,有:ture,无:false
let str='我叫张三'
consloe.log(str.indexOf('三')) // true
替换:
replace() //替换指定字符串，并返回一个新的字符串
let str='我叫张三'
console.log(str.replace('三','四')) //我叫张四
分割
split() //方法用于把一个字符串分割成一个字符串数组
let str='张三,李四,王五'
str.split(',') // (3) ['张三', '李四', '王五']
截取
slice(开始位置,结束位置) //方法用于提取字符串的某个部分，并以新的字符串返回被提取的部分，不改变原字符串。结束位置不填写值时表示到字符串结尾处，负数则代表从结尾开始
2.请写出数组的拼接、添加、过滤、查找索引、截取、遍历的方法名。
- 拼接
concat :将两个或多个数组合并为一个数组，返回合并后的数组。不会改变原始数组。
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]
- 添加
push() :将一个或多个元素添加到数组的末尾，返回修改后的数组
let arr=[1,2,3,4]
arr.push(5,6)
console.log(arr) //1,2,3,4,5,6
- 过滤
filter():创建一个新数组，包含原数组中所有通过指定函数测试的元素。
let arr=[1,2,3,4,5]
let abc=arr.filter(item=>item % 2===0)
console.log(arr) // 2,4
- 查找索引
indexOf():返回数组中第一个与指定值相等的元素的索引，如果找不到返回-1。
let arr=[1,2,3,4,5]
consloe.log(arr.indexOf(3)) //2
- 截取
slice() :返回一个新的数组，包含从开始到结束（不包括结束）选择的数组的元素。不会修改原数组。
let arr=[1,2,3,4,5]
let sl=arr.slice(1,4)
consloe.log(arr)
- 遍历
forEach():对数组中的每个元素执行一次指定的函数。
let arr=[1,2,3,4,5]
arr.forEach(item=>{ console.log( arr)}) //1,2,3,4,5
map():创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
let arr=[1,2,3,4,5,6]
let abc=arr.map(item=>item * 2)
consloe.log(abc) //2,4,6
reduce():对数组中的每个元素都执行一个指定的函数,将结果汇总为单个返回值
const arr = [1, 2, 3];
const reduced = arr.reduce((acc, item) => acc + item, 0);
console.log(reduced); // 6
for...of:遍历一个可迭代的对象
const arr = [1, 2, 3];
for(const item of arr){
consloe.log(arr)
}
3.请说明Promise的三种状态和使用Promise的优缺点。
- 三种状态
- Pending（进行中）：初始状态，既不是成功，也不是失败状态。
- Fulfilled（已成功）：意味着操作成功完成，Promise实例将返回一个结果值（resolve状态）。
- Rejected（已失败）：意味着操作失败，Promise实例将返回一个错误信息（reject状态）。
- 优点
①Promise可以解决回调地狱的问题,使得异步代码更加易度和维护
②可以同时发起多个异步请求,等待所有请求完成后在进行下一步操作,提高代码的并发性和性能
③统一错误处理：Promise提供了统一的错误处理机制，可以很好地处理异步操作中可能出现的错误。
- 缺点
①Promise只能处理一次异步操作：一旦Promise状态变为Fulfilled或Rejected，就不能再次改变状态，不能重复使用。
②Promise无法取消：一旦Promise开始执行，就无法取消执行，可能会造成资源的浪费。
③Promise不兼容低版本浏览器：Promise是ES6规范引入的新功能，低版本浏览器不支持。
vue部分
1.请分别说明created、mounted、destroyed三个生命周期。
-
created :
created生命周期是Vue组件实例被创建后调用的第一个生命周期函数，此时Vue实例的数据观测、计算属性、方法、watch事件和生命周期钩子都已经初始化完成，但是DOM元素还未被挂载到页面上，所以此时无法访问到组件的$el元素。通常在created生命周期中进行一些初始化工作，例如获取数据、事件监听等。
-
mounted :
mounted生命周期是Vue实例的el元素已经挂载到页面上，可以访问到组件的DOM元素。通常在mounted生命周期中进行一些DOM操作和外部插件的初始化工作
-
destroyed:
destroyed生命周期是Vue组件实例被销毁时调用的生命周期函数，此时Vue实例的数据观测、计算属性、方法、watch事件和生命周期钩子都已经被销毁，DOM元素也已经被从页面上移除，此时无法再访问到组件的DOM元素。通常在destroyed生命周期中进行一些清理工作，例如取消事件监听、清除定时器等
总结：
created、mounted、destroyed生命周期函数分别在Vue组件实例创建、挂载和销毁时被调用，可以用来进行一些初始化、DOM操作和清理工作，是Vue组件开发中非常重要的生命周期函数。
2.请说明computed和watch的区别。
computed
- computed是计算属性，只有在依赖的数据发生变化时才会重新计算。
- computed的返回值会被缓存起来，只有在依赖的数据发生变化时才会重新计算，否则将直接返回之前计算的结果，避免了重复计算的问题。
- computed适用于计算、过滤和处理数据的场景，例如格式化日期、排序、筛选等。
- computed可以像数据属性一样使用，通过this关键字来访问计算属性的值。
- computed不能直接修改依赖的数据，只能通过computed属性的get和set方法来实现数据的计算和修改。
watch
- watch用于监听某个数据的变化，并在数据变化时执行相应的操作。
- watch可以监听单个数据，也可以监听对象和数组的变化。
- watch监听到数据变化时，会立即执行回调函数，所以不适用于计算、过滤和处理数据的场景。
- watch可以在监听到数据变化时，执行异步操作，例如发送Ajax请求等。
- watch可以直接修改监听的数据，也可以通过回调函数中的第二个参数来获取修改后的值。
总结：
computed和watch都是Vue中的响应式数据处理方式，前者适用于计算、过滤和处理数据的场景，后者适用于监听数据变化并执行相应操作的场景。虽然它们有不同的使用场景，但是它们都是响应式数据处理的重要方式，Vue开发中常常用到。
3.请说明v-if与v-show的区别。
v-if
- v-if是vue中条件渲染指令,根据表达式值得真假,动态得添加或删除dom元素
v-if是惰性的，如果表达式的值为假，那么对应的DOM元素将不会被渲染到页面上。
v-show
- 是简单的控制元素的 display 属性
v-show不管表达式的值是真是假，对应的DOM元素始终会被渲染到页面上。
总结:
v-if和v-show都是Vue中的条件渲染指令，前者适用于条件变化不频繁的情况下使用，后者适用于频繁切换显示和隐藏状态的情况下使用。需要根据实际情况选择使用哪种指令。
4.请说明使用v-for时key的注意事项。
key属性值必须是字符串或数值类型，不能是对象或数组等引用类型。key属性的值必须在兄弟节点中唯一，不能重复。
5. 请列举一些事件修饰符。
.stop：阻止事件冒泡,相当于调用了event.stopPropagation方法.prevent：阻止事件的默认行为。.capture：添加事件侦听器时使用事件捕获模式。.self：只在事件是从侦听器绑定的元素本身触发时触发回调。.once：事件只触发一次。.passive：告诉浏览器该事件的默认行为无需等待事件处理函数执行完成，可以直接执行。.native：在组件上监听原生事件。.keyCode：只当触发事件的按键keyCode等于指定的值时才触发回调。.enter：只在按下回车键时触发回调。.tab：只在按下Tab键时触发回调。
6.请说明父子组件如何传参
- 父组件通过props给子组件传参
- 子组件通过$emit给父组件传参
7. 请说明如何获取DOM。
!!!
vue router部分
1. 请说明router-link 和router-view的区别
- router-link设置路由跳转，
- router-view根据路由显示组件(路由出口)
2.请说明如何配置嵌套路由。
到index.js路由配置文件,在相应一级路由配置组件下添加children属性,再配置路由规则
3.请说明如何传参。
!!!
4.请说明如何实现懒加载。
!!!!
[el-element/vant部分]
1.请列举几个自己熟悉的组件(写出标签名)
!!!
2. 请说明 el-form 如何实现表单验证
[echarts]
1.请说明如何初始化
!!!
2.请说明 setOption中 title,tooltip,legend,xAXIS,yAxis,series的含义
!!!
