前端常见面试题（一）

mouche前端菜鸟

于 2022-08-25 12:05:54 发布

阅读量148

点赞数 1

分类专栏： JavaScript 文章标签：前端 java 开发语言

本文链接：https://blog.csdn.net/m0_57482322/article/details/126521782

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

浅浅整理一下常见面试题吧

今天是 区别篇

一、GET和POST的区别

浏览器回退表现不同 GET在浏览器回退时是无害的，而POST会再次提交请求
浏览器对请求地址的处理不同 GET请求地址会被浏览器主动缓存，而POST不会，除非手动设置
浏览器对响应的处理不同GET请求参数会被完整的保留在浏览器历史记录里，而POST中的参数不会被保留
参数大小不同. GET请求在URL中传送的参数是有长度的限制，而POST没有限制
安全性不同. GET参数通过URL传递，会暴露，不安全；POST放在Request Body中，相对更安全
针对数据操作的类型不同.GET对数据进行查询，POST主要对数据进行增删改！简单说，GET是只读，POST是写

二、typeof和instanceof有什么区别

typeof返回一个变量的节本类型，instanceof返回的是一个布尔值
typeof NaN === 'number'
instanceof可以准确地判断复杂引用数据类型（顺着原型链寻找，直到找到相同的原型对象），但是不能正确判断基础数据类型
typeof可以判断基础数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断

三、bind、call、apply有何区别

1.apply

接收两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入
当第一个参数为null，undefined的时候，默认指向window
改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次

2.call

call方法的第一个参数也是this的指向，后面传入的是一个参数列表
改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次
当第一个参数为null、undefined的时候，默认指向window(在浏览器中)

3.bind

第一参数也是this的指向，后面传入的也是一个参数列表
bind可以分为多次传入
bind是返回绑定this之后的函数

四、cookie、localStorage和sessionStorage 三者之间有什么区别

1.生命周期

cookie可以设置失效时间，没有设置的话，默认是浏览器关闭后失效
localStorage：除非手动清除，不然一直有效
sessionStorage：仅在当前网页会话下有效，关闭页面或者浏览器就会被清除（这个可以存储面包屑数据）

2.存放数据大小

cookie大概4B
localStorage和sessionStorage可以保存5MB的信息

3.http请求

cookie每次都会携带在请求头，如果保存过多会带来性能问题，同时不可以跨域调用
localStorage和sessionStorage仅在浏览器中保存

4.易用性

cookie需要自己封装
localStorage和sessionStorage可以用原生接口

五、重绘和重排的区别

重排/回流（Reflow）：当 DOM 的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。
重绘(Repaint) : 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变
重绘不一定会重排，重排一定重绘

六、require和import的区别

在源文件中更改变量的值，通过 require 引入 counts 的变量，拿到的值始终是初始化的值
通过 import 引入 counts 的变量，在源文件中修改变量的值后，引入拿到的变量值也会改变。
require
- 导入require 导出 exports/module.exports 是 CommonJS 的标准
- require 是赋值过程且是运行时才执行，是同步加载，是动态加载
- require是一个值的拷贝
- require是请求整个包对象
- node目前还是需要使用这个
import
- import/export 是 ES6 的标准
- import是结构过程并且是编译时执行，是异步加载，是静态加载
- import具有置顶性，会提升到整个模块的头部
- import是一个值的引用
- import只请求模块中需要的请求的部分
性能
- require的性能相对于import稍低

七、深拷贝和浅拷贝的区别

1.浅拷贝：

创建新的数据，这个数据有这原始数据属性值的一份精确拷贝
如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址
浅拷贝是拷贝一层，深层次的引用类型则共享内存地址
实现浅拷贝

function shallowClone(obj){
    const newObj = {};
    for(let prop in obj){
        if(obj.hasOwnProperty(prop)){
            newObj[prop] = obj[prop];
        }
    }
    return newObj
}

存在浅拷贝现象的有：
- Object.assign
- Array.prototype.slice()
- Array.prototype.concat()
- 使用拓展运算符实现的复制
- 等于也是浅拷贝

2.深拷贝

深拷贝开辟一个新的栈，两个对象属完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性
深拷贝递归拷贝深层次
常见的深拷贝：
- _.cloneDeep()
- JSON.stringfy()
- 手写循环递归
深拷贝后不全等

八、vue2 和vue3 的区别

1.绑定原理发生了改变

vue2的双向数据绑定事利用ES5的一个APIObject.defineProperty()对数据进行劫持，结合，发布，订阅来实现

Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    //拦截get，当我们访问data.key时会被这个方法拦截到
    get: function getter () {
        //我们在这里收集依赖
        return obj[key];
    },
    //拦截set，当我们为data.key赋值时会被这个方法拦截到
    set: function setter (newVal) {
        //当数据变更时，通知依赖项变更UI
    } 
})

vue3使用了es6的proxyAPI

defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

2.Vue3支持碎片

在组件中可以拥有多个根节点

3.Composition API

Vue2使用选项类型API（options API）
Vue3使用合成型API（Composition API）

旧的选项型API在代码里分割了不同的属性: data,computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

4.生命周期

setup 执行时机是在 beforeCreate 之前执行

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount //组件挂载到节点上之前执行的函数
mounted       -> onMounted  //组件挂载完成后执行的函数
beforeUpdate  -> onBeforeUpdate //组件更新之前执行的函数
updated       -> onUpdated //组件更新完成之后执行的函数
beforeDestroy -> onBeforeUnmount //组件卸载之前执行的函数
destroyed     -> onUnmounted // 组件卸载完成后执行的函数
activated     -> onActivated
deactivated   -> onDeactivated

5.父子传参不同

setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）
执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）
与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用)
使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态
setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性

九、Vue路由中，history和hash两种模式有什么区别

1、hash模式

把前端路由用井号 #拼接在真实URL后面。当#后面的路劲发生变化时，浏览器不会重新发起请求，而是触发hashchange事件
浏览器兼容较好，但是路径在#后面比较丑

2、history模式

允许开发者直接更改前端路由，即更新浏览器的地址而不重新发起请求
是H5提供的新特性
路径比较正规，没有#
兼容性不如hash，需要服务端支持，否则一刷新页面就404

十、v-show和v-if的区别

跳过了简单的

v-show的转换不会触发组件生命周期，但是有更高的初始渲染消耗
v-if 有更高的切换消耗：
- 由FALSE变为true时，会触发beforecreate,create,beforeMount,mounted钩子
- 有true变为false时，会触发beforeDestory,destoryed方法