【秋招面经】海能达前端题目总结

最新推荐文章于 2024-09-10 21:12:14 发布

纵有千堆雪与长街

最新推荐文章于 2024-09-10 21:12:14 发布

阅读量968

点赞数

CC 4.0 BY-SA版权

分类专栏：秋招面经文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_40992225/article/details/127422502

秋招面经专栏收录该内容

18 篇文章

订阅专栏

本文汇总了海能达前端面试中常见的技术问题，包括Vue-Router的路由模式、懒加载与组件加载的区别、Vuex的状态管理、H5和CSS3的新特性、元素旋转、ES6的特性、数组去重、Flex布局、TCP的三次握手和四次挥手、Nginx反向代理、Vue2与Vue3的区别、Ajax使用和Axios拦截器等核心知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本次主要搬运牛客网上关于海能达前端面试的常问问题

问题总结

Vue-Router路由模式？路由赖加载怎么做的？

原理：
HashRouter的原理：
通过window.onhashchange方法获取新URL中hash值，再做进一步处理

HistoryRouter的原理：
通过history.pushState 使用它做页面跳转不会触发页面刷新，使用window.onpopstate 监听浏览器的前进和后退，再做其他处理

详解路由懒加载

路由懒加载跟组件加载的区别？刷新后数据丢失怎么处理？

vue路由懒加载及组件懒加载
 如何解决vuex页面刷新数据丢失问题？

对Vuex的理解？

每一个 Vuex 应用的核心就是 store，里面又包括:
（1）state（数据）：用来存放数据源，就是公共状态;
（2）getters（数据加工）：有的时候需要对数据源进行加工，返回需要的数据；
（3）actions（事件）：要执行的操作，可以进行同步或者异步事件
（4）mutations（执行）：操作结束之后，actions通过commit更新state数据源
（5）modules：使用单一状态树，致使应用的全部状态集中到一个很大的对象，所以把每个模块的局部状态分装使每一个模块拥有本身的 state、mutation、action、getters、甚至是嵌套子模块；

vuex的工作流程就是：
（1）通过dispatch去提交一个actions，
（2） actions接收到这个事件之后，在actions中可以执行一些异步|同步操作，根据不同的情况去分发给不同的mutations，
（3）actions通过commit去触发mutations，
（4）mutations去更新state数据，state更新之后，就会通知vue进行渲染
在这里插入图片描述

H5和CSS3提供的新特性；

H5 和 CSS3 新特性

元素旋转90度使用什么属性？

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
语法：

transform: none|transform-functions;

属性值：

none 定义不进行转换。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
body
{
    margin:30px;
    background-color:#E9E9E9;
}
div.polaroid
{
    width:294px;
    padding:10px 10px 20px 10px;
    border:1px solid #BFBFBF;
    background-color:white;
    /* Add box-shadow */
    box-shadow:2px 2px 3px #aaaaaa;
}
div.rotate
{
    -ms-transform:rotate(90deg); /* IE 9 */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    transform:rotate(90deg);
}

</style>

</head>
<body>
<div class="polaroid">
    正常图片
<img src="img/1.jpg" alt="" width="284" height="213">
</div><br><br>
<div class="polaroid rotate">
    图片旋转90度
<img src="img/1.jpg" alt="" width="284" height="213">
</div>
</body>
</html>

跨域的解决方式？

解决跨域的方案：
1、 CORS处理（后端）所有的网站都可以访问这个接口（数据不安全）
2、 JSONP处理（前端），利用script标签的src属性实现跨域（script标签的src属性能够实现天然的跨域）比如拿到百度的一张图片（问题：只能处理get请求）
3、 Nginx 反向代理
4、使用webpack可以做代理，实现跨域（是目前比较好的跨域处理方案，95%的公司是使用这个来做代理的）

说说Promise（详问）

关于Promise
Promise是异步编程的一种解决方案，（大白话就是让这个异步可以写成同步的感觉，向下顺次执行）比传统的解决方案—回调函数和事件—更合理和强大，最主要解决的是死亡的地狱回调
Promise 是一个构造函数，接收一个函数作为参数，返回一个 Promise 实例。一个 Promise 实例有三种状态，分别是 pending、resolved 和 rejected，分别代表了进行中、已成功和已失败。实例的状态只能由 pending 转变 resolved 或者 rejected 状态，并且状态一经改变，就凝固了，无法再被改变了。状态的改变是通过 resolve() 和 reject() 函数来实现的，我们可以在异步操作结束后调用这两个函数改变 Promise 实例的状态，它的原型上定义了一个 then 方法，使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务，会在本轮事件循环的末尾执行。

promise 能解决什么问题？
回调地狱多个回调相互嵌套导致代码维护困难，代码臃肿
支持多并发的请求
解决可读性差的代码问题
解决代码的信任问题，promise只有一次决议
promise的常用api
Promise.then():得到异步任务的正确结果
Promise.catch():获取异常信息
Promise.finally():无论成功还是失败都会执行
Promise.all():并发处理多个异步任务，所有任务执行完成才能得到结果
Promise.race():并发处理多个异步任务，只要有一个任务完成就能得到结果
promise中race()和all()方法的异同？
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。Promise.race()将里面返回最快的结果返回，不管结果本身是成功状态还是失败状态。