前端面试题整理2

1.讲解es6新增map和set？

2.Ts的枚举和元组是什么？

3.vue3中的beforeEnter钩子函数怎么用？

4.获取数据时，加载loading动画，在哪取消比较好Diff算法的优化在哪？

5.Jq中的$(this)和this的区别？

6.什么是回流什么是重绘？

7.Var let const的区别？

8.父组件如何调用子组件的方法？

9.什么是闭包?使用闭包的时候需要注意什么？闭包的原理是什么？

10.小程序的上拉加载、下拉刷新怎么实现，如果使用纯js怎么实现？

11.Watch和watchEffect的区别？

12.什么是怪异盒子模型和标准盒子模型？

13.Git常用命令有哪些？

14.vue项目自定义指令鉴权怎么实现的？

16.For in 和for of的区别？

17.Vue和react的区别？

18.项目中状态码怎么处理？

19.Vue中setup使用语法糖和不使用的区别？

20.map和foreach的区别？

1.讲解es6新增map和set？

①set指的是“集合”数据结构，map指的是“字典”数据结构；

②set是以“[value,value]”形式存储元素，map是以“[key,value]”形式存储元素；

③set不能通过键查找特定值，而map可用get()通过键查找特定值并返回。

2.Ts的枚举和元组是什么？

枚举（enum）：是对javascript标准数据类型的一种补充,可以通过属性获取值，也可以通过索引。

元组(tuple) ：它允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

3.vue3中的beforeEnter钩子函数怎么用？

beforeEnter路由独享守卫，可以在路由进入之前进行一些校验操作。

4.获取数据时，加载loading动画，在哪取消比较好Diff算法的优化在哪？

加载loading动画一般在发起请求时就开始显示，在数据加载完成后再隐藏。如果是通过异步请求获取数据，在异步请求的回调函数中隐藏loading动画，这样可以确保数据已经加载完成。

Diff算法的优化，可以从以下几个方面入手：

1.减少比较的次数：在数据更新时，对比前后两个数据是否一致，如果一致则不进行比较。

2.缓存结果：可以将比较的结果缓存在内存中，下次比较时直接读取缓存结果，避免重复比较。

3.分片比较：将大型数据拆分成多个小的数据块进行比较，这样可以将比较的时间降到最低。

5.Jq中的$(this)和this的区别？

this表示当前的上下文对象是一个html DOM对象，可以调用html对象所拥有的属性和方法。

$(this)表示的上下文对象是一个jQuery的上下文对象，可以调用jQuery的方法和属性值。

6.什么是回流什么是重绘？

回流：DOM树中的元素被增加或删除，导致浏览器需要重新去渲染整个DOM树，这个过程叫做回流。

重绘：DOM树中没有元素被增加或删除，只是样式的改变，针对浏览器对某一元素进行单独的渲染，这个过程叫做重绘。

回流比重绘更消耗性能，回流必然导致重绘，但重绘不一定导致回流。

7.Var let const的区别？

①变量提升：var声明的变量存在变量提升，let和const不存在变量提升，即它们所声明的变量必须在声明后使用，否则报错。

②块级作用域：var不存在块级作用域，let和const存在块级作用域。

③重复声明：var允许重复声明，let和const在同一作用域下不允许重复声明。

④修改声明的变量：var和let可以修改，const声明的是一个只读常量，一旦声明，常量的值就不能改变，但对于对象和数据这种引用类型，内存地址不能修改，里面的值可以修改。

⑤初始值设置：var和let可以不用设置初始值，const必须设置初始值。

8.父组件如何调用子组件的方法？

①通过ref直接调用子组件的方法；

②通过组件的$emit、$on方法。

9.什么是闭包?使用闭包的时候需要注意什么？闭包的原理是什么？

闭包：在一个函数内部创建另一个函数。把内嵌的函数称为闭包，它可以访问外部函数的局部变量。

注意：①闭包可以访问外部函数的变量，但是不能修改外部函数的变量，因为外部函数的变量仅在外部函数的作用域中可见。

②闭包中引用的变量会一直存在于内存中，直到闭包被销毁。

③闭包可以访问外部函数的参数，但是需要注意参数的作用域问题。

闭包的原理是在函数执行完毕之后，函数的作用域和作用域链不会被销毁，而是被保存下来，以供内部函数使用。当内部函数访问外部函数的变量时，会从作用域链中查找该变量，如果找到则使用，否则会向上一级作用域链继续查找，直到找到为止。因此，闭包可以在函数执行完毕后仍然访问到外部函数的变量。

10.小程序的上拉加载、下拉刷新怎么实现，如果使用纯js怎么实现？

小程序的上拉加载、下拉刷新可以通过小程序提供的组件和API来实现。

①上拉加载：使用 onReachBottom 事件，在页面滚动到底部时触发加载更多的数据。在触发事件时，可以调用数据加载的方法，例如请求接口获取数据并渲染到页面中。

②下拉刷新：使用 onPullDownRefresh 事件，在用户下拉页面时触发刷新操作。在触发事件时，可以调用数据刷新的方法，例如重新请求接口获取最新的数据并渲染到页面中。刷新完成后，需要调用 wx.stopPullDownRefresh() 结束刷新状态。

如果要使用纯js来实现上拉加载、下拉刷新，可以通过判断滚动距离和下拉距离来触发对应的事件，然后通过js操作DOM来更新页面数据。

11.Watch和watchEffect的区别？

①执行机制：watchEffect是立即执行，而watch不会立即执行；

②参数不同：watchEffect只需要传递一个回调函数，而watch至少要有两个参数；

③结果不同：watchEffect只能获取到新值，而watch可以同时获取新值和旧值。

12.什么是怪异盒子模型和标准盒子模型？

怪异盒子模型：width（border+padding+width）+margin

标准盒子模型：width+border+padding+margin

13.Git常用命令有哪些？

git init：初始化一个git仓库

git clone：clone一个git仓库

git config：配置信息

git add：添加文件到缓存命令

git status：查看文件的状态命令

git diff：查看更新的详细信息命令

git commit：提交命令

git reset HEAD：取消缓存命令

git rm：删除命令

git mv：移动或重命名命令

14.vue项目自定义指令鉴权怎么实现的？

使用directive方法

在vue2项目中 src/directives/index.ts 

import Vue from 'vue';
import store from '@/store';
export default function directive() {
    Vue.directive('auth', {
        inserted: (el, binding) => {
            if (!store.state.buttons.has(binding.value)) {
                el.remove();
            }
        }
    });
}

在main.ts中全局注册：
import directive from './directives';
Vue.use(directive);

在vue文件中使用：
<el-button  v-auth="'system:role:insert'">新增</el-button>

在vue3项目中 src/directives/index.ts

import { App } from "vue";
import { useStore } from "vuex";
import createStore from "@/store";
const list = createStore.state.buttons;
// 自定义指令，用于判断按钮权限
export default function directive(app: App) {
    app.directive("auth", {
        created: (el, binding) => {
            if (!list.has(binding.value)) {
                el.remove();
            }
        },
    });
    app.directive("bgColor", {
        beforeMount: (el, binding) => {
            el.style.backgroundColor = binding.value;
        },
    });
}
其他如上。

①存储位置不同：cookie存放在本地，而session存放在服务器上；

②存储容量大小不同：cookie存储的容量较小，一般<=4KB，而session存储容量大小没有限制；

③存储有效期不同：cookie可以长期存储，但可以设置时间。session在超过一定的操作时间(通常为30分钟)后会失效；

④安全性不同：cookie安全性较低，而session安全性较高；

⑤域支持范围不同：cookie支持跨域名访问，而session不支持跨域名访问；

⑥存储的数据类型不同：cookie中只能保管ASCII字符串，而session中能够存储任何类型的数据。