web面试题总结

ES6相关:

1.var、let、const之间的区别

let声明变量和const声明常量，两个都有块级作用域
ES5中是没有块级作用域的，并且var有变量提升（在下面声明变量在上面依然可以拿到），在let中，使用的变量一定要进行声明
var声明变量可以重复声明，而let不可以重复声明

let有暂存死区，在声明的上面访问变量会报错
const声明之后必须赋值，否则会报错
const定义不可变的量，改变了就会报错

2.使用箭头函数应注意什么？

用了箭头函数，this就不是指向window，而是父级（指向是可变的）

不能够使用arguments对象

不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误

不可以使用yield命令，因此箭头函数不能用作 Generator 函数
 

3.ES6的模板字符串有哪些新特性

基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定

在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)就能解决
 

let name = 'web';
        let age = 10;
        let str = '你好，${name} 已经 ${age}岁了'
        str = str.replace(/\$\{([^}]*)\}/g,function(){
            return eval(arguments[1]);

4 ES6 怎么写 class 
 

ES6的class可以看作是一个语法糖，它的绝大部分功能ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法

 

//定义类
class Point { 
  constructor(x,y) { 
      //构造方法
       this.x = x; //this关键字代表实例对象
       this.y = y; 
  } toString() {
       return '(' + this.x + ',' + this.y + ')'; 
  }
}

5.forEach、for in、for of三者区别

　　forEach更多的用来遍历数组

　　for in 一般常用来遍历对象或json

　　for of数组对象都可以遍历，遍历对象需要通过和Object.keys()

　　for in循环出的是key，for of循环出的是value

6.使用结构赋值，实现两个变量的值的交换

let a = 1;let b = 2;
[a,b] = [b,a];

7.下面的输出结果是多少
const promise = new Promise((resolve, reject) => {
    console.log(1);
    resolve();
    console.log(2);
})

promise.then(() => {
    console.log(3);
})

console.log(4);

VUE相关:

1. vue的实现原理？

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
 

2.vue声明周期

beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作

beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的，不能直接操作页面的dom和获取dom对象

mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步

updated：页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的data和 methods、指令、过滤器 ……都是处于可用状态。还没有真正被销毁

destroyed： 这个时候上所有的data和methods、指令、过滤器 ……都是处于不可用状态。组件已经被销毁了。

3.hash与history的区别:

最明显区别是hash有一个#history没有,hash路由改变不会导致浏览器端向服务端发送请求.路由改变时用hashchenge
history改变时会导致浏览器端向服务端发送请求，需要服务端的处理，前后端请求的url不一致的话需要则应该始终
返回同一个html页面。搭配前端路由的404页面支持

 

4.vuex的使用？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，具体包括：

1）state：Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。

2）getter：state的计算属性，类似vue的计算属性，主要用来过滤一些数据。

3）action：actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。可以异步函数调用

4）mutation：mutations定义的方法动态修改Vuex 的 store 中的状态或数据

5）modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。


5.vue的双向绑定是如何实现的，用原生怎么写一个双向绑定
6. 什么是虚拟dom，实现原理是什么

Tags：面试题

转载：感谢您对YU到边个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源YU到边个人博客”。/web/note/2021-11-03/78.html

很赞哦！ ()