高频面试题讲解

最新推荐文章于 2024-04-18 11:40:48 发布

背包编程

最新推荐文章于 2024-04-18 11:40:48 发布

阅读量373

点赞数

文章标签： es6 css3 js vue node.js

本文链接：https://blog.csdn.net/m0_50865651/article/details/117931343

版权

高频面试题讲解

js数据类型

基本类型： number、string、boolean、null、undefined、symbol
引用（复合类型）类型: object（函数、对象、数组等）

不同类型的存储方式：

基本类型：基本类型值在内存中占据固定大小，保存在栈内存中
引用类型：引用类型的值是对象，保存在堆内存中，而栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址

symbol类型介绍

Symbol对象是es6中新引进的一种数据类型，它的作用非常简单，就是用于防止属性名冲突而产生。还可以实现属性的私有化(private)。

Symbol的最大特点就是值是具有唯一性，这代表使用Symbol类型的值能做独一无二的一些事情。

此外，Symbol没有构造函数，这使得我们不能new它，直接使用即可。

symbol类型应用场景：

设置对象唯一键（防止对象合并属性名冲突）

// 一个班级有两个同学，都叫张三，通过
// 存储和获取的时候通过Symbol()来操作，就唯一了
let user1 = {
    name: '张三',
    key: Symbol()
};

let user2 = {
    name: '张三',
    key: Symbol()
};

let score = {
    [user1.key]: {html: 90, css: 100},
    [user2.key]: {html: 80, css: 90}
}

console.log(score[user2.key])

作为对象私有属性，不让别人看到，来模拟类中private属性的效果

Symbols 在 for...in 迭代中不可枚举。另外，Object.getOwnPropertyNames() 不会返回 symbol 对象的属性，但是你能使用 Object.getOwnPropertySymbols() 得到它们。

var obj = {};

obj[Symbol("a")] = "a";
obj["c"] = "c";
obj.d = "d";

for (var i in obj) {
   console.log(i); // "c" and "d"
}

注：

Symbol声明和访问使用 []（变量）形式操作，不能使用 . 语法因为 .语法是操作字符串属性的

当使用 JSON.stringify() 时，以 symbol 值作为键的属性会被完全忽略：

js基本包装类型

js除了基本数据类型和引用数据类型外，JavaScript还提供了三种基本包装对象：number、boolean和string。

let str = 'abc' 
typeof str; // 'string'

let str2 = new String('abc') 
typeof str; // 'object'
str === str2; // false

虽然包装对象看上去和原来的值一模一样,用typeof查看他们的类型已经变为object了！所以，包装对象和原始值用===比较会返回false：

基本(原始)类型和基本包装类型的区别就是生存期不同，在代码执行后就会销毁实例。

var str = "abc";
str.age= "18";
console.log(str.age) ;// undifined第二行中给str添加了age属性，在代码执行后就会销毁，第三行再次访问的时候，age就不见了； 但通过构造函数形式是不会销毁的。


var str = new String('abc');
str.age= "18";
console.log(str.age); // '18'

但同时包装类型也具备与各自基本类型相应的特殊行为。

实际上：每当读取一个基本类型值的时候， “后台就会创建一个对应的基本包装类型的对象”，从而能够调用其相应原型上面的一些属性和方法来操作这些数据。

let str = 'abc'; 
str.length; // 3
str.toUpperCase(); // ABC

判断一个变量的数据类型

Object.prototype.toString.call用来判断类型再合适不过，借用它我们几乎可以判断所有类型的数据：

而之前的typeof如果用来判断数据类型，数组对象的结果都是object类型，就无法准确区变量是数组还是对象。

// 借用Object.prototype.toString.call()获取数据类型
Object.prototype.toString.call(变量);

如判断一个变量是否是数组？

function isArray(arr){
    if(Object.prototype.toString.call(arr) == '[object Array]'){
        return true;
    }
    return false;
}


console.log( isArray(['abc']) ); // true
console.log( isArray({name:"大白"}) ); // false

或者借助es6的Array.isArray来判断

获取精确的数据类型

function typeOf(obj) {
    const toString = Object.prototype.toString; // 获取原始的toString方法
    const map = {
        '[object Boolean]'  : 'boolean',
        '[object Number]'   : 'number',
        '[object String]'   : 'string',
        '[object Function]' : 'function',
        '[object Array]'    : 'array',
        '[object Date]'     : 'date',
        '[object RegExp]'   : 'regExp',
        '[object Undefined]': 'undefined',
        '[object Null]'     : 'null',
        '[object Object]'   : 'object'
    };
    return map[toString.call(obj)];
}

this指向问题

记住一句话：this永远指向最后的调用者。

专业点说：this指向其绑定所在函数执行上下文中的this.

如果在全局中调用，函数中this一般是window,在严格模式下window为undefined。
也可以通过bind/call/apply显式改变this的指向。

在箭头函数中，this绑定其父级上下文中的this.

var obj = {
	name: "24"
	getName: function(){
		console.log(this)
		console.log('名字' + this.name)
	}
}

obj.getName(); // this 指向obj
var func = obj.getName;
func(); //  this 指向 window 实质上是全局window对象在调用  ，

DOM中的this:

<body>
    <!-- this: 代表当前绑定的标签DOM对象 -->
    <button onclick="foo(this)">btn</button>
</body>
<script>  

    function foo(ele){
        console.log(ele.innerHTML);
    }

</script>

一些常见的DOM操作不要忘记。

jquery中的this

$("#box).click(function(){
    console.log(this);  //  代表当前绑定的标签DOM对象
    // 转出jquery对象
    console.log(  $(this) )
})

.vue单文件中的this

this代表当前组件的components对

改变this指向

通过 bind/call/apply

语法：

函数名.bind(对象，参数1，....)
函数名.call(对象，参数1，....)
函数名.apply(对象，[参数1,....]])

三种相同点：都可以改变函数内this的指向

不同点：

call/apply是立即执行函数
bind返回的是一个函数，并已经改变其中的this. 需要自己触发执行。

传参方式:

call参数一个一个传递，bind也是一样
apply传递参数数组

作用域和作用域链

作用域

定义了标识符(变量名、函数名)的有限访问范围。

仅有函数才会产生局部（函数）作用域

什么是作用域链：

函数内部访问函数外部的标识符(变量名，函数名)，首先会在当前作用域中查找，若找不到，则去父级作用域中找，直到找到全局，这种按链式结构查形成的结构，就是作用域链。

原型和原型链

什么是原型：

每个函数或对象都有__proto__属性它的值是一个对象即原型对象

什么是原型链

通过构造函数创建的某个对象，当对象使用属性的时候，先在自身内存空间中进行查找，有就直接使用，若没找到就会沿__proto__属性找到其对象的原型，直到找到Object.prototype原型对象，最终属性找不到则返回undefined,方法找不到则报错。这种寻找过程形成的链式结构就是原型链

js继承。

for-in继承
call/apply伪造（构造函数）继承：去父类构造函数中伪造this,把构造函数属性添加子类对象的自身空间中。
原型继承：继承父类原型中的属性或方法，核心还是父类的对象__proto__找到父类的原型

 子类.prototype = new 父类();

组合继承（call伪造+原型继承）
es6 class-extends实现继承

闭包-Closure（重点）

什么是闭包（谈下你对闭包的理解）
怎样产生闭包？
闭包优缺点

你在哪些场景使用过闭包，即用闭包解决过哪些实际问题

单例模式

事件性能优化-防抖节流参考

函数防抖（debounce）和函数节流（throttle）都是为了缓解函数频繁调用，它们相似，但有区别.

函数节流：在设定的时间间隔内只会执行一次任务。如果在同一个单位时间内某事件被触发多次，只有一次能生效
函数防抖：只有任务触发的时间间隔超过设定的间隔后，任务才会执行一次。如果在这时间间隔内又被触发，则重新计时。

- 节流主要用在鼠标事件上
- 防抖主要用在键盘事件上

模块化编程（jquery库）
函数科里化
解决for循环引用问题，及for中使用延时器setTimeout。用let或IIFE解决。
…

函数科里化（理解）

概念：

柯里化，可以理解为提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数

实现 add(1)(2, 3)(4)() = 10 的效果

依题意，有两个关键点要注意：

传入参数时，代码不执行输出结果，而是先把所有参数先用闭包记忆起来
当传入空的参数时，代表可以进行真正的运算

完整代码：

function currying(fn){
    var allArgs = []; //闭包变量 用来接受所有的参数

    return function next(){
      	// 将伪数组转为真数组，
        // var args = Array.prototype.slice.call(arguments);
        var args = [].slice.call(arguments);

        if(args.length > 0){
            allArgs = allArgs.concat(args); // 传参了，返回闭包函数
            return next;
        }else{
            return fn.apply(null, allArgs); // 无参数，执行传入的函数
        }
    } 
}
var add = currying(function(){
    var sum = 0;
    for(var i = 0; i < arguments.length; i++){
        sum += arguments[i];
    }
    return sum;
});

柯里化，在这个例子中可以看出很明显的行为规范：

逐步接收参数，并缓存供后期计算使用
不立即计算，延后执行
符合计算的条件，将缓存的参数，统一传递给执行方法

对深浅拷贝（克隆）的理解，如何实现？

浅拷贝：浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
深拷贝：深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

ES6常用特性

let、const、箭头函数、对象简写、解构赋值、展开运算符、promise、asyng/await、数组方法map/filter等

数组中的reduce方法

mdn reduce参考

reduce方法接受一个函数作为累加器（“连续操作器”）
reduce为数组中的每一个元素依次执行回调函数。最终返回最后一次调用累加器的结果
语法：

arr.reduce(callback(accumulator, currentValue,[index],[array]), initialValue)

callback四个参数：

accumulator 累计器
currentValue 当前值
currentIndex 可选，当前索引
array 可选，数组

initialValue可选，累加器函数默认值

**注意：**如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始

代码示例：

var arr = [1,2,3,4];

var result = arr.reduce(function (accumulator, currentValue, index) {
    // console.log(accumulator, currentValue, index)
    return accumulator + currentValue;
});

console.log(result) // 10 


var result = arr.reduce(function (accumulator, currentValue, index) {
    // console.log(accumulator, currentValue, index)
    return accumulator + currentValue;
},10);

console.log(result) // 10

reduce在mvvm中的应用，通过key获取value

理解JavaScript执行上下文和执行栈

什么是执行上下文：

简而言之，执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念， JavaScript 中运行任何的代码都是在执行上下文中运行。

执行上下文类型：

执行上下文总共有三种类型：

全局执行上下文：这是默认的、最基础的执行上下文。不在任何函数中的代码都位于全局执行上下文中。它做了两件事：1. 创建一个全局对象，在浏览器中这个全局对象就是 window 对象。2. 将 this 指针指向这个全局对象。一个程序中只能存在一个全局执行上下文。
函数执行上下文：每次调用函数时，都会为该函数创建一个新的执行上下文。每个函数都拥有自己的执行上下文，但是只有在函数被调用的时候才会被创建。一个程序中可以存在任意数量的函数执行上下文。每当一个新的执行上下文被创建，它都会按照特定的顺序执行一系列操作。

执行上下文的生命周期包括三个阶段：创建阶段→执行阶段→回收阶段
- 创建阶段：1. 创建变量对象：首先初始化函数的参数arguments ，提升函数声明和变量声明 2.创建作用域链（Scope Chain） 3. 确定函数内this指向
- 执行阶段：执行变量赋值、代码执行
- 回收阶段：执行上下文出栈等待虚拟机回收执行上下文
Eval 函数执行上下文：运行在 eval 函数中的代码也获得了自己的执行上下文，但由于 Javascript 开发人员不常用 eval 函数，eval函数会将传入的字符串当做 JavaScript 代码进行执行行，非常危险。所以在这里不再讨论。

console.log(eval(‘2 + 2’)); // 4

eval(‘alert(“攻击”)’)

执行上下文栈

函数多了，就有多个函数执行上下文，每次调用函数创建一个新的执行上下文，那如何管理创建的那么多执行上下文呢？

JavaScript 引擎创建了执行上下文栈来管理执行上下文。可以把执行上下文栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hZXtcZpX-1623755833649)(http://note.youdao.com/yws/res/98/WEBRESOURCE98c81870b081d16959f62f86e62b3d01)]

从上面的流程图，我们需要记住几个关键点：

JavaScript执行在单线程上，所有的代码都是排队执行。
一开始浏览器执行全局的代码时，首先创建全局的执行上下文，压入执行栈的顶部。
每当进入一个函数的执行就会创建函数的执行上下文，并且把它压入执行栈的顶部。当前函数执行完成后，当前函数的执行上下文出栈，并等待垃圾回收。
浏览器的JS执行引擎总是访问栈顶的执行上下文。
全局上下文只有唯一的一个，它在浏览器关闭时出栈。

我们再来看个例子：

var color = 'blue';
function changeColor() {
    var anotherColor = 'red';
    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }
    swapColors();
}
changeColor();

上述代码运行按照如下步骤：

当上述代码在浏览器中加载时，JavaScript 引擎会创建一个全局执行上下文并且将它推入当前的执行栈
调用 changeColor函数时，此时changeColor函数内部代码还未执行，js执行引擎立即创建一个changeColor的执行上下文（简称EC），然后把这执行上下文压入到执行栈（简称ECS（stack））中。
执行changeColor函数过程中，调用swapColors函数，同样地，swapColors函数执行之前也创建了一个swapColors的执行上下文，并压入到执行栈中。
swapColors函数执行完成，swapColors函数的执行上下文出栈，并且被销毁。
changeColor函数执行完成，changeColor函数的执行上下文出栈，并且被销毁。

参考：

深入理解JavaScript执行上下文和执行栈

DOM和BOM区别

DOM: doucment object model,文档对象模型，提供了给一套操作文档元素的api。如操作属性、类型、文本等、事件等。
- className/classList: 类名操作
- setAttribute/getAttribute/removeAttribute：属性操作
- style.fontSize: 样式操作
- innerHTML/innerText/value: 文本操作
- 一些事件如单击onclick、键盘onkeyup、鼠标onmousedown、onmousemove、onmouseup等。
BOM:Browser object model,浏览器对象模型，提供了给一套操作浏览器的api。如前进、后退、刷新、跳转、获取屏幕分辨率，浏览器信息（navigator.userAgent，判断pc还是移动端）等

jQuery使用

jquery是一个操作页面dom元素的插件（库），常用的操作如：样式、属性、类名、文本、动画、绑定事件、发送ajax等。

$(‘css选择器’): 选择器

dom和jquery对象转换

转jquery对象： $(DOM对象)
转DOM对象： jquery对象[下标], 或者 jquery对象.get(下标)

css(): 样式操作
attr/prop: 属性操作
addClass/removeClass：类名操作
html()/val(): 文本操作
on/bind/事件名：绑定事件。 on还可以实现事件委托 $(父元素).on('click','子元素',callback)
事件流阶段：捕获阶段-》目标阶段-》冒泡阶段
阻止事件默认行为和冒泡。
事件委托的原理：冒泡。
冒泡的原理：根据鼠标点击的xy坐标如果在父元素范围内，则会被父元素感知到，则触发父的事件
哪些事件会冒泡：有onclick、onmouseover/onmouseout

onmouseenter/onmouseleave不会冒泡
unbind/off：事件解绑
$.get/$.post/$.ajax/$.getJson: ajax请求

$.ajax上传文件 + formData ，或者原生ajax + formData

核心：post请求传递二进制和文本数据，设置请求头content-type为multipart/form-data


   $.ajax({
       type:'post',
       data: new FormData(表单dom对象)，
       processData: false,	   # 代表不处理数据
       contentType: false，    #设置内容类型 multipart/form-data
       success:function(){
          
       }
   })

$.serialize: 序列化表单元素

什么是跨域，为什么会有跨域限制，如何解决跨域？

什么是跨域，为什么会有跨域限制

所谓的跨域就是浏览器为了安全起见，而采用的同源策略（Same origin policy）,阻止获取不同源中的数据信息。
同源略是 Netscape （网景公司）提出的一个著名的安全略，所有支持 Javascript 的浏览器都会使用这个策略，
web 是构建在同源策略之上的，浏览器只是针对同源策略的一种实现
所谓同源是指：协议、域名（IP），端口号要一致才行。这样才算是在同一个域里
如何才算跨域，请求与被请求的协议、域名、端口有不一样则就是跨域

如何解决跨域

开发环境： cors、webpack(devserver proxy代理)

生产环境：cors、nginx服务器代理

原生事件实现拖拽

原生实现需要三个事件： onmousedown、onmousemove、onmouseup

HTML5 拖拽 API

非同源受到哪些限制？

Cookie不能读取
DOM无法获取
Ajax请求不能发送

没有同源策略的危险场景

危险场景：有一天你刚睡醒，收到一封邮件，说是你的银行账号有风险，赶紧点进 www.yinghang.com 改密码,点击去之后网页会有类似下面代码：

<iframe id='baidu' src='https://www.baidu.com'></iframe>

<script> 
	let iframe = window.frames['baidu']
	let value = iframe.document.getElementById('含有敏感信息的input框的id,如密码，银行账号')
</script>

iframe标签非常危险，基本不用

如何解决跨域问题（三种）

代理
- 前端代理（webpack devserver.proxy）。vuecli脚手架配置devServer.proxy
- nginx代理 ( nginx proxy_pass配置反向代理)
cors。服务端设置响应头允许跨域。需要服务端配合
jsonp。 jsonp不是一种技术，它是程序员 智慧的结晶
- 原理：利用script标签的src属性不受同源策略限制的特点，服务端响应一个符合js函数调用语法的字符串。前端执行函数，从而达到跨域。
- 局限性：只能发送get请求，必须后端配合

开发环境：代理proxy、cors

生产（线上）环境：nginx代理、cors

前端代理： vue.config.js

module.exports = {
    // 只适用于开发环境
    devServer: {
      proxy: {
        '/api': {
          target: 'http://api.w0824.com/',
          ws: true,
          // changeOrigin 设置为true后，target才可以是一个域名
          changeOrigin: true
          
        },
        '/wx': {
            target: 'http://api.wx.com/',
            ws: true,
            // changeOrigin 设置为true后，target才可以是一个域名
            changeOrigin: true
            
          }
      }
    }
  }

请求：

import axios from 'axios';
export default {
  name: 'App',
  methods:{
    async getLunbo(){
      // var apiulr = "http://api.w0824.com"
      var res = await axios.get('/api/getlunbo');
      console.log(res)
    }
  }
}

异步发展历程

var xhr = new XMLHttpRequest ActiveXObject(‘Microsoft.XMLHTTP’)

get-4步骤， post-五部


var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    
    if(this.readyState == 4 && this.status == 200){
    	// data '{"name":"kobe"}'   '[{"name":"kobe"},{"name":"jame"}]' 
        var data = this.resonseText()； // data json字符串 
        var result = JSON.parse(data)
        // 把数据做一些业务逻辑
    }
}
xhr.open('post','url',true)
// 模拟post表单传递数据
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
xhr.send();

jquery-ajax $.get $.post

$.ajax()实现文件上传

原生post请求传递二进制和文本数据，核心post,设置请起头content-type为multipart/form-data

$.ajax({
    type:'post',
    data: new FormData(表单dom对象)，
    processData: false,	   # 代表不处理数据
    contentType: false，    #设置内容类型 multipart/form-data
    success:function(){
       
    }
})

get也可以实现文件上传，但要把图片文件变成base64编码即可 img src=“base64”

base64一般只需要把小图变成base64即可 webpack js .css-loader file-loader?limit=2048

Promise
1. promise解决了什么问题？解决了回调地狱问题
2. 什么是回调地狱：回调函数会层层嵌套，导致可读性差
3. 如何把原生ajax封装成一个promise版本
window.fetch （仅浏览器支持,返回一个promise）

async/await。异步终极解决方案。 (async/await本质是生成器* yield的语法糖形式)

var promiseArr = [];
console.time('query time')
arr.map(async (v)=>{
    promiseArr.push( query(v.sql) )
})
// 并行执行多个异步请求，效率更高
var result = Promise.all(promiseArr)
console.endTime('query time')

生成器generator

Generator函数的强大在于**允许你通过一些实现细节来将异步过程隐藏起来，**依然使代码保持一个单线程、同步语法的代码风格。这样的语法使得我们能够很自然的方式表达我们程序的步骤/语句流程，而不需要同时去操作一些异步的语法格式。

示例1：

function* myGenerator(){
    yield 1; // yield 提前返回
    yield 2;
    yield 3;
}

var gen = myGenerator();
// 通过next获取生成器下一次返回的值
// console.log(gen.next())
// console.log(gen.next())
// console.log(gen.next())
// console.log(gen.next())
// console.log(gen.next())


// var result;
// while(!(result = gen.next()).done){
//     console.log(result.value)
// }

// for(var i of gen){
//     console.log(i)
// }

示例2：生成器和异步的结合

Generator函数的强大在于允许你通过一些实现细节来将异步过程隐藏起来，依然使代码保持一个单线程、同步语法的代码风格。这样的语法使得我们能够很自然的方式表达我们程序的步骤/语句流程，而不需要同时去操作一些异步的语法格式。

也就是说，Generator 函数相当于就是一个异步操作的容器

<script>
    function* myGenerator(url) {
        yield fetch(url);
    }
	
    var gen = myGenerator('http://api.w0824.com/api/getlunbo');
    
   
    /*
    	// 或者写成函数自执行形式
        var gen = (function * (url){
            yield fetch(url);
        })('http://api.w0824.com/api/getlunbo')
	*/

    var promise = gen.next().value
    promise
        .then(res => res.json())
        .then(data => {
            console.log(data)
        })
</script>

nodejs中可以借助axios发送异步请求：

var axios = require('axios');
console.log('1')
    var gen = (function * (url){
        yield axios.get(url);
    })('http://api.w0824.com/api/getlunbo')
    
    var promise = gen.next().value
    promise.then(res => {
            console.log(res.data)
     })
console.log('3')

Co函数库

什么是 co 函数库

co 函数库是著名程序员 TJ Holowaychuk 于2013年6月发布的一个小工具，用于 Generator 函数的自动执行。

co 函数库可以让你不用编写 Generator 函数的执行器(即不用写next)

var co = require('co');
co(gen);

上面代码中，Generator 函数只要传入 co 函数，就会自动执行。

co 函数返回一个 Promise 对象，因此可以用 then 方法添加回调函数。

co(gen).then(function (){
  console.log('Generator 函数执行完成');
})

基本使用：

var axios = require('axios');
var co = require('co')

var gen = function * (url){
    var result =  yield axios.get(url);
    return result;
};

co(gen('http://api.w0824.com/api/getlunbo')).then(res => {
    console.log(res.data)
})

async和await终极解决方案

async/await本质是生成器* yield的语法糖形式，书写起来更加便捷

var axios = require('axios');
var co = require('co')

var gen = async function  (url){
    var result =  await axios.get(url);
    return result;
};

co(gen('http://api.w0824.com/api/getlunbo')).then(res => {
    console.log(res.data)
})

事件循环 event loop 宏任务微任务

js是单线程的,nodejs也是一样，基于chrome的v8引擎实现。
同步任务会直接进入主线程依次执行
异步任务会再分为宏任务和微任务

执行顺序：主线程中的同步代码执行完毕后，只剩下微任务和宏任务，顺序按照先微后宏来执行。

function test() {
    console.log(1)
    setTimeout(function () { // timer1
        console.log(2)
    }, 1000)
}

test();

setTimeout(function () { // timer2
    console.log(3)
})

new Promise(function (resolve) {
    console.log(4)
    setTimeout(function () { // timer3
        console.log(5)
    }, 100)
    resolve()
}).then(function () {
    setTimeout(function () { // timer4
        console.log(6)
    }, 0)
    console.log(7)
})

console.log(8)

// 结果： ？

补充关于 async/await 函数

setTimeout(() => console.log(4)) //（宏任务）

async function test() {
    console.log(1); // await前： 相当于 new Promise构造函数中的同步代码
    await Promise.resolve()
    console.log(3); // await后:  相当于 Promise.then 中的异步代码（微任务）
}

test()

console.log(2);

// 结果 ？  1 2 3 4

推荐阅读
- Tasks, microtasks, queues and schedules 任务，微任务，队列和时间表

Node服务端

用过node的哪些模块，如

fs：处理文件相关的
path：处理路径相关的
util：提供一些常用的方法，如promisify方法把异步函数变成一个promise版本
http：可以用来发送请求，搭建简易的web服务器
url：处理请求url相关的信息
…

express框架

用来做过什么? 1.搭建后台管理系统 2。搭建api 接口服务
中间件理解？可以在请求过程中对数据进行一系列的拦截和过滤处理。如对req对象进行修改、验证用户的权限等等。
有哪些内置中间件？
- 错误中间件
- 托管静态资源
- 解析post请求体参数
- cookie中间件
用过哪些第三方中间件

restful接口风格规范

核心：用正确的http方法对资源（数据）进行相应的操作

get请求：获取资源
post请求：新增资源
put请求：更新资源
delete请求：删除资源

Linux

常用命令：

ls、pwd、cd、vim、touch、echo、rm、rmdir、mkdir、ps、pkill、killall、netstat

nginx

部署一些静态资源
反向代理。如代理node服务如：3000端口

mysql

增删改查的sql：
- 查询select
- 删除delete
- 更新update
- 增加insert into
- 联表 left join
联表join,各联表的区别

内链接：查询两个边的共同满足的数据。即两个表的交集

左联接：左边为主表，查询主表的所有数据，右表未匹配到的用null来代替

右联接：右边为主表，查询主表的所有数据，左表未匹配到的用null来代替
一些常用的优化手段

前后端分离，JWT授权的原理

过程。基本思路如下
1. 用户输入账号登录请求后台服务器，
2. 服务器验证用户的信息，并生成用户信息token返回给前端。
3. 前端可以在cookie或localstore进行存储token。
4. 后续的每次请求可以通过自定义请求头把token带上，服务端验证token，从而获取用户的信息
token安全性； 1. 增加有效期（时效性） 2. 不存储密码字段，如密码等

从地址栏输入一个url，到看到页面，中间经历过了哪些过程？

大致流程

URL 解析
DNS(Domain Name System) 查询
TCP 连接
处理请求
接受响应
渲染页面

参考：在浏览器输入 URL 回车之后发生了什么（超详细版）

什么是协议缓存和强缓存

对于IE来说：
	只要请求的地址不发生变化，那么直接走强缓存。不会发送网络请求。状态码为 200
对于chrome和firefox
	只要请求的地址不发生变化，尝试请求协商缓存（后端根据请求头标识符来判断）。 会发送网络请求，状态码为304。

http协议和https协议

TCP协议连接三次握手和断开四次挥手

1. tcp连接三次握手的意义：

获取到服务器的IP, 三次握手才能确认双方的接收与发送能力是否正常。

简单理解：

第一次握手：由浏览器发给服务器，我想和你说话，你能 “听见” 吗?
第二次握手：由服务器发给浏览器，我能听见，你说吧！
第三次握手：由浏览器发给服务器，好，那我开始说话了。

2. tcp断开连接四次挥手的意义：

确保数据的完整性。

简单理解：

第一次挥手：由浏览器发给服务器，我的东西接受完了，你关闭吧。
第二次挥手：由服务器发给浏览器，我还有一些东西没接收完，你等一会，我接收好了我告诉你。
第三次挥手：由服务器发给浏览器，我接收完了，你断开吧！
第四次挥手：由浏览器发给服务器，好的，那我断开了。

相关参考：面试官，不要再问我三次握手和四次挥手

web性能优化有哪些手段，具体怎么实现

精灵图（雪碧图）
防抖节流
CDN加速
css、js合并压缩
避免重排和重绘
利用缓存
…太多

移动端常见问题

移动端点击事件延迟

移动端浏览器在触发点击事件的时候，通常会出现300ms左右延迟的问题

原因: 移动端的双击会缩放导致click判断延迟

解决办法：

禁止缩放 user-scalable=no

<meta name="viewport" content="user-scalable=no" >

利用fastclick.js插件。参见fastclick

// jQ中使用
$(function() {
    FastClick.attach(document.body);
});


// 原生中使用
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
    	FastClick.attach(document.body);
    }, false);
}


// vue中使用
npm i fastclick
var attachFastClick = require('fastclick');
attachFastClick(document.body);

移动端touch事件穿透（点透）问题

例如：一个a链接如果上层有个遮盖层，点击遮盖的touch事件会触发a链接默认行为，这就是事件穿透。

我们希望只触发遮盖的touch事件。

解决办法：

点击遮盖阻止默认行为

e.preventDefault();

借助fastclick.js

   if ('addEventListener' in document) {
       document.addEventListener('DOMContentLoaded', function() {
       	FastClick.attach(document.body);
       }, false);
   }

简述mvvm的原理

vue2 使用 Object.defineproperty进行数据劫持和利用观察者模式，观察到数据变更在通知页面渲染。
vue3 采用代理 es6-proxy ，代理对象

vue面试题

Vue的双向数据绑定原理是什么？

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

1、需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

2、compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

3、Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法 ③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退

4、MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

观察者模式，它是一对多的一种模式。

在Vue中，一代表什么？代表data中的某个数据

多代表什么？就是页面上凡是使用了这个数据的地方，都要更新。

就是页面上的很多”地方“，都观察着这个data,这就是一对多关系，所以用观察者模式来实现。

手写mvvm源码，实现双向绑定，实现基本的指令 v-html v-text v-model 等，

参考：剖析Vue原理&实现双向绑定MVVM

vue如何监听对象或者数组某个属性的变化
当在项目中直接设置数组的某一项的值，或者直接设置对象的某个属性值，这个时候，你会发现页面并没有更新。因为在Vue中，Object.defineProperty无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。
解决方式：

this.set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value)
this.set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象

或者这样解决，经过vue内部处理后可以使用以下几种方法来监听数组

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

由于只针对了以上八种方法进行了hack处理,所以其他数组的属性也是检测不到的，还是具有一定的局限性。

参考 Vue为什么不能检测数组变动

Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue里，是通过递归以及遍历data 对象来实现对数据的监控的，如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象，不管是对操作性还是性能都会有一个很大的提升。

而在Vue3中取代它的Proxy有以下两个优点;

可以劫持整个对象，并返回一个新对象
有13种劫持操作

vue组件的通信方式有哪些

父子组件: 自定义事件机制和 props
兄弟组件: eventBus、vuex
所有组件： vuex共享组件数据 ,且vuex中数据是响应式的

为什么vue组件中data必须是一个函数？

对象为引用类型，当复用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题

vue中v-if和v-show有什么区别？

v-if和v-show看起来似乎差不多，当条件不成立时，其所对应的标签元素都不可见，但是这两个选项是有区别的:

1、v-if在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销相对来说会比v-show大。

2、v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS切换

computed和watch的区别

compute计算属性：

支持缓存，只有依赖数据发生改变，才会重新进行计算

不支持异步，当computed内有异步操作时无效，无法监听数据的变化

computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：

侦听属性watch：

不支持缓存，数据变更，直接会触发相应的操作；watch支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；当一个属性发生变化时，需要执行对应的操作；一对多；监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数

$nextTick是什么？

nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用nextTick，则可以在回调中获取更新后的 DOM

v-for 中key的作用？

当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。

key 的特殊属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用 key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除 key 不存在的元素

vue如何获取dom?

先给标签设置一个ref值，再通过this.$refs.domName获取，例如：

<div ref="test"></div>

const dom = this.$refs.test

slot插槽

封装组件时候使用的，组件中的内容有时候不能写死，应该由用户决定。可以根据插槽名称控制组件的内容展示。

vue初始化页面闪动问题

使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。

Vuex

Vuex 实现组件中的数据共享。且数据是响应式的。

几个特性：

state: state 唯一数据源。
getters: 可以认为是 store 的计算属性,就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。代码中通过 store.getters 触发
mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,非常类似于事件,通过store.commit 方法触发
action： Action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作
module 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块中也可以有自己的state、getters、mutation、action

ajax请求代码应该写在组件的methods中还是vuex的actions中
如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用

vuex中的数据在页面刷新后数据消失
解决办法：用sessionstorage 或者 localstorage 存储数据。

可以引入插件vuex-persist来解决，使用方法如下：

npm install --save vuex-persist // 安装

import VuexPersistence from 'vuex-persist' // 引入

const vuexLocal = new VuexPersistence({ // 先创建一个对象并进行配置
    storage: window.localStorage
})

const store = new Vuex.Store({	// 引入进vuex插件
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
})

通过以上设置，如果刷新某个视图，数据并不会丢失，依然存在，并且不需要在每个 mutations 中手动存取 storage 。

怎么在组件中批量使用Vuex的getter属性

使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中

import {mapGetters} from 'vuex'
export default{
    computed:{
        ...mapGetters(['total','discountTotal'])
    }
}

组件中重复使用mutation

import { mapMutations } from 'vuex'
methods:{
    ...mapMutations({
        setNumber:'SET_NUMBER',
    })
}

然后调用this.setNumber(10)相当调用this.$store.commit(‘SET_NUMBER’,10)

mutation和action有什么区别
action 提交的是 mutation，而不是直接变更状态。mutation可以直接变更状态
action 可以包含任意异步操作。mutation只能是同步操作
提交方式不同:

action 是用this.store.dispatch('ACTION_NAME',data)来提交。
mutation是用this.$store.commit('SET_NUMBER',10)来提交

在v-model上怎么用Vuex中state的值？

<input v-model="message">
// ...
computed: {
    message: {
        get () {
            return this.$store.state.message
        },
        set (value) {
            this.$store.commit('updateMessage', value)
        }
    }
}

前端路由：

前端路由是现代SPA（单页应用）应用必备的功能,每个现代前端框架都有对应的实现,例如vue-router、react-router

hash路由一个明显的标志是带有#,我们主要是通过监听url中的hash变化来进行路由跳转。

多页面应用（MPA）

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。

单页面的优点：

用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小。
前后端分离。
页面效果会比较炫酷（比如切换页面内容时的专场动画）。

单页面缺点：

不利于seo。
导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）。
初次加载时耗时多。
页面复杂度提高很多

由于hash路由的优势就是兼容性更好,在老版IE中都有运行,问题在于url中一直存在#不够美观,而且hash路由更像是Hack而非标准,相信随着发展更加标准化的History API会逐步蚕食掉hash路由的市场。

router和route的区别
route为当前router跳转对象里面可以获取name、path、query、params等

router为VueRouter实例，想要导航到不同URL，则使用router.push方法

路由按需加载
随着项目功能模块的增加，引入的文件数量剧增。如果不做任何处理，那么首屏加载会相当的缓慢，这个时候，路由按需加载就闪亮登场了。

{ 
    path:'/', 
    name:'home', 
    components:()=>import('@/components/home')
}

import()方法是由es6提出的，动态加载返回一个Promise对象，then方法的参数是加载到的模块。类似于Node.js的require方法，主要import()方法是异步加载的。

axios封装网络请求

参考下 Vue 中 Axios 的封装和 API 接口的管理即可

核心是：

请求拦截器中设置token授权等信息，可结合vuex
响应拦截器中对返回的不同状态码做统一处理

也可以封装独立的get或post请求

vue常用ui库
移动端h5: vantui、iview

pc端: element-ui 、Ant Design of Vue

常用webpack配置

如：devServer 选项中配置proxy代理跨域

devServer: { 
    //配置开发服务器
    host: "0.0.0.0",
    //是否启用热加载，就是每次更新代码，是否需要重新刷新浏览器才能看到新代码效果
    hot: true,
    //服务启动端口
    port: "8080",
    //是否自动打开浏览器默认为false
    open: false,
    //配置http代理
    proxy: { 
      "/api": { //如果ajax请求的地址是http://192.168.0.118:9999/api1那么你就可以在jajx中使用/api/api1路径,其请求路径会解析
        // http://192.168.0.118:9999/api1，当然你在浏览器上开到的还是http://localhost:8080/api/api1;
        target: "http://192.168.0.118:9999",
        //是否允许跨域，这里是在开发环境会起作用，但在生产环境下，还是由后台去处理，所以不必太在意
        changeOrigin: true,
        pathRewrite: {
            //把多余的路径置为''
          "api": ""
        }
      },
      "/api2": {//可以配置多个代理，匹配上那个就使用哪种解析方式
        target: "http://api2",
        // ...
      }
    }
}

参考：常用webpack配置

简述diff算法

小程序

授权登录流程
微信支付流程
常用的一些api。如获取用户信息、获取手机号码、定位、扫码、系统信息、网络状态、发请求等。

web网络安全

xss攻击（js攻击）
sql注入
csrf伪造已登录用户进行攻击
…

参考

背包编程

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
高频面试题讲解

高频面试题讲解js数据类型基本类型： number、string、boolean、null、undefined、symbol引用（复合类型）类型: object（函数、对象、数组等）不同类型的存储方式：基本类型：基本类型值在内存中占据固定大小，保存在栈内存中引用类型：引用类型的值是对象，保存在堆内存中，而栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址symbol类型介绍Symbol对象是es6中新引进的一种数据类型，它的作用非常简单，就是用于防止属性名冲突而产生。还可以
复制链接

扫一扫