前端面试题总结2022.9.20起--持续更新

2022.9.23 BaiWang初试

1、js遍历对象的方法

1. for … in obj
   使用for in会遍历对象的所有属性
   for…in的特性de 一个问题，其继承的属性会被遍历到，所以当我们不想要遍历被继承的属性，那么我们就可以使用Object.keys()
2. Object.keys（obj），Object.values（obj）
   obj：要返回其枚举自身属性的对象
   返回值：
   Object.keys（obj）:一个表示给定对象的所有可枚举属性的字符串数组。
   Object.values（obj）:一个表示给定对象的所有可枚举属性所对应的值得字符串数组。

const obj = {
　　　　id:1,
　　　　name:'zhangsan',
　　　　age:18
}

console.log(Object.keys(obj))//['id','name','age']
console.log(Object.values(obj))//['1','zhangsan','18']

3.Object.entries()
Object.entries()的返回值为Object.values()与Object.keys()的结合，也就是说它会返回一个嵌套数组，数组内包括了属性名与属性值

let obj = {
    name:"lisi",
    age:10
}
Object.entries(obj) // [['name', 'lisi'],['age', 10]]

4. Object.getOwnPropertyNames(obj,name)
   参数：一个是指定对象，一共是指定对象的某属性。
   如果传两个参数，那么返回属性对应的enumerable的值，true||false
   返回一个数组，包含对象自身的所有属性（包含不可枚举属性）
   遍历可以获取key和value

const obj = {
            id:1,
            name:'zhangsan',
            age:18
    }
    Object.getOwnPropertyNames(obj).forEach(function(key){
        console.log(key+ '---'+obj[key])
    })

2、js事件循环

这里考察的是EventLoop

• js是单线程语言，但是在处理一些操作时可能会堵塞或出现一些问题，比如如果同时对同一个Dom节点进行添加和删除操作，那么就会出现问题，我该听谁的，具体怎么操作？
• 所以js把任务分为同步任务和异步任务，当开始执行时，所有的同步任务会放在主线程中依次执行，异步任务则放入任务队列中，当执行完所有的同步任务，会从任务队列中取异步任务来执行，执行完之后再取，再执行，循环往复的过程被称为时间循环。
• 异步任务分为宏任务和微任务，具体执行顺序可看这篇博客，讲的很详细

3、js操作DOM节点的方法

4、vue2和vue3的区别？是否打印过vue2中的data()?

1. 数据绑定原理不同，vue2采用Object.definePropety(),vue3采用proxy
2. 生命周期不同

vue2	vue3
beforeCreate	setUp
created	setUp
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestory	onBeforeUnmount
destoryed	onUnmount

3. 数据定义方式不一样
4. API不同，vue3有很多组合API

详细可见这篇博客

5、vue路由懒加载

整个网页默认是刚打开就去加载所有页面，路由懒加载就是只加载你当前点击的那个模块。
按需去加载路由对应的资源，提高首屏加载速度（tip:首页不用设置懒加载，而且一个页面加载过后再次访问不会重复加载）
实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
const router = new VueRouter({
 routes: [
    { path: '/login', component: () => import('@/views/login/index.vue') },
    { path: '/home',  component: () => import('@/views/home/home.vue') }
  ]
 
export default router

6、vue 路由常用那种，hash路由原理？

history和hash
hash：核心是onhashChange

 window.onhashchange = function () {
            console.log(666);
            // 获取当前hash值
            jump();
        }

        function jump() {
            const hash = window.location.hash.slice(1); // #/home
            let currentRouter = routes.filter(item => item.path === hash)[0]
            if (!currentRouter) {
如果hash地址在路由表没有哦就直接跳到/notfound页面
                currentRouter = routes.filter(item => item.path === '/notfound')[0]
                location.hash = currentRouter.path;
            }
            app.innerHTML = currentRouter.component
        }

7、vuex 如何更改state?vuex如何调用action里的方法或者mutations里的方法？

更改state有两种：

- 直接更改：this.$store.helloWorld =10  不建议
- 通过mutations去修改，现在mutations中定义修改count的方法，然后在页面中通过  this.$store.commit('SET_HW', '你好世界')修改

export default new Vuex.Store({
    store : {
        helloWorld : 'Hello World!'
    },
    mutations : {
        //在这里定义修改helloWorld的方法,到时候调用SET_HW就可以修改了
        SET_HW (str) {
            this.helloWorld = str
        }
    }
})

methods : {
    //这里我们新建一个函数给组件调用
    onClick () {
        //第一个参数为mutations中定义的函数，第二个参数为该函数的参数
        //如果有多个参数需要传递可以使用对象{}
        this.$store.commit('SET_HW', '你好世界')
    }
 

vuex如何调用action里的方法或者mutations里的方法

如果只有一个vuex模块，通过commit条用mutations的方法，通过dispatch条用action中的方法

• dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)
• commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)
  还有一种方法就是用vue辅助函数mapactions,mapmutations,通过这两个方法把方法先引进来，然后直接调用。辅助函数使用方法

import { mapActions } from "vuex";
methods: {
   ...mapActions([
      "SET_CURRENT_INFO"
    ])
}


methods: {
	setCurrentInfo() {
       this.SET_CURRENT_INFO("xxx");
	}
}

8、vuex模块化，如何拿到某一个模块里的数据

如果vuex划分module，那么我们在拿取某一模块的数据或方法时，需要

...mapState('moduleA', ['dataA']),
...mapMutations('moduleA', [
      handleDataA:'handleDataA', // 或者 'handleDataA'
    ]),
    // Actions
 ...mapActions('moduleA', ['_todoA']), // this._todoA();

如果我们想在vuex的某个模块中调用另一个模块的数据或方法，可以这样

actions: {
    async _todoB({commit, dispatch, state, rootState，getters }, payload) {
    // 调用state:
      console.log(rootState) // 打印根 state
      console.log(rootState.dataA) // 打印其他模块的 state
      
      // 调用actions:
      // 第一个参数是其他模块的 actions 路径, 第二个是传给 actions 的数据, 如果不需要传数据, 也必须预留, 第三个参数是配置选项, 申明这个 acitons 不是当前模块的
        dispatch('moduleA/_todoA',{},{root:true}) // 调用其他模块的 actions
      dispatch('rootActions',{},{root:true}) // 调用根模块的 actions
      
      //调用mutations
       commit('moduleA/handleDataA',{},{root:true}) // 调用其他模块的 mutations
      commit('rootMutations',{},{root:true}) // 调用根模块的 mutations
 	
 	console.log(rootGetters['moduleA/gettersFn']) // 打印其他模块的 getters
    },
},

参考链接

9、rem，当页面缩放时，px会不会发生变化，如何计算rem

当页面缩放时，px不会变化，
设计稿尺寸和当前尺寸计算一下得比例，可计算出rem
参考链接

10、vue项目搭建过程，vue3项目搭建过程遇到的问题

node-sass,sass-loader,css-loader兼容问题，vue3和vue2兼容问题
很多报错，一点一点解决

11、输出题

241123

2022.9.26 baiwang二面

1.说一下http，http版本区别，根据不同版本做过什么
2.cdn原理
3.有没有做过前端安全的处理，前端加密，加密原理
4.前端微服务
5.node了解到什么程度
6.有没有部署过项目，或者开发过后端内容
7.vue3有没有看过源码，

2022.10.28

1. vue如何抽离组件
2. vuex刷新数据消失如何解决
   • 利用locationStorage，当vuex值变化时，F5刷新页面，vuex数据重置为初始状态，要用到localStorage
   • 插件vuex-persistedstate vuex-persistedstate默认持久化所有state，可以指定需要持久化的state
3. vue如何做性能优化

1、合理使用v-if和v-show，
2.合理使用computed，
3.v-for加key，
4.自定义事件，dom事件及时销毁，
5.合理使用异步组件，
6.合理使用keepalive，
7.data层级不要太深，
8.使用vue-loader在开发环境做模板编译，
9.前端通用性能优化（如图片懒加载/减少 HTTP请求数/合理设置 HTTP缓存/资源合并与压缩/合并 CSS图片/将 CSS放在 head中/避免重复的资源请求/切分到多个域名），
10.使用ssr

4. 自己解决过得浏览器兼容问题
   • 不同浏览器margin和padding不同（*{margin: 0; padding: 0;}）
   • IE9以下浏览器不能使用opacity（{opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}。）
   • js事件对象兼容：e=e||window.e
   • 阻止事件冒泡：if (e.stopPropagation) { e.stopPropagation; } else { e.cancelBubble=true; }
   • 阻止默认行为的兼容：if (e.preventDefault) { e.preventDefault; } else { e.returnValue = false; }
   • 添加事件监听的兼容：if (target.addEventListener) { target.addEventListener(“click”, fun, false); } else { target.attachEvent(“onclick”, fun); }
5. bfc是什么
6. 事件三要素
7. vue项目搭建过程，需要处理哪些问题
   1、准备环境：node，vue，git
   2、安装，自定义配置，路由，vue版本，eslient校验,等等
   3、安装需要的依赖：sass-loader,node-loader等等，rem-loader配置，axios
   4、配置vue.config.js入口出口文件，devServer等
   5、配置eslintrc.js
   6、配置路由，引入文件，分配模块，封装axios