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

怼烎@ 2022-10-05 10:50 180阅读 0赞

### 跳转目录 ###

*  html
 *   *  http和HTTPS和长连接区别
     *  sessionstorage，localstorage和cookie区别
     *  跨域的解决方案
 *  css
 *   *  垂直水平居中
     *  css选择器
 *  js相关
 *   *  各类型转布尔类型的结果
     *  数组去重
     *  闭包的理解（基本必考）
     *  箭头函数和普通函数区别
     *  对象考察
     *  作用域考察
     *  promise和async/await区别
     *  排序方法
     *  es6了解哪些
     *  继承和this指向考察
     *  js中判断数据类型有哪些方法，各有什么优缺点？
     *  防抖和节流有什么作用（是否可以手写防抖和节流？）
     *  vue和react对比
 *  Vue
 *   *  生命周期
     *  组件通讯
     *  vuex
     *  路由有几种模式？如何定义动态路由等
     *  路由守卫
     *  vue响应式原理
 *  React
 *   *  生命周期
     *  组件通讯
     *  redux
     *  路由
     *  虚拟dom
     *  keys的作用
     *  diff算法
     *  setState同步还是异步
     *  纯组件、函数组件和类组件区别
     *  hook和普通类的区别
 *  其他相关
 *   *  对webpack和gulp的了解，他们的区别是什么
 *  其他面经链接

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

# html #

## http和HTTPS和长连接区别 ##

[HTTP、HTTPS区别&详解][HTTP_HTTPS]

## sessionstorage，localstorage和cookie区别 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70]  
[浅谈session,cookie,sessionStorage,localStorage的区别及应用场景][session_cookie_sessionStorage_localStorage]

## 跨域的解决方案 ##

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

# css #

## 垂直水平居中 ##

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

## css选择器 ##

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

# js相关 #

## 各类型转布尔类型的结果 ##

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

## 数组去重 ##

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

## 闭包的理解（基本必考） ##

[学习Javascript闭包][Javascript]

## 箭头函数和普通函数区别 ##

[箭头函数与普通函数的区别][Link 1]

## 对象考察 ##

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区别][promise_async_await]

## 排序方法 ##

快速排序  
冒泡排序  
选择排序  
[三大经典排序 | 冒泡排序，选择排序，快速排序][Link 2]

## es6了解哪些 ##

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

## 继承和this指向考察 ##

> 输出：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 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_React]

# Vue #

## 生命周期 ##

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

## 组件通讯 ##

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

## vuex ##

[浅析Vuex及相关面试题答案][Vuex]

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

[vue路由面试题][vue 1]

## 路由守卫 ##

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

## vue响应式原理 ##

[最简化 VUE的响应式原理][VUE]

# React #

## 生命周期 ##

[React 生命周期详解][React]

## 组件通讯 ##

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

## redux ##

[redux 介绍及配合 react开发][redux _ react]

## 路由 ##

[React Router][]  
[React Router 使用教程][React Router 1]

## 虚拟dom ##

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

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

[虚拟DOM介绍][DOM]

## keys的作用 ##

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

## diff算法 ##

[react diff算法浅析][react diff]

## setState同步还是异步 ##

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

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

[React函数组件和类组件的区别][React 2]

## hook和普通类的区别 ##

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

# 其他相关 #

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

[webpack和gulp使用总结][webpack_gulp]

# 其他面经链接 #

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

[HTTP_HTTPS]: https://blog.csdn.net/heyanxi0101/article/details/80397020
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70]: /images/20221005/9be4f6d00e3c410ba2cbd15aa3dfa414.png
[session_cookie_sessionStorage_localStorage]: https://www.cnblogs.com/cencenyue/p/7604651.html
[JS]: https://blog.csdn.net/weixin_42430194/article/details/81047285
[CSS]: https://www.cnblogs.com/liubeimeng/p/11182613.html
[CSS 1]: https://www.ruanyifeng.com/blog/2009/03/css_selectors.html
[JavaScript_12]: https://segmentfault.com/a/1190000016418021
[Javascript]: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
[Link 1]: https://www.cnblogs.com/biubiuxixiya/p/8610594.html
[promise_async_await]: https://blog.csdn.net/qq_37617413/article/details/90637694
[Link 2]: https://zhuanlan.zhihu.com/p/42541704
[Vue_React]: https://www.jianshu.com/p/4c812465ae97
[Link 3]: https://zhuanlan.zhihu.com/p/94601709
[vue]: https://segmentfault.com/a/1190000019208626
[Vuex]: http://caibaojian.com/vuex-interview.html
[vue 1]: https://www.jianshu.com/p/b7192672aa4a
[Link 4]: https://www.cnblogs.com/HaiJun-Aion/p/14665565.html
[VUE]: https://zhuanlan.zhihu.com/p/88648401
[React]: https://blog.csdn.net/qq_16525279/article/details/116839734
[React 1]: https://segmentfault.com/a/1190000012361461
[Context]: https://react.docschina.org/docs/context.html
[redux _ react]: http://www.ferecord.com/learning-react-redux.html#redux-redux
[React Router]: http://react-guide.github.io/react-router-cn/docs/Introduction.html
[React Router 1]: http://www.ruanyifeng.com/blog/2016/05/react_router.html
[DOM]: https://www.jianshu.com/p/616999666920
[react diff]: https://blog.csdn.net/qq_26708777/article/details/78107577
[React _setState_state]: https://www.jianshu.com/p/799b8a14ef96
[React 2]: https://blog.csdn.net/gtLBTNq9mr3/article/details/91349397
[react_hook]: https://www.cnblogs.com/vigourice/p/14629866.html
[webpack_gulp]: https://blog.csdn.net/qq_33050575/article/details/69273120?utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control
[3_4]: https://juejin.cn/post/6954906499353149471
[Link 5]: https://juejin.cn/post/6968764282519437343
[Link 6]: https://juejin.cn/post/6942988170208215076
[React Redux]: https://blog.csdn.net/hzxOnlineOk/article/details/100929501