记录6月面试遇到的面试题

部分问题的答案出自个人理解，或者是摘抄别处的，这里只做问题的汇总和一些别人发的解析，框架相关的，部分直接看官方文档最好，官方文档讲的也很清楚

html

http和HTTPS和长连接区别

HTTP、HTTPS区别&详解

sessionstorage，localstorage和cookie区别

浅谈session,cookie,sessionStorage,localStorage的区别及应用场景

跨域的解决方案

jsonp
cors
iframe
JS跨域请求解决方案

css

垂直水平居中

前端面试题：CSS实现水平垂直居中

css选择器

（+）相邻兄弟选择器
（~）后续兄弟选择器
（>）子元素选择器
CSS选择器笔记

js相关

各类型转布尔类型的结果

除了 undefined， null， false， NaN， ‘’， 0， -0，其他所有值都转为 true，包括所有对象。

数组去重

for 循环遍历
new Set
filter 去重
…
JavaScript数组去重（12种方法，史上最全）

闭包的理解（基本必考）

学习Javascript闭包

箭头函数和普通函数区别

箭头函数与普通函数的区别

对象考察

var a = 10;
(function () {
    console.log(a)
    a = 5
    console.log(window.a)
    var a = 20;
    console.log(a)
})()

依次输出：undefined 10 20

作用域考察

var a = 10;
(function () {
    console.log(a)
    a = 5
    console.log(window.a)
    var a = 20;
    console.log(a)
})()

依次输出：undefined 10 20

promise和async/await区别

promise和async/await区别

排序方法

快速排序
冒泡排序
选择排序
三大经典排序 | 冒泡排序，选择排序，快速排序

es6了解哪些

let const
解构赋值和展开
箭头函数
promise
async await
generator 生成器
Map/Set
数组新增的一些方法
…
（这里一般会根据你将的哪些来进行提问）

继承和this指向考察

function Primitive(){
    this.say=function(){
        console.log(this.name)
    }
}
function Other(name,age){
    Primitive.call(this)
    this.name=name;
    this.age=age;
    
}
Other.prototype.say=function(){
    console.log("helo")
}
let test = new Other("my",10);
test.say(); //my

输出：my

js中判断数据类型有哪些方法，各有什么优缺点？

typeof
可以对JS原始类型做出准确的判断（除了null）

typeof "" == "string" //true
typeof 1== "number" // true
typeof []== "array" // false
typeof "" == tring //false

优点：使用简单
缺点：只能用于检查原始类型（typeof null ->“object”）

instanceof
判断对象与引用类型的构造函数在原型链上的关系

new String() instanceof String //true
new Array() instanceof Array //true
"" instanceof String //false

优点：可以正确的判断引用类型，因为内部机制是通过判断对象的原型链
缺点：只能判断引用类型，对原始类型不能判断

constructor
通过原型链的构造函数进行判断

"".constructor == String //true
[].constructor == Array //true
undefined.constructor == undefined //error

优点：基本能检测所有的类型（除了null和undefined）
缺点：constructor易被修改，也不能跨iframe

Object.prototype.toString.call
toString是Object原型对象上的一个方法，该方法默认返回其调用者的具体类

Object.prototype.toString.call("");//[object String]
Object.prototype.toString.call([]);//[object Array]
Object.prototype.toString.call(null);//[object Null]

优点：可以正确的检测出所有类型
缺点：IE6下，undefined和null均为Object

防抖和节流有什么作用（是否可以手写防抖和节流？）

防抖：指定时间内频繁调用事件触发只有最后一次有效

function debounce(fn,timer){
    let time = null;
    return function(...args){
        if(time!=null){
            clearTimeout(time);
        }
        time = setTimeout(() => {
            fn.apply(this,args)
        }, timer);
    }
}

节流：指定时间内只触发一次事件，避免事件被触发多次

function throttle(fn,timer){
    let time = 0;
    return function(...args){
        let date = new Date().getTime();
        if(date-time>timer){
            time = date
            fn.apply(this,args)
        }
    }
}

vue和react对比

Vue与React两个框架的区别对比

Vue

生命周期

主要就是 beforeCreate ， created ， beforeMount ，mounted 这几个钩子
生命周期函数面试题

组件通讯

6种的通讯方式
vue组件间通信六种方式（完整版）

vuex

浅析Vuex及相关面试题答案

路由有几种模式？如何定义动态路由等

vue路由面试题

路由守卫

主要就是全局路由守卫、路由独享守卫和组件内的守卫
路由守卫面试常考

vue响应式原理

最简化 VUE的响应式原理

React

生命周期

React 生命周期详解

组件通讯

React中组件通信的几种方式
Context

redux

redux 介绍及配合 react开发

路由

React Router
React Router 使用教程

虚拟dom

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

虚拟DOM介绍

keys的作用

在React Diff算法中React会借助元素的key值来判断该元素是新近矿建的还是被移动而来的元素，从而减少不必要的元素渲染

diff算法

react diff算法浅析

setState同步还是异步

React 中setState更新state何时同步何时异步？

纯组件、函数组件和类组件区别

React函数组件和类组件的区别

hook和普通类的区别

react中常见hook的使用方式与区别

其他相关

对webpack和gulp的了解，他们的区别是什么

webpack和gulp使用总结

其他面经链接

记录一下3月底到4月的前端开发工程师面经
前端知识点
跳槽人速来，面经&资源分享
React Redux面试题