面试准备

Judian_xd
251 阅读11分钟

css篇

1.元素居中 ❤️

  • flex布局
  • 相对定位中，transform

2.项目px、rem、em区别 ❤️

3.display和visibility的区别

4.讲讲项目响应式布局怎么做的 ❤️

5.vue项目sass是怎用的，页面中style怎么写scoped作用是什么

原生js篇

1.this的指向和作用域的理解 ❤️

2.apply和call理解和用法

call和apply是为了动态改变this而出现的，当一个object没有某个方法，但是其他的有，我们可以借助call或apply用其它对象的方法来操作。

  • 如果我们有一个对象 whiteDog = {food:"bone"} , 我们不想对它重新定义say方法， 那么我们可以通过call或apply用blackCat的say方法：blackCat.say.call(whiteDog);

  • document.getElementsByTagName选择的dom节点是一种类似array的array。它不能应用Array下的push,pop等方法。我们可以通过

    var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

    这样domNodes就可以应用Array下的所有方法了

  • call 和apply的用法都是一样的，只是传参不同，apply是数组，call是参数

3.javascript的数据类型有哪些 ❤️

基本数据类型和对象数据类型

  • 需要说明哪些是基本数据类型

    Number ,String,Boolean,Null,Undefined都是基本数据类型，基本数据类型时按值访问的，因为可以直接操作保存在保存在变量中的实际值。

  • 哪些是对象数据类型

    引用数据类型也就是对象类型 Object type.比如 Object,Array,Function,Data等。 引用数据类型是保存在堆内存中的对象。 与其他语言不同的是，你不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地址。 所以，引用类型数据在栈内存中保存的是对象在堆内存中的引用地址，通过这个引用地址可以快速查找到保存在堆内存中的对象。

  • 说明基本数据类型和对象数据类型存储方式的区别

  • 根据基本数据类型和对象数据类型理解，讲讲深拷贝和浅拷贝，说清楚深拷贝的实现思路

如何实现深拷贝：1、递归 2、判断类型 3、检查循环引用(环) 4、不可能拷贝 proto

4.对DOM元素的事件冒泡理解，怎么阻止事件冒泡 ❤️

  • 事件冒泡：事件开始时，由最具体的元素接收，然后逐级向上传播到较为不具体的元素。

  • 事件捕获：不太具体的节点更早的接收事件，而最具体的元素最后接收事件，和事件冒泡相反。

5.javascript原型对象与原型链的理解

6.原生javascript的继承怎么实现

如果自己实现就会用到apply或call还有原型链的知识

7.对于闭包和立即执行函数的理解 ❤️

闭包是： 定义在一个函数内部的函数。外部函数不能引用内部函数的变量， 但是内部函数可以引用外部函数的变量（函数作用域的问题），当内部的函数引用的外部函数的变量就形成了闭包。一定说清楚内部函数要引用外部函数的变量才会形成闭包。

function a() {
    let avalue = 1;
    function b() {
        let bvalue = avalue;
        console.log(bvalue); //1
    }
}

8.js中typeof和instanceof的区别

ES6篇

1.新增声明命令 let 和 const， let表示变量 const表示常量。

2.模板字符串``的用法

3.箭头函数 ❤️

箭头函数this指向的解释和原理

4.对象的扩展，对象的解构赋值

var person = {name:'小明',age:20,sex:'男'};
var {name,age,sex} = person;

5.promise对象的用法 ❤️

Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

  • 三种这状态：分别是 pending-进行中，resolved-已完成，rejected-已失败

catch 的用法

我们知道 Promise除了有一个then方法，还有一个catch方法，它是干什么的呢？ 其实它跟then方法的第二个参数的作用是一样的。用来指定reject的回调。

  • 链式操作
function runAsync1(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步执行1完成');
            resolve('随便什么数据1');
        }, 2000);
    });
    return p;            
}
function runAsync2(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步执行2完成');
            resolve('随便什么数据2');
        }, 2000);
    });
    return p;            
}
function runAsync3(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步执行3完成');
            resolve('随便什么数据3');
        }, 2000);
    });
    return p;            
}

runAsync1().then(function(data){
  console.log(data);
  return runAsync2()
}).then(function(data){
  console.log(data);
  return runAsync3()
}).then(function(data){
  console.log(data)
})

//2秒后打印 "异步执行1完成" "随便什么数据1"
//又2秒后打印 "异步执行2完成" "随便什么数据2"
//又2秒后打印 "异步执行3完成" "随便什么数据3"

在then方法中，可以直接return 数据，而不是Promise对象，在后边的then中就可以接受到数据了。

  • promise.all()的用法，返回值，抛出异常情况

promise.all()提供了并行执行异步操作的能力。并且在所有异步操作执行完成以后，才执行回调。

接收一个数组作为参数，数组里的元素最终都返回一个Promise对象。这样，三个异步的操作就并行执行了，等到他们都执行完以后，才会进入到then里边，那么三个异步操作执行以后返回的数据哪里去了呢？all会把所有异步操作的结果放进一个数组，并且把数组传递给then,就是上边的results。

6.async/await的用法 ❤️

  • async作为一个关键字放在函数前面，用来声明这个函数是一个异步函数。既然是异步函数就意味着该函数的执行不会阻塞后边的代码； async函数返回的是一个Promise对象。

  • await用于等待一个异步方法执行完成，await等待的是一个表达式，而表达式的计算结果是一个Promise对象或者其他值。

  • async和 await捕获异常，需要用到 try/catch的方式：

因为await后面跟着的是 Promise对象，当有异常的情况下，会被Promise对象内部的catch捕获。而await就是一个then的语法糖，并不会捕获异常，那么就需要借助try/catch来捕获异常，并进行相应的逻辑处理。

7.Object.keys()、Object.values()、Object.assign()

函数的用法和返回类型

  • Object.keys()：获取对象的所有属性名和方法名，不包括原型的内容。返回一个数组
  • Object.assign()：将多个原对象的属性和方法，合并到了目标对象上面。 可以接收多个参数，第一个参数是目标对象，后边都是源对象

8.常用的数组循环使用过方法有哪些，区别用法

比如Map，filter，forEach，find

vue篇

1.Vue的生命周期。生命周期中每个钩子函数的作用 ❤️

2.Axios自己平时怎么用 ❤️

  • 需要说axios请求工具类，request、和response的拦截器
  • Request拦截器请求过滤，加公共请求参数比如header里写入token
  • Response拦截器公共请求结果，判断处理请求状态

3.讲一讲对自己vuex状态管理的理解，怎么用的，页面怎么获得store数据 ❤️

  • State、getters、mutations、action、view之间的关系和调用
  • 重点mutations和action的不同之处。Mutations是同步的，action是异步的

4.vue-router跳转方式和传参 ❤️

  • 路由怎么传参
  • 传参时候如果参数在浏览器显示怎么写
  • 传参如果不想让浏览器看到参数怎么写

5.项目中，自己怎么使用路由，路由数据结构是怎么写。如果路由结构复杂有多个路由文件怎么应用

6.this.router和this.route的区别，this.$route自己用过哪些属性 ❤️

  • this.$router

    表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此方法获取到路由器对象，并调用其push(), go()等方法；

  • this.$route:

    表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等方法；

7.this.$nextTick自己怎么理解

vue 用异步队列的方式来控制 DOM 更新和 nextTick 回调先后执行

8.vue的全局组件怎么写 ❤️

vue.extend和vue.component的用法说清楚用法就好

  • Vue.extend 返回的是一个“扩展实例构造器”，也就是一个预设了部分选项的 Vue 实例构造器
var myVue = Vue.extend({
  // 预设选项
}) // 返回一个“扩展实例构造器”

// 然后就可以这样来使用
var vm = new myVue({
  // 其他选项
})

  • Vue.component 是用来全局注册组件的方法，

    其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用类似于 new myVue 这样的构造函数来生成组件实例，并挂载到自定义元素上，当然实际情况要比这复杂得多，还需要处理 props 数据传递、slot 内容分发、自定义事件、组件生命周期……事宜。

参照 mario.studio/vue-course/…

9.vue的混入怎么用

指的是Vue.mixin 的用法。 需要说清楚mixin的特点，比如混的created钩子函数和vue对象中created钩子函数执行顺序，当混入和vue对象methods中有同名方法执行顺序。

10.vue的自定义指令怎么用

Vue.directive

11.Vue的过滤器和全局过滤器，vue.filter

12.vue页面之间的数据通信方式 ❤️

参看 www.jianshu.com/p/768e002db… 说清楚自己常用的组件之间怎么传递数据就好。比如：父子组件之间传递数据。同级兄弟组件传递数据。Vuex数据传递

13.vue-router 有哪几种导航守卫 ❤️

14.vue 的 Keep-alive有没有使用过。Vue页面的缓存策略

15.Vue 的watcher和 computed区别和使用场景 ❤️

区别

computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。

watch 侦听器 : 更多的是「观察」的作用,无缓存性,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。

使用

当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算。

当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

16.vue数据双向绑定原理 ❤️

参看 zhuanlan.zhihu.com/p/101330697 这个里面有多个原理面试题

17.项目中跨越怎么做的 ❤️

  • 开发环境的proxy配置，生产环境需要nginx配置
  • 后端拦截器接口设置前端允许跨越请求权限

18.vue项目优化怎么做的 ❤️

参照 blog.csdn.net/qq_37939251… 这个问题涉及的点比较多。项目优化也是每个项目的重点，大部分面试官都会问，根据自己能搞明白说，方案说的越多越好。

19.项目用户登录怎么做的 ❤️

这个问题涉及多子系统之间用户单点登录判断，或者登录后返回token，项目缓存token的策略，如果项目不是多系统，就讲登录token相关的。 参看 www.jianshu.com/p/32e6eb231…

20.项目用户权限问题

大部分项目都是根据角色分配权限，用户登录后会由服务端根据角色返回该用户可以看到的路由页面，也就是说路由基本配置是后端返回的，当然返回后前端会对路由属性进行处理，前端页面按钮按钮会根据当前登录用户角色判断按钮是否显示。

webpack篇

1.vue-cli2、vue-cli3，webpack 配置文件结构是否了解

2.谈一谈自己怎么项目写过webapck那些配置

3.Vue项目单入口页面和多入口页面webapck配置 ❤️

生成多个html-webpack-plugin实例来解决这个问题

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:'development', // 开发模式
    entry: {
      main:path.resolve(__dirname,'../src/main.js'),
      header:path.resolve(__dirname,'../src/header.js')
  }, 
    output: {
      filename: '[name].[hash:8].js',      // 打包后的文件名称
      path: path.resolve(__dirname,'../dist')  // 打包后的目录
    },
    plugins:[
      new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'../public/index.html'),
        filename:'index.html',
        chunks:['main'] // 与入口文件对应的模块名
      }),
      new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'../public/header.html'),
        filename:'header.html',
        chunks:['header'] // 与入口文件对应的模块名
      }),
    ]
}

4.项目有哪些Webpack配置相关的优化

参看Webapck配置讲解相关 zhuanlan.zhihu.com/p/99959392

avatar
文章
阅读
粉丝