2022年最新前端面试题

持续更新–一个求职的小白

html 和 css 部分

1. html5 中新增了哪些语义化的标签

   main、header、footer、section、article、nav、address 等

2. 什么是语义化的标签由什么好处

   我们看到名字就知道是做什么的，好处是可读性更强便于 seo 优化

3. 什么是 SEO？如何做

   seo 叫搜索引擎优化。怎么做：

   1. 在 meta 中添加 keywords 和 description
   2. 使用语义化的标签
   3. 页面中使用 h1 标签设置标题信息
   4. 定期更新网站内容，增加收录量
   5. 优化网页性能，加快打开速度

4. a 标签如何打开一个新的标签页

   target 属性

5. css3 中新增了哪些伪类

   content、before、after 等

6. 常见的定位方式有哪些，有什么区别

   1. 固定定位,fixed。基于整个浏览器进行定位
   2. 相对定位,relative。相对于自身应该出现的位置进行定位
   3. 绝对定位,absolute。基于离自己最近的一个非默认定位的父元素进行定位，一般父元素都设置为 relative
   4. 粘性定位，不常见

7. 如何实现一个元素圆角效果

   border-radius

8. css3 新增了什么功能

   形变、动画、边框阴影、圆角等。开启浏览器 3d 加速，使用 transform3D

9. 常见的长度单位有哪些

   px(像素单位)，em，rem，vw，vh，百分比

10. 盒模型

    标准盒模型和怪异盒模型。区别在内容区域的计算方式不一样

11. BFC

    块级格式化上下文

12. 常见的浏览器内核

    ie、火狐、谷歌

13. flex 布局和 grid 布局的区别

    flex 是一维布局，grid 是二维布局。常用的属性大家自己整理一下

14. 媒体查询和响应式

    @media 属性，可以让我们在指定的浏览器宽度范围内显示对应的 css 效果

    实现响应式一般都使用媒体查询结合 vw 实现布局和 flex 或者 grid 实现布局，在内部区域中使用 rem 或者 em 和 px 做细微的调整

15. 移动端 1px 问题

    vw(ViewPort 视口)

    使用图片做背景或者使用 transform 缩放。这个问题只要是受到 vw 视口的影响

16. 如果禁止手机网页双指缩放

    还是需要修改 vw 配置，设置最大最小缩放比例和禁止手指缩放属性

    1. maximum-scale：允许用户缩放到的最大比例
    2. minimum-scale：允许用户缩放到的最小比例。
    3. user-scalable：用户是否可以手动缩放。

17. 浏览器全屏

    浏览器的全屏功能小结

18. 常见的浏览器兼容性问题

    是以后面试最常问的内容，常见的有

    1. ios 中滚动条卡顿问题
    2. placeholder 在微信浏览器中无法居中显示

    【浏览器的兼容问题及解决方案整理】

    【移动端 H5 开发-兼容性问题】

    【H5 开发遇到的那些兼容性问题】

19. 回流和重绘

    【回流和重绘】(https://juejin.cn/post/6844903569087266823)

    回流必然引起重绘，但是重绘不一定会引起回流。当我们改变元素尺寸、布局的时候就会引起回流

js 基础知识

1. 数据类型有哪些？

   基础数据类型：string、number、boolean、null、undefined、symbol、bigint

   复杂数据类型：对象和数组

   区别：存储位置不一样

2. 对象和数组的操作

   对象和数组是项目开发中使用最多的数据类型，大家一定要会

3. 获取对象的属性名和属性值

   获取属性名：Object.keys、 for in

   获取属性值：Object.values

   如何对对象的属性名做字典排序(按照 ascii 码表进行排序)。取出来所有的属性名组成数组直接 sort 就行，数组的 sort 方法没有参数的时候默认是按 ascii 码表进行排序的

4. 删除对象的属性

   使用 delete 关键词

5. 数组的 forEach 和 map 的区别

   两个都是循环数组的，forEach 只循环不改变数组，map 循环之后生成一个新的数组，新数组的每一项由原数组每一项的返回值决定

6. 数组扁平化处理 flat

   二维数组转换为一维数组

7. 数组去重

   如果是基础数据类型可以直接使用 set 实现，如果是复杂的数据类型那么需要使用 lodash 插件或者使用算法实现。正常上过班的人都是这样干的：定义一个新数组，循环老数组的每一项，循环的时候判断新数组中是否存在这个数据，如果不存在就插入数组

8. 数组排序

   sort 实现排序，它接收一个 function 作为参数，function 中接收两个形参，分别表示用于比较的两项。我们可以返回一个计算值进行排序

9. es6 新增的内容

   数据类型、模板字符串、箭头函数、class、module、generator 生成器函数、对象和数组的新方法、promise、set、map 等等

   map 这个数据结构有一个特点就是 key 不能重复

10. Promise

    用来解决异步回调地狱问题。他有三个状态：pending、fulfilled、reject，这三个状态改变之后不可逆，可以链式调用，then 的回调函数中的值是上一次的返回值

11. Promise.all 和 Promise.race

    Promise.all，接收一个 Promise 对象组成的数组作为参数，当数组中所有的 promise 都成功之后会执行 then。返回结果是每一个 Promise 成功的结果组成的数组，和插入顺序有关

    Promise.race，接收一个 Promise 对象组成的数组作为参数，当最快的一个成功之后就结束

12. 同步和异步

    同步叫阻塞模式，异步叫非阻塞模式。

    异步执行的时候是通过 EventLoop 实现的，异步循环的时候牵涉宏任务和微任务。在 js 执行的时候，遇到异步代码，会把它直接丢到异步队列中，等所有的同步代码都执行完成之后执行异步队列中的代码。在执行异步队列中的操作的时候，分为任务和微任务。当前周期中的所有微任务都执行完成之后，开始执行下一个宏任务周期，在一个宏任务中所有的微任务都执行完成之后，继续下一个宏任务周期。

    宏任务：就是运行环境提供的异步操作，比如：setTimeout 和 setInterval

    微任务：就是语言自带的异步操作，比如：Promise

13. 箭头函数和一般函数

    箭头函数没有 this，不能用来做原型链继承

14. 如何改变 this

    bind，apply，call

    bind 只改变 this 不会调用方法

    apply 和 call 改变 this 的同时会调用方法。他俩的区别就是参数的格式不一样，apply 的参数二为 function 的所有参数组成的数组；call 中 function 的参数直接从第二个参数开始，一个一个排列进去

15. 原型和原型链

    你天天背的。你随便答，都不错

16. Object.defineProperty 和 proxy

    Object.defineProperty，可以为对象添加一个新的属性，添加属性的时候可以加配置信息。通过监听 set 和 get 方法可以实现 MVVM 双向绑定的框架，vue2 的底层就是基于它实现的

    proxy 这个是 js 新增的一个语法功能，可以为数据添加 set 和 get 方法，vue3 的底层就是基于它实现的

17. 网络请求 xhr 和 fetch 以及 websocket

    xhr:XMLHttpRequest

    fetch: 是 js 中的语法，可以返回一个 promise 作为结果

    websocket：是长连接，我们可以建立起和服务器的 socket 连接，服务器可以主动的向客户端推送数据

    科班需要注意的一些点：tcp 和 udp，七层协议，面向对象，mvc，常见的排序算法和数据结构，设计模式，三次握手四次挥手

18. 节流和防抖

    节流函数和防抖函数，用来做优化

    节流：固定的时间间隔内只执行一次

    防抖：当间隔的时间达到指定的节点之后执行一次

19. 字符串操作

    判断是否存在，去空格，替换，分割等等

20. 日期对象

    Date

    moment 插件

21. 数学对象

    向下取整、向上取整、随机数

22. json 字符串和对象相关的操作

    JSON.stringify 和 JSON.parse

23. 本地存储

    cookie,localStorage 和 sessionStorage

24. 浏览器缓存

    强制缓存和协商缓存。缓存这个东西你可以搜一下相关知识作为了解，需要明白缓存这个是服务器设置的，在响应头里面做好配置

25. BOM 和 DOM 操作

    DOM 中常见元素选择方式、伪数组转换为真实的数组

    BOM 中常见的操作，获取浏览器类型 userAgent 对象

26. 深拷贝和浅拷贝

    浅拷贝，只拷贝对象的第一层。如果对象的属性值还是对象，那么就没办法拷贝。可以使用扩展运算符或者 Object.assign

    深拷贝，就是逐层拷贝。如果对象的属性值还是对象，那么也会进行拷贝。实现深拷贝可以使用 JSON.stringify 和 JSON.parse 结合的方式实现

    一般工作中都使用 lodash 插件实现

27. 获取 url 中的参数

    window.location.search，然后做字符串截取，获取可以使用 URLSearchParams

28. js 中如何把图片转换为 base64

    FileReader 可以实现转换

29. canvas 和 svg

    两者都是用来绘图的。其实在开发中使用最多的是 canvas 实现图片压缩

    Canvas 进行简单的图片压缩

Vue 部分

1. vue3 和 vue2 有什么区别

   1. 实现的底层原理不一样 Vue2 使用的是 Object.defineProperty，Vue3 使用的是 proxy
   2. vue3 中删除了 filter
   3. vue3 中组件销毁的生命周期钩子函数改名了叫 beforeUnmount 和 unmounted
   4. vue3 中新增了 setup 在组件的最前面执行，它里面没有 this
   5. vue3 中新增了组合式 api，可以结合 setup 很方便的创建组件
   6. vue2.7 之后也加了 setup 语法和 ref 等操作，也能使用组合式 api 但是 vue2 和 3 的底层实现还是不一样的
   7. vue3 可以更好的和 ts 语法结合使用

2. vue 中的组件生命周期

   八个常见的生命周期钩子函数和两个不常见的(需要配合 keep-alive 一起使用)

   嵌套组件的生命周期，执行到父组件的 beforeMount 之后，开始解析 dom，当遇到组件的就执行子组件的创建到挂载完成的生命周期钩子函数。当所有的子组件都挂载完成之后执行父组件的挂载完成

3. vue 中的组件传参

   父传子：使用 props

   子传父： 使用事件派发

   非相关组件：vue2 使用事件总线，vue3 使用 provide/inject，也可以使用 vuex 或者 pinia 等全局状态管理插件

4. vue 和服务器端交互

   发起网络请求，使用 axios 插件

   网络请求封装：全局拦击以及超时时间。全局请求拦截，发起请求之前执行，可以添加 token 等信息；全局响应拦截，请求返回之后执行，可以对返回的数据做统一的处理

5. vue 路由部分

   1. 路由传参
   2. 路由嵌套
   3. 路由拦截(路由守卫)，beforeEach，beforeRouterUpdate(在路由改变但是组件被复用的时候使用)
   4. 登陆判断和权限管理，可以使用 meta 属性进行控制

   动态添加路由: addRoute
   我们可以结合在路由的meta属性中添加roles属性，用来表示可以访问当前路由的角色信息，然后动态的控制节点是否显示
   

6. vuex 全局状态管理

   • 单向数据流，数据式单向流动的，在 view 视图中派发一个 action 改变数据，数据改变之后视图重新渲染
   • vuex 中的内容：state，action，mutation，modules，getters
   • vuex 中的数据流向：在组件中派发一个 action，action 中调接口获取数据，数据获取成功之后 commit 提交一个 mutation 改变数据，数据改变了组件重新更新

   action 中也能改变数据，但是不建议这样做，因为 vuex 中的数据改变需要可以被追踪，所以数据都在 mutation 中进行改变

7. pinia 一个新的状态管理插件，官方推荐使用

8. vue 数据双向绑定的原理和 mvvm

9. 虚拟 dom 和 diff 算法

   虚拟 dom 就是一个用 jd 对象描述的 dom 结构，它最终会被编译成真实的 dom 进行显示。

   diff 算法，就是虚拟 dom 的比较算法。进行快读的节点定位，然后进行替换。在 vue 中按照从外往内逐层比较，找到改变的进行替换

10. key 的作用

    key 的作用是在虚拟 dom 比较的时候，加快比较速度。通过 key 进行节点的快速定位

11. v-if 和 v-show 的区别

12. 项目首页白屏问题，其实就是打包优化

    • 减少网络请求次数
    • 图片懒加载
    • 路由懒加载
    • 使用 cdn 的方式实现外部资源的引入，这个配置我是从网上查的

13. 难点和亮点

    • 亮点：vite 创建的项目，使用 vue3+ts 开发，用的是组合式 API 写法
    • 难点：对 ts 的不适应；echarts 的 api 不熟悉，查找特别麻烦等等

react 部分

1. 你们用的 react 版本

   我们项目中主要使用的是 function 结合 hooks 写组件，我们的 react 是 16.8 之后的，一般我们用 17 多的 react

2. react 中定义组件的区别

   1. class 定义的组件有自己的局部状态和生命周期钩子函数
   2. class 定义的组件写起来很麻烦有 this 指向问题
   3. function 定义的组件叫无状态组件，结合 hooks 可以很方便的做开发

3. 无状态组件

   function 定义的组件就是无状态组件

4. 高阶组件

   其实就是高阶函数，接收一个组件组件作为参数，返回的组件中会包含新的属性和方法。常见的有：react-redux 中的 connect，以及 react-router-dom 中的 withRouter

   connect 可以实现把 redux 中的数据映射到组件的属性上

   withRouter 可以把路由数据映射到组件的属性上

5. 受控组件

   组件的数据是被 state 状态数据进行管理的。例如：我们通过 state 数据绑定 input 的 value 值

6. react 组件传参和生命周期

   • 父传子使用 props 属性
   • 子传父使用方法调用
   • 非相关组件之间传参使用 context 上下文或者 redux 这种状态管理插件

7. redux

   • redux 是一个状态管理插件
   • redux 和 vuex 不同，vuex 只能在 vue 中使用。但是 redux 可以和任何一个框架结合
   • redux 是单向数据流的，所有的数据改变都在 reducer 函数中进行
   • 使用 react-redux 可以实现 redux 数据和 react 项目的关联
   • 在 react 组件中使用 connect 或者 useSelector 获取状态数据，使用 useDispatch 获取 dispatch 方法
   • 所有的数据改变都是通过 dispatch 派发一个 action 实现
   • redux 中的 action 的 type 不能重复，因为每一次派发的时候所有的 reducer 都会接收到这个 action

8. react 中的 fiber

   fiber 是 react16 中引入的一个新的概念，作用是优化 react 组件的性能

   【一篇带你了解 React Fiber 是什么？】

   【React Fiber 的作用和原理】

   这个问题你怎么回答都不错

9. react 中常用的 hooks

   • useState
   • useEffect
   • useMemo
   • useCallback
   • useReducer
   • useContext

10. useEffect

    副作用，接收两个参数，参数一是回调函数，参数二是依赖数组

    依赖数组有三种形式：

    1. 参数二不存在，每一次组件更新都会执行
    2. 参数二为空数组，只有初始化的时候执行一次
    3. 参数二中存在数据，数据改变的时候执行一次

    参数一的回调函数中返回一个 function，这个返回的 function 在组件销毁的时候执行

    useEffect 可以 class 定义组件的生命周期钩子函数对应：

    1. 参数二为空白数组，对应组件的 componentDidMount
    2. 参数二中存在数据，对应组件的 componentDidUpdate
    3. 参数一中返回的 function，对应组件的 componentWillUnmount

11. useState

    返回一个数组，第一项表示数据的名字，第二项表示改变数据的方法

    改变数据的时候可以直接设置一个值，或者设置一个 function 做为值，这个方法的返回值表示 state 的最新数据。一般情况下建议使用 function 作为参数

12. useMemo 和 useCallback 的区别

    useMemo 作用是缓存一个值，useCallback 作用是缓存一个 function。他们参数二的依赖项写法和 useEffect 类似

13. react 组件性能优化

    使用 memo 和 useCallback 进行，还可以使用组件懒加载

14. 自定义 hooks

    就是自己写一个 hooks。自己定义一个 useXX 方法，在里面编写自己的逻辑

15. hooks 的实现原理

    hooks 是数组加闭包实现的。

16. hooks 的注意事项

    • 不能在条件语句或者循环中使用
    • 只能在 function 定义的组件中使用

17. react 官网中的一些内容你得看一看

    1. 组件懒加载
    2. 合成事件
    3. 高阶组件
    4. 严格模式
    5. Reconciliation fiber

18. 亮点和难点

    亮点：

    • 使用 vite 创建项目
    • 使用 ts+hooks 写代码
    • 使用 ReduxToolkit 做状态管理

    难点：

    • ts 刚开始不熟悉

小程序和多端开发以及混合开发

1. 你们如何做小程序开发的

   原生开发，对照官网写的

2. 有没有什么难点？

   没有，直接查官网的

3. 用过其他的小程序开发框架吗

   有，根据自己的技术栈。vue 的用过 uniapp，如果是 react 的用过 taro

4. App 和前端如何交互

   直接调方法传参数

5. 如何实现支付

   支付不是我做的。

   手机 App 支付需要原生开发人员对接 SDK 实现

6. 小程序如何获取用户信息

   调接口获取

7. 微信公众账号如何获取用户信息

   调接口获取