2020年web前端面试知识点整理

js的几种数据类型

// 基本数据类型  Unn...SB
Number,Strng,undifined,null,Boolean

// 复杂数据类型（引用类型）引用类型可添加属性和方法而基本类型不可以
Object,Array,Function,RegExp,Date,Error

// 全局数据类型
Math

判断是否为数组的方法

// 第一种
Array.isArray([])

// 第二种
Object.prototype.toString.call([])

// 第三种
[] instanceof Array

类数组转化为数组

// es6方法
Array.from(arr);
// 扩展运算符
[...arr];
//call方法
[].slice.call(arr);
Array.prototype.slice.call(arr)
//循环方法

数组去重的方法

// 数组去重的几种方法
// 第一种，直接使用es6的set
let arr = [1,2,2,4,5,6,7,8,8,8,9,12]
Array.from(new Set(arr))

// 第二种，创建一个新数组，遍历旧数组使用indexOf或者includes判断，然后push



// 对象key的唯一性

函数防抖和节流,包含的闭包用法

// 防抖:
// 第一次触发事件时候,不立即执行函数
// 给出一个期限300ms 如果300ms内没有再触发则执行
// 如果短时间大量触发同一事件 则只执行一次
// doFun 需要执行的操作
// delay 设置的延迟执行的时间 毫秒

function dbunce(doFun,delay){
    // 此处的变量timer会因为闭包的原因无法被垃圾回收机制回收
    let timer = null
    return function(){
        timer && clearTimeout(timer)
        setTimeout(doFun,delay)
    }
}


// 节流：
// 短时间大量触发的执行动作，可以用节流的方式减少请求的次数
// 比如说窗口的resize和scroll事件每秒内可能触发上百次但是我们通过节流的方式减少请求

function throttle(doFun,delay){
    let canDo = true
    return function(){
        !canDo && return false
        canDo = false
        setTimeOut(() => {
            doFun()
            canDo = true
        },delay)
    }
}

冒泡、捕获、事件委托

// 阻止冒泡的几种方式
// 1
event.stopPropagation();
// 2
return false;
// 3
event.preventDefault();

变量提升等问题

// 1.执行函数参数
// 2.执行函数声明
// 3.执行var声明

任何对象转为布尔值都为 true （切记！在JS中，只有0,-0,NaN,"",null,undefined这六个值转布尔值时，结果为false）

new方法在new一个构造函数的时候都干了什么？

// Fun 构造函数

function new2(Fun,...args){
    // 创建一个空对象，并继承构造函数的原型对象
    var O = Object.create(Fun.prototype)
    // 执行构造函数并转移上下文为新创建的对象O，O绑定到构造函数上
    var result = Fun.apply(O,args)
    // result如果返回的是对象则直接 return result
    // new方法失效，否则返回O
    return result instanceof Object ? result : O
}

0.1+0.2 > 0.3问题怎么解决？

使用bignumber进行计算

或者-

// 转换成整数计算

function addNum(num1,num2){
    var baseNum,baseNum1,baseNum2;
    // 获取两个数字的小数位数
    try{
        baseNum1 = num1.split('.')[1].length;
    } catch (e){
        baseNum1 = 0;
    }
    try{
        baseNum2 = num2.split('.')[1].length;
    } catch (e){
        baseNum2 = 0;
    }
    // 获取最大的小数位值
    baseNum = Math.pow(10,Math.max(baseNum1,baseNum2))
    return (num1*baseNum + num2*baseNum)/baseNum
}

 

for in  和 for of 的区别

 

JS事件循环 eventloop

 

promise的原理

 

自己写一个promise.all

 

函数柯力化

 

算法题，一个数组[1,3,56,78,34,23,67,5,67,8,9,54,33,56]  瀑布流 分三组 最终实现三组的和 相差最小

 

 怎么优化图片的加载

1. cdn
2. 压缩
3. 宽高占位

什么是前端工程化？

模块化 组件化 规范化 自动化

 

9:继承

构造函数继承
原型继承
 组合继承
class继承

Vue部分面试题

理解MVVM

model-view-viewModel   数据驱动页面

vue 生命周期

beforeCreated -> created -> beforeMount -> mounted -> beforeUpdate -> update -> beforeDestroy -> destroyed

computed和watch的区别以及computed和methed的区别，还有computed的实现原理

computed是计算属性，主要功能是完成页面中需要计算的表达式

computed支持缓存，只有依赖数据发生改变才会重新计算而methed没有这个特性

watch是监听属性，主要用来监听特定值的变化以实现变化后的操作

watch监听函数接收两个参数（newValue,oldValue）

watch可以实现深度监听 deep true 

watch支持异步而computed不支持

vue data 为啥是函数? 

因为组件间需要相互隔离不相互影响  如果是对象就有可能会相互影响  以函数的形式返回每次都重新复制起到了隔离的作用

nextTick的作用和原理实现

Vue更新DOM的时候是异步执行的

作用：在下次DOM更新完成之后执行延迟回调。在修改数据之后立即执行这个方法，可获取更新的得的DOM

原理：事件循环中的eventloop  微任务和宏任务

vue数据的双向绑定原理

 

.JS为什么要区分微任务和宏任务；介绍宏任务和微任务？

 

JS里垃圾回收机制是什么？常用的是哪种？怎么处理的