20道重要的前端面试题

1、js的数据类型

基础数据类型、值类型

数据类型	typeof 值	举例
String字符串	string	“abc”undefined'abc'undefineddef
Number数字	number	123，-12.5
Boolean布尔	boolean	trueundefinedfalse
undefined未定义	undefined	undefined
Symbol符号	symbol	symbol
null 空	object	null

复数据类型，引用类

数据类型	typeof	举例
Array数组	object	[]
Object对象	object	{}
function函数class类	function	function(){}
Map图	object	new Map([[]])
Set集合	object	new Set([])
weakMap，weakSet	object
DateundefinedMathundefined	object

2、值类型与引用类型的区别

值类型 key和value都存储在栈中。

引用类型栈中存放内存地址，真正值存储在堆中

// 值类型
var a = 15；
var b = a；
b = 20；
// b与a相互不影响
​
// 引用类型
var a = {age:15}
var b = a; // 把a的内存地址赋给b，a与b的值都指向同一堆中的内存地址
b.age= 18;
// 这个时候a.age 的值也是18

一个引用类型堆中的值可以被多个变量引用，修改其中一个会影响到其它。

3、什么是闭包，闭包的应用场景，闭包的缺点

闭包就是函数嵌套函数，函数作为参数被传入，作为返回值被返回。

闭包作用：

1. 形成局部作用域，

2. 在函数外部可以访问函数内部的局部变量

闭包的缺点

被闭包引用的变量不会被 销毁，会常驻内存，使用不当容易造成内存崩溃

4、什么是原型，什么是原型链

每个构造函数（class）都有一个显示的原型prototype

每个实例对象都有个隐示原型proto

实例的隐式原型proto等于其构造函数的显示原型prototype

当查找一个对象的属性或方法时先在实例上查找，找不到沿着proto向上逐级查找

我们把proto的proto形成的链条关系成为原型链

作用：1 原型链实现了js继承，2.原型可以给构造函数创建的实例添加公用方法

5、JS如何实现继承

1. class使用extends关键字实现继承

2. 通过原型链实现继承，

function B（）{
     A.call(this) //实现构造函继承
}
B.protoytpe = Object.create(A.prototype) //实现原型继承
B.prototype.constructor= B //修正构造函数

6、Call，apply的区别

call与apply都是执行一个函数，用第一个参数冒充函数的this

apply参数用的是数组形式

7、new关键字做了什么？

1. 创建空对象

2. call执行构造函数并传入空对象作为this

3. 指定空对象的构造函数

8、深拷贝&浅拷贝

深拷贝的方法

1、转字符串

var obj2 = JSON.parse(JSON.stringify(obj1))

2、 递归

function deeCopy(obj){
    if(typeof obj==="object"&&obj!==null){
      var result；
      if(obj.instanceof Array){
         result = [];
         for(var i=0;i<obj.length;i++){
               result[i] = deepCopy(obj[i])
         }
      }else{
         result = {};
         for(var k in obj){
             result[k] = deepCopy(obj[k])
         }
      }
      return result;
    }else {
        return obj;
    }
}

浅拷贝的方法

1、Object.assign(AundefinedB)

2、for in遍历拷1遍

3、{...A}对象扩展

9、js检测对象类型

typeof ：引用类型除function都返回 object

instance ：是某个函数的实例，在原型链有该构造函返回true

最准确：Object.prototype.toString.call(obj).slice(undefined-1)

10、事件流

冒泡流：事件由最具体的元素响应然后组件冒泡到最不具体的元素（html）

捕获流：从最不具体的元素捕获事件

开启捕获 addEventListenter第三个参数 true

阻止事件冒泡：e.stopPropagation()

11、事件代理

$(父元素).on(事件名，子选择器，响应函数)

把事件注册到多个元素共有的父元素上，通过事件的冒泡机制 响应事件

作用：动态添加的元素也可以响应事件

12、数组去重

set去重

filter过滤

var arr2 = arr1.filter((item,index)=>arr1.indexOf(item)===index)

13、异步和同步

同步是按顺序执行，会阻塞代码

异步非阻塞式执行代码

异步方法：回调函数，Promise，订阅发布模式，事件响应，async和await

14、手写ajax

ajax核心是通过XMLHttpRequest（xhr）与服务器异步交换数据，实现前端刷新更新视图

var  xhr = new XMLHttpRequest();
// 创建一个xhr对象
xhr.open("get","url地址")
//打开连接get方式
xhr.send(data)
// 发送数据到服务器
xhr.onreadystatechange = function(){
    // 监听xhr的变化
    if(xhr.readystate===4){ //状态4成功
        if(xhr.status ===200){ //响应码200
            // xhr.responseText 获取的数据
        }
    }
}

15、Promise

Promise 实现异步操作，解决回调函数层级过多形成的回调地狱问题

Promise resolve与reject状态发送改变不能更改

var  p = new Promise((resolve,reject)=>{
   var num = Math.random();
   if(num>0.5){
       setTimeout(()=>resolve(num),2000)
   }else{·
       reject(num)
   }
})
​
p.then(res=>{
// 成功 得到resolve的值
})
.catch(err=>{
// 拒绝 得到reject的信息 
})

Promise.reject()

Promise.all() 多个promise多完成才返回结果

Promise.race() 多个promise执行返回最快的一个

你在哪些地方用到promise

1. 定义api请求接口

2. 自定义jsonp用到

3. 弹框插件等待用户确定则resolve

4. 封装actions 用sync装饰 await实现异步

（等待，网络，等待用户确定的）（异步操作都会用到promise）

16、get与post区别

get 获取数据

post 新增，修改，删除

put 修改

delete 删除

get 有缓存的，可以收藏书签，方向，数据量2k

post 没有缓存，理论上没有大小限制

17、如何实现跨域

1. jsonp

2. 后端响应头允许

3. 代理

无论哪种跨越都需要后端支持

18、什么是MVVM（前后端分离）

M：model 模式存储数据

V：view 显示内容（html）

VM viewModel视图模块 连接视图与model模型 （

）

当model数据发生变化时候通过VM可以监听变化更新视图

当view视图发变化时候通过VM可以监听变化自动更新model数据

19、Vue2 响应式原理，（双向绑定的原理）

通过Object.defineProperty劫持对象的getter与setter

通过订阅与发布者模式结合

er观察者来连接视图与数据

当数据发生变化时候通知说要订阅该数据的订阅者更新

20、v-if与v-show的区别

都可以隐藏节点

v-show通过css方式隐藏

v-if 直接移除dom节点

频繁切换显示与隐藏用v-show反之用v-if