js基础

1）判断 js 类型的方式

typeof
instanceof
Object.prototype.toString.call()

1.1）typeof和instanceof 区别以及缺陷，以及解决方案

typeof和instanceof 区别

instanceof可以判断这个变量是否为某个函数的实例，而typeof不能
用法：typeof经常用来检测一个变量是不是最基本的数据类型，instanceof简单说就是判断一个引用类型的变量具体是不是某种类型的对象。

typeof缺陷：

1.不能判断变量具体的数据类型比如数组、正则、日期、对象，因为都会返回object,不过可以判断function，
如果检测对象是正则表达式的时候,在Safari和Chrome中使用typeof的时候会错误的返回"function",其他的浏览器返回的是object.
2.判断null的时候返回的是一个object，这是js的一个缺陷,判断NaN的时候返回是number

2）闭包的概念？优缺点？

闭包的概念：

闭包就是能读取其他函数内部变量的函数。内部函数在外部被引用。

优点：

避免全局变量的污染
希望一个变量长期存储在内存中（缓存变量）

缺点：

内存泄露（消耗）
常驻内存，增加内存使用量

2.1）常见闭包的例子

防抖、截流
dom事件
ajax请求

3）对象拷贝方法

Object.assign()
JSON.parse(JSON.stringify())

3.1）Object.assign()实现拷贝存在的问题

Object.assign是浅拷贝，不可以实现复杂对象(即：对象的属性中，有存在属性值为引用类型存在)的深拷贝

4）数组去重的方法

let arr = [1,1,2,3,4,5,5,6]

let arr2 = [...new Set(arr)]

reduce()

5）Array的方法中，哪些方法生成一个新的数组

concat()
map()
filter()
splice()
slice()

6）js 执行机制、事件循环

宏任务：主程序 settimeout setinterval ui渲染 postMessage setImmediate
微任务： promise mutaionObserver Object.oberve process.nextTIck
代码题

setTimeout(function() {
    console.log('setTimeout');
})

new Promise(function(resolve) {
    console.log('promise');
resolve()
}).then(function() {
    console.log('then');
})

console.log('1');

setTimeout(function() {
    console.log('2');

    new Promise(function(resolve) {
        console.log('3');
        resolve();
    }).then(function() {
        console.log('4')
    })
})

new Promise(function(resolve) {
    console.log('5');
    resolve();
}).then(function() {
    console.log('6')
})

setTimeout(function() {
    console.log('7');
 
    new Promise(function(resolve) {
        console.log('8');
        resolve();
    }).then(function() {
        console.log('9')
    })
})

参考资料 https://juejin.cn/post/6844903512845860872#heading-4

7）ES5 和 ES6 分别几种方式声明变量

ES5 有俩种：var 和 function
ES6 有六种：增加四种，let、const、class 和 import

8）防抖与节流理解，实现原理，代码实现

　　防抖：

　　在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：

如果在200ms内没有再次触发滚动事件，那么就执行函数
如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

　　截流：

　　持续触发的函数，每200ms执行一次，不足200ms，200ms后输出一次

9）修改this指向的方式有哪些

call()和apply()
bind()

10）常见的内存泄漏

全局变量不用 var 声明的变量，相当于挂载到 window 对象上。如：b=1; 解决：使用严格模式
被遗忘的定时器和回调函数
闭包
没有清理的 DOM 元素引用

11）变量提升

foo(); // 1
var foo;
function foo() { console.log( 1 );
}
foo = function() { console.log( 2 );
};

输出结果，及原因

函数声明和变量声明都会被提升。但是一个值得注意的细节(这个细节可以出现在有多个“重复”声明的代码中)是函数会首先被提升，然后才是变量。

vue相关

1）Vue的双向数据绑定原理

2）Vue 的响应式系统

3）watch、methods 和 computed 的区别

4）vue生命周期

4.1）各生命周期应用场景

4.2）父子组件生命周期调用顺序

5）vue-router钩子函数

全局前置守卫 router.beforeEach
全局解析守卫 router.beforeResolve
全局后置钩子 router.afterEach
路由独享的守卫 beforeEnter
组件内的守卫 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

5.1）各个钩子的执行顺序

6）组件之间的传值方式

父组件与子组件传值 props/$emit
祖先组件与其所有子孙 provide/inject
event bus $emit/$on
vuex
$parent/$children　＆ ref
$attrs/$listeners

7）自定义组件的v-model实现

v-model 默认会利用名为 value 的 prop 和名为 input 的事件
model 选项可以用来指定prop event

8）使用vue如何判断页面是否编辑及编辑页面未保存离开时，给出弹窗提示

9）axios同时请求多个接口，如果当token过期时，怎么取消后面的请求？

10）vuex的store有几个属性值？分别讲讲它们的作用是什么？

state:存贮公共数据的地方
Getters：获取公共数据的地方
mutations：放的是同步的操作和reducer有点像通过store的commit方法来让mutations执行
action：放的是异步的操作通过dispatch的方法让action里面的方法执行
modules：将 store 分割成模块，每个模块拥有自己的 state、mutation、action、getter

通用知识

1）你接触过的设计模式有哪些，怎么使用的

2）对前端性能优化有什么了解

减少请求数量
减小资源大小
优化网络连接
优化资源加载
减少重绘回流
性能更好的API
webpack优化
缓存
http2
cdn

3）什么是跨域，及跨域的解决方式

4）浏览器的存储方式有哪些

5）输入URL发生什么（如果有服务端开发经验，简述服务端处理逻辑）

DNS 域名解析，并从 url 中解析出ip和端口号
浏览器与目标服务器建立一条 TCP 连接（三次握手）
浏览器向服务器发送一条 HTTP 请求报文
服务器返回给浏览器一条 HTTP 响应报文
浏览器进行渲染

HTML 解析出 DOM Tree
CSS 解析出 Style Rules
两者关联生成 Render Tree
Layout（布局）根据 Render Tree 计算每个节点的信息
Painting 根据计算好的信息进行渲染整个页面

关闭 TCP 连接（四次挥手）

前端面试题，整理