前端面试题

JS

1. 什么是原型链

• 通过隐式原型把一些构造函数层层的串起来，因为所有的对象都是继承自Object。互相连接构成一整串链子

2. js中this的指向，普通函数，箭头函数，new 函数

• 普通函数的this 和箭头函数指向 window，new 指向 谁使用指向谁

3. js中call 和 apply的区别

• call 和 apply 都是可以将this 在其他函数中，指向当前的函数，apply在其他函数中是已数组的形式

4. js如何实现异步编程

• async ，callBack 和 Promise

5. 内存泄漏解决办法

• 1.全局变量先声明在使用
• 2.避免过多使用闭包。
• 3.注意清除定时器和事件监听器。

6. 继承有哪几种

• 链式继承，寄生式继承，组合式继承

7. 合并对象

• Object.assign

8. 合并数组

• array.concat 和 扩张运算符

9. 什么是作用域

• 规定变量和函数的可使用范围称为作用域，查找变量或者函数时，需要从局部作用域到全局作用域依次查找，这些作用域的集合称作用域链。

10. 怎么检查数据类型

• typeof 和 instanceof

11. js的数据类型有哪些

• 数据封装类对象：Object、Array、Boolean、Number 和 String
• 其他对象：Function、Arguments、Math、Date、RegExp、Error

12. css3有新增了哪几种样式属性

• 旋转，动画

13. html5新增了哪几种元素

• ifrme header section footer

14. float 和 position 以及 diaplay:flex

• 浮动， 定位， 和弹性盒子

15. 弹性盒子，从左向右，从上到下
16. css中样式等级的划分

• 权重为1； 类选择器，权重为10； id选择器，权重为100； 这里还有一种情况：在html标签中直接使用style属性，这里的style属性的权重为1000； 如果上!important;则权重是最高的

17. 什么是盒模型

• margin padding border

18. ifrme 元素页面与页面之间的通信怎么做

• psotMessage (向下发送数据)，window绑定 ‘message ’

Node

• 1. 同时请求多个api接口时，如何所有接口返回接口以后，再发送给前台
  • 1. 使用 async await
  • 2. 将所有请求存储到数组中，然后通过 forEach设置 async，等待回调完成
  • 3. 将所有请求存储到数组中，然后通过 for 循环，再循环中创建工厂函数，再工厂函数中使用 Promise
• 2. 什么是微服务
  • 微服务是一种应用架构，将每一个应用都放到自己的服务中，与其他的服务隔绝，这些服务是松散耦合的，可独立部署的
  • 为了解决web应用开发的单体方式，所有的·东西都是作为一个单元构建的，所有的业务逻辑都是归入一个广泛的应用
  • 优点
    • 语言不可知性： 微服务并不限于图定的编程语言，每个微服务都可以使用不同的语言编写，以支持选定的通信协议
    • 可扩展性： 如果需要开发新的功能，可以通过创建一个新的服务，只维护开发新服务内的代码，不会影响到其他的服务
    • 无限迭代
    • 单元测试： 开发完成新的功能，可以只测试创建新的服务
  • 缺点
    • 整体管理很看你。分而治之
    • 难以追踪： 微服务之间渠道会非常多，出现错误很难追溯并确定故障点
  • 微服务通信方式
    • 基于http的restful
    • webSoclet
    • TCP套接字
    • UDP 数据包
  • 为什么node为最佳选择
    • 单线程 & 异步
    • 事件驱动
    • 快速和高度的可扩展性
    • 易开发
• 3. mysql 语句有那些
  • 1. DDL
  • 2. DQL
  • 3. DML
• 4. redis 有什么类型的数据
  • 1. String 类型
    • set key
    • get key
    • del key
    • strlen key获取key对应的value的长度
    • append key在 key对应的value追加 值
    • incr key 将对应的value 自增1
    • decr key将对应的value 自减1
    • incrby key对应的value 增加 xx
    • decrby key对应value 减少 xx
    • getrange key x1 x2获取x1 - x2范围内的值
    • String数据结构是简单的 key-value类型，value 不仅可以设置string，也可以是数字，使用场景 ：博客粉丝数等
  • 2. List 列表
    • lpush插入到头部
    • rpush插入到尾部
    • lrange集合名 x y ---- 获取集合里x - y 的值
    • lpop移除集合的左值
    • rpop移除集合的右值
    • lindex集合名 x ---- 获取集合中下标x的值
    • llen集合名 – 获取集合的长度
    • lset集合名 index xx ---- 更新下标为index的值为xx
    • linsert集合名 before yy xx — 集合中yy值前面插入一个xx值
    • linsert集合名 after yy xx — 集合中yy值后面插入一个xx值
    • 1. 它是一个字符串链表，left，right 都可以插入添加
    • 2. 链表的操作无论头部还是尾部效率都极高，但假如对中间元素进行操作，效率就很惨淡了
  • 3. Set （集合 ，不能重复）
    • sadd添加值
    • smembers查看set中所有的值
    • srem移除set集合中的某值
    • srandmember随机取出集合中的一个值
    • spop随机删除set的元素
    • smove set1 set2 xx– 将set1中的xx移到set2
    • sdiff set1 set2对比差集
    • sinter set set2交集
    • sunion set1 set2并集
  • 4. Hash
    • hset
    • hget
    • hexists判断是否存在
    • hkeys获取集合所有的key
  • 5. Zset （集合，有序集合）
    • zadd
    • zrange按升序排序获取
    • zrangebyscore按score值升序排列获取
    • zrevrangebyscore按score值降序排列获取
    • zrem移除指定元素
    • zcard获取集合个数
  • 6. geospatial (地理位置)
    • geoadd可以存储两个城市的位置信息
    • geopos获取指定城市的经纬度
    • geodist两个城市的距离
    • georadius MM 经度 纬度 500KM： MM所有距离半径500KM范围内城市
    • georadiusbymember MM 城市1 1000km:找出MM下距离城市1000km范围内的城市
  • 7. hyperloglog (基数)
    • pfass mykey a b c d添加元素
    • PFCOUNT mykey计算基数
    • PFMERGE mykey3 mykey mykey2将 mykey 和mykey2 并集
  • 8. bitmaps
    • setbit sigin 0 1设置
    • getbit sogn 3获取下标为3的值
    • bitcount sign 3获取前三项的值

Vue

1. 子组件和父组件传值和调用函数，子组件怎么注册到父组件，子组件深度获取值

• 子组件通过props方法接受数据， $emit向上调用函数

2. vuex 有几部分组成

• actions ， state ，mutations

3. watch监听使用场景 和 computed配合使用

• watch 监视变量 ，计算属性可以将vuex中的值在计算属性中return，在模板中使用

4. vue的生命周期
5. MVVC 怎么理解的

• 模型（Model） - 表示应用程序核心（数据）
• 视图（View） - 用户界面
• 视图模型（ViewModel）- 连接View和Model，当数据发生改变，自动更新View

6. MVC 怎么理解的

• Model View Controller

7. 双向数据绑定

• 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。
  vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果

8. hash模式 和 history模式

• hash是普通的网页请求 ，history 和 hash最大的区别就是 加# hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
• history模式： history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

9. v-show 和 v-if

• v-show 只是隐藏了元素，v-if 执行的是DOM操作，将元素之间删除了，因此v-if带来了性能方面的浪费

10. 为什么在v-for中要加key

• 因为vue使用的是diff算法，key是每一个节点的唯一值,设置的key值能让vue底层高效的对新旧vnode进行diff，然后将比对出的结果用来更新真实的DOM

11. vue-router 路由之间传值

• 比如收 push中可以添加params需要传递的对象，通过params获取到传递的参数，也可以在路由中动态添加 $id, 通过获取到？后面的值

12. vue 钩子函数

• 前置守卫beforeEach 和 后置守卫afterEach ，里面包括
• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由
• next: Function: 一定要调用该方法不然会阻塞路由。执行效果依赖 next 方法的调用参数

13. 在组件之间也可以设置守卫 （beforeRouteEnter：在渲染该组件的对应路由前调用
    beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用
    beforeRouteLeave：导航离开该组件的对应路由时调用）
14. v-slot 插槽

• 子组件中用slot标签定义的预留位置，有name属性叫具名插槽，不设置name属性的叫不具名插槽，使用插槽主要是为了在父组件中使用子组件标签的时候可以往子组件内写入html代码

15. mixins 的使用

• 分发Vue组件中可复用功能的一种灵活方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。在A.vue中使用 mixins ，基本vue所有的属性， 在 B.vue中的

// A.vue
export const myMixin={
   data(){
       return{
       }
   },
   created(){
   },
   methods:{
   }
}

// B.vue
import {myMixin} from'目标文件路径'
   export default{
       mixins:[myMixin]
})

16. keep-alive

• A，B 组件中，当从A离开跳转到B中以后，在返回A数据丢失了，可以使用keep-alive包裹A，B，这样再跳转的话,A中的数据是冻结的，不能被刷新 ，include 中可以设置哪一些页面是启用的

18. vue修饰符

    • 表单修饰符
    • 事件修饰符
    • 鼠标按键修饰符
    • 键值修饰符
    • v-bind修饰符

Vue3

1. vue2 和 vue3的变化
   利用新的语言特性es6
   解决框架问题

• 速度更快：
  • 重写虚拟DOM实现
  • 编译模板的优化
  • 更高效的组件初始化
  • undate性能提高1~3倍
  • SSR速度提高1~3倍
• 体积更小：
  • 通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的
  • 能够tree-shaking，有两大好处：
  • 对开发人员，能够对vue实现更多其他的功能，而不必担忧整体体积过大
  • 对使用者，打包出来的包体积变小了
• 更接近原生：
  • 可以自定义渲染 API
• 更易使用：
  • 响应式 Api 暴露出来
  • 轻松识别组件重新渲染原因

2. Vue3新增特性
   • framents
   • Teleport
   • composition Api
   • createRenderer
   • framents支持更多的根节点

• Teleport 够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，像 modals,toast 等这样的元素，如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难

• createRenderer 我们能够构建自定义渲染器，我们能够将 vue 的开发模型扩展到其他平台，我们可以将其生成在canvas画布上：
  template -> app对象中render -> 调用render -> vnode虚拟节点 -> 调用canvas api -> 真实 canvas元素 -> 调用canvas api -> canvas平台

• composition APi 是组合式 API

• setup 入口

  • 响应式api : ref 自动展开value ， reactive ，readonly 只读不可更改 computed 计算属性 watch 响应式对象函数 watchEffect 立刻执行

• 生命周期钩子：

  • beforeCretae使用 setup
  • created使用setup
  • berforeMount->onBeforeMount
  • mounted-> onMounted
  • beforeUpdate->onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy-> onBeforeUnmount
  • destroyed-> onUnmounted
  • errorCaptured-> onErrorCaptured

• 依赖注入：

  • provide
  • inject

• refs

3. Vue3.0里为什么要用 Proxy API替代 defineProperty API？

• Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
  通过defineProperty 两个属性，get及set

  • get:属性的 getter 函数，当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象
  • set:属性的 setter 函数，当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。默认为 undefined

• Proxy的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性了

4. 用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计

• 实现一个Modal组件，首先确定需要完成的内容：

  • 遮罩层
  • 标题内容
  • 主体内容
  • 确定和取消按钮
  • 主体内容需要灵活，所以可以是字符串，也可以是一段 html 代码
    特点是它们在当前vue实例之外独立存在，通常挂载于body之上
    除了通过引入import的形式，我们还可通过API的形式进行组件的调用
    还可以包括配置全局样式、国际化、与typeScript结合

• 实现流程
  首先看看大致流程：

  • 目录结构
  • 组件内容
  • 实现 API 形式
  • 事件处理
  • 其他完善

5. Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同

• Options Api ,通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑,如果代码多，组件变得复杂，导致对应属性的列表也会增长，这可能会导致组件难以阅读和理解
• Composition Api： 一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合）
  • 逻辑组织
  • 逻辑复用
  • 最典型使用mixins，当我们使用多个mixins 时候。optios api 会出现明明冲入，和数据来源不清晰，使用Compostions api 可以通过

import { onMounted, onUnmounted, reactive } from "vue";
export function useMove() {
  const position = reactive({
    x: 0,
    y: 0,
  });
  const handleKeyup = (e) => {
    switch (e.code) {
      case "ArrowUp":
        // y.value--;
        position.y--;
        break;
      case "ArrowDown":
        // y.value++;
        position.y++;
        break;
    }
  };
  onMounted(() => {
    window.addEventListener("keyup", handleKeyup);
  });
  onUnmounted(() => {
    window.removeEventListener("keyup", handleKeyup);
  });
  return { position };
}

React

1. Hooks

• useState 状态
  • 只初始化一个state，只会执行一次
• setState 更新状态

• 接受一个函数，数据发生变化渲染视图

• useReducer 类似 Redux的思想

  • 1.创建初始值initialState
  • 2.创建所有操作reducer(state, action);
  • 3.传给userReducer，得到读和写API
  • 4.调用写({type: ‘操作类型’})

• useReducer 如何代替 Redux

  • 1.将数据集中到state中
  • 2.将所有的操作集中到reducer
  • 3.创建一个context
  • 4.创建对数据的读取的API
  • 5.将第四步的内容放到第三步的Context
  • 6.用Context.provider 将 Context提供给所有的组件
  • 7.各个组件用useContext获取读取API

• useContext 全局变量是全局的上下文，上下文是局部的全局变量

  • 1. 使用 c =createContext(init) 创建上下文
  • 2. 使用 圈定作用域
  • 3. 在作用域内使用 useContext© 来使用上下文

useEffect  在浏览器渲染完成后执行
useEffect(() => {
},deps:[]) // 里面的变量变化时执行
useEffect(() => {
},deps:[n]) // n变化时执行
useEffect(() => {
}) // 任何 state 变化时都会执行

• useMemo

• 使用 React.memo 包裹 子组件，如果props不变，就没有必要再次执行 子组件，但是如果添加监听函数，子组件使用父组件的函数，会再次执行，生成新的函数，新旧函数虽然功能一样，但是地址引用不一样的
• 因此就可以使用useMemo
• 第一个参数是 () => value
• 第二个参数是依赖 [m, n]
• 只有当依赖变化时，才会计算出新的 value,如果依赖不变，那么就重用之前的 value,这不就是 Vue 2的 computed 吗？如果value是一个函数的，会返回函数的函数，因此可以使用useCallback

useCallback (x => console.log(x) , [m])  == useMemo(() => x => consloe.log(x) , [m])

• useRef
  • 可以用来引用DOM对象， 也可以用来引用 普通对象，类似vue3 ref
  • props 是无法传递ref属性的, 因此可以使用forwardRef

const Btn = forwardRef((props,ref) => {
	return 
})

Uniapp

生命周期

• onLaunch 初始化完成时触发（全局只触发一次）
• onShow 从后台进入前台显示 ，多次触发
• onHide 从前台进入后台 ，多次触发
• onError 报错时触发

页面的生命周期

• onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为Object
• onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面，多次加载
• onReady 监听页面初次渲染完成。
• onHide 监听页面隐藏，多次加载
• onUnload 监听页面卸载