189 8069 5689
今天小编给大家分享一下web前端高频知识点面试题有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
专注于为中小企业提供做网站、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业新都免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了超过千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
| 区别 | let | const | var |
|---|---|---|---|
| 重复声明 | 不能重复声明，会报SyntaxError错 | const 定义常量，值不能修改的变量叫做常量，一定要赋初始值，因为不能修改。 | 可以重复声明 |
| 块级作用域 | 拥有 | 拥有 | 不拥有 |
| 会不会污染全局变量(挂载在window上) | 不会 | 不会 | 会 |
说明
1.let和const也存在变量提升，只是提升的方式不同
var变量提升:变量的声明提升到顶部，值为undefined
let、const变量提升: 变量声明提升到顶部，只不过将该变量标记为尚未初始化
let 和 const存在暂时性死区,代码执行过程中的一段时间内，在此期间无法使用标识符，也不能引用外层作用域的变量。
let answer;
function fn(){
//如果此时没有将变量变量提升到这里，answer应该取外层answer的值
console.log(answer); //Uncaught ReferenceError: Cannot access 'answer' before initialization
let answer=42;
}
2.var创建的全局变量->全局对象的属性，let和const在全局作用域声明的变量->不是全局对象的属性
3.如果常量是个数组或对象，对其内部元素修改，不算对常量的修改，不会报错。常量指向了一个地址，地址不变就不会报错。
变量声明升级
通过var定义(声明)的变量，在定义语句之前的就可以访问到
但是值是undefined
函数声明提升
通过function声明的函数，在之前就可以直接调用。
值是函数体
//变量提升先于函数提升,提升后被函数声明function覆盖,所以就算换了顺序也是function
function a(){
}
var a ;
console.log(typeof a); //function
var f1 = function () {
console.log(1);
}
function f1 () {
console.log(2);
}
f1() ; //1
//变量提升后
var f1;//变量提升
function f1(){};//函数提升
f1 = function () {
console.log(1);
}
f1() ;
变量提升练习题
理解:一个代码段所在的区域，是静态的，在编写代码时就确定了。
作用:变量绑定在这个作用域内有效，隔离变量，不同作用域下同名变量不会有冲突。
作用域分类
全局作用域
函数作用域
块级作用域
作用域链:多个作用域嵌套，就近选择，先在自己作用域找，然后去就近的作用域找。
函数的作用域在声明的时候就已经决定了，与调用位置无关
所以执行aaa()的时候先在aaa的作用域里面找，没有找到a，再去父级作用域window里面找，找到a=10
var a = 10;
function aaa() {
alert(a);
}
function bbb() {
var a = 20;
aaa();
}
bbb();
对当前JavaScript的执行环境的抽象，每当JavaScript开始执行的时候，它都在执行上下文中运行。
全局执行上下文:在执行全局代码前将window确定为全局执行上下文
对全局数据进行预处理
var定义的全局变量 --> undefined，添加为window的属性
function声明的全局函数 --> 赋值(函数体),添加为window的方法
this --> 赋值window
开始执行全局代码
函数执行上下文:在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象
对局部数据进行预处理
形参变量 --> 赋值（实参）–> 添加到函数执行上下文的属性
arguments(形参列表封装成的伪数组)–>赋值(实参列表)，添加到函数执行上下文的属性
var定义的局部变量–>undefined，添加为函数执行上下文的属性
function声明的函数–>赋值(函数体)，添加为函数执行上下文的方法
this–>赋值(调用函数的对象)
开始执行函数体代码
执行上下文栈
1.在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象
2.在全局执行上下文(window)确定后，将其添加到栈中(压栈)
3.在函数执行上下文创建后，将其添加到栈中(压栈)
4.在当前函数执行完成后，将栈顶的对象移除(出栈)
5.当所有的代码执行完后，栈中只剩下window
| 作用域 | 执行上下文 |
|---|---|
| 定义了几个函数 + 1 = 几个作用域 | 执行了几个函数 + 1 = 几个执行上下文 |
| 函数定义时就确定了，一直存在，不会再变化，是静态的 | 全局执行上下文环境实在全局作用域确定之后，js代码执行之前创建的 调用函数时创建，函数调用结束被释放，是动态的 |
var foo = 1;
function bar () {
console.log(foo);
var foo = 10;
console.log(foo);
}
bar();
//变量提升后
var foo = 1;
function bar () {
var foo = undefined;
console.log(foo); //undefined
foo = 10;
console.log(foo);//10
}
bar();
let ：使用立即执行函数创造出一个块级作用域
(function(){
var a = 1;
console.log('内部a:', a);
})();
const
1.使用立即执行函数创造出一个块级作用域。
2.对于不可变性，可以利用Object.defineProperty 将变量挂载在对象上
var __const = function __const(data, value) {
this.data = value // 把要定义的data挂载到某个对象，并赋值value
Object.defineProperty(this，data, { // 利用Object.defineProperty的能力劫持当前对象，并修改其属性描述符
enumerable: false,
configurable: false,
get: function () {
return value
},
set: function (data) {
if (data !== value) { // 当要对当前属性进行赋值时，则抛出错误！
throw new TypeError('Assignment to constant variable.')
} else {
return value
}
}
})
}
//然后和立即执行函数结合
(function(){
var obj = {}
_const.call(obj,'a',10)
})()
//当执行完毕后，全局上就不会有obj，也不会有obj.a这个变量，进而实现了块级作用域的功能
function a(){
a.name ='aaa';
return this.name;
}
var b = {
a,
name:'bbb',
getName:function(){
return this.name;
}
}
var c =b.getName;
console.log(a()); //this指向window,window上没有name,所以输出undefined
console.log(b.a()); //b.a 是function,b调用a函数，所以this指向b，所以输出'bbb'
console.log(b.getName);//通过b调用getName，所以getName指向b,所以输出'bbb'
console.log(c());//c是function，this指向window，window上没有name,所以输出undefined
笔记链接
JS数据类型有哪些
介绍一下Symbol和Bigint
如何判断一个数据类型
Object.prototype.toString.call() 的缺点？
各个方法的原理是什么
typeof(NaN) typeof(Null)
手写 instanceof 方法
null==undefined 和 null===undefined
隐式转换规则 === 和 == 的区别
map和weakmap区别
map和object区别
for in、for of 区别，分别对对象和数组使用问结果
讲一下数组的遍历方法，filter与map的使用场景，some，every的区别
map的操作原理
map和forEach的区别
使用迭代器实现for-of
手写数组去重
手写数组扁平化
map和filter的区别
数组的常用方法
用reduce实现map
| ES5 function类 | ES6 class |
|---|---|
| 可以new 可以调用 | 必须new调用，不能直接执行 |
| function存在变量提升 | class不存在变量提升 |
| static静态方法只能通过类调用，不会出现在实例上 |
一般函数中this的指向会在调用时向函数传递执行上下文对象中设置。
以函数形式调用，指向window
以方法形式调用，this指向调用的方法
以构造函数的形式调用，this是新创建的对象
箭头函数:本身没有this，它的this可以沿作用域链(定义时就确定了的)查找
apply、call、bind 函数可以改变 this 的指向。
| 区别 | call | apply | bind |
|---|---|---|---|
| 调用函数 | √ | √ | × |
| 参数 | 从第二个参数开始依次传递 | 封装成数组传递 | 从第二个参数开始依次传递 |
bind函数的特殊点
多次绑定,只指向第一次绑定的obj对象。
多次绑定，一次生效。
原因:返回函数，后续bind修改的是返回函数的this
call函数的实现
//从第二个参数开始依次传入，所以接收时使用rest参数
Function.prototype.call=function(obj,...args){
obj = obj || window;
args = args ? args : [];
//给obj新增一个独一无二的属性以免覆盖原有属性
const key = Symbol()
obj[key] = this;
const res = obj[key](...args);
delete obj[key];
return res;
}
apply函数的实现
Function.prototype.apply=function(obj,args){
obj = obj || window;
args = args ? args : [];
//给obj新增一个独一无二的属性以免覆盖原有属性
const key = Symbol()
obj[key] = this;
const res = obj[key](...args);
delete obj[key];
return res;
}
bind函数的实现
Function.prototype.bind=function(obj,...args){
obj = obj || window;
args = args ? args : [];
return (...args2) => {
return this.apply(obj,[...args,...args2])
}
}
箭头函数的作用:确保函数内部的this和外部的this是一样的
箭头函数是普通函数的语法糖，书写要更加简洁
| 区别 | 一般函数 | 箭头函数 |
|---|---|---|
| this指向 | 调用时确定 | 定义时确定,没有自己的this，沿着作用域链找父级的this |
| 改变this指向 | call,apply,bind | 不能改变，静态 |
| arguments | 有 | 没有，可以用rest参数代替 |
| 作为构造函数 | √ | × 没有prototype属性 |
| 匿名函数 | 可以匿名可以不匿名 | 匿名函数 |
是什么
闭包就是在函数中能够读取其他函数内部变量
本质就是上级作用域内变量的生命周期，因为被下级作用域内引用，而没有被释放。
正常情况下，代码执行完成之后，函数的执行上下文出栈被回收。但是如果当前函数执行上下文执行完成之后中的某个东西被执行上下文以外的东西占用，则当前函数执行上下文就不会出栈释放，也就是形成了不被销毁的上下文，闭包。
function foo(){
var a=2;
function bar(){ //覆盖foo()内部作用域的闭包
console.log(a++);
}
return bar;
}
var bar = foo(); //foo执行创建一个执行上下文环境，由于bar引用了其内部变量，也就是bar持有foo本次执行上下文的引用，foo本次的执行上下文不会被销魂
bar();//2
bar();//3
var fn = foo(); //foo执行创建一个新的执行上下文环境，fn持有了foo本次执行上下文的引用
fn();//2
有什么用
1.可以读取函数内部的变量
2.使函数的内部变量执行完后，仍然存活在栈内存中(延长了局部变量的生命周期)。
JavaScript闭包就是在另一个作用域中保存了一份它从上一级函数或者作用域得到的变量，而这些变量是不会随上一级函数的执行完成而销毁
常用场景:节流防抖
缺点是什么
1.函数执行完后，函数内的局部变量没有释放，占用内存时间会变长
2.容易造成内存泄露
怎么解决
及时释放:让内部函数成为垃圾对象(将闭包手动设置为null)–> 回收闭包
作用是:控制回调函数触发的频率，进行性能优化
参数: 控制触发频率的回调函数和时间wait
输出: 到时间后，返回callback函数
节流:在函数被频繁触发时， 函数执行一次后，只有大于设定的执行周期后才会执行第二次。一个时间段，只触发一次
语法:throttle(callback, wait)
常用场景:比如拖动、滚动和输入框联想
//使用形式，绑定时候throttle函数就会执行,所以this是window
window.addEventListener('scroll',throttle(()=>{},500))
/*
思路
需要记录上一次触发的时间，才可以和当前时间比较，是否超过了间隔时间
第一次必然立刻触发
*/
function throttle(callback,wait){
let pre = new Date();
//这里的this是window
return function(...args){
//这里的this是绑定的DOM
const now = new Date();
if(now-pre>=wait){
callback.apply(this,args);
pre = now;
}
}
}
/*
使用setTimeout实现
第一次需要延迟delay后触发
*/
function throttle(callback,delay){
let timer = null;
//这里的this是window
return function(...args){
if(timer){//说明已经触发了
return;
}
timer = setTimeout(()=>{
callback.apply(this,args);
timer = null;
},delay)
}
}
函数防抖:指定时间间隔内只会执行一次任务。如果在等待的过程中再一次触发了事件，计时器重新开始计时，直到达到时间后执行最后一次的回调
语法:debounce(callback, wait)
常用场景: 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖。
function debounce(callback,delay){
let timer = null;
//这里的this是window
return function(){
if(timer){//说明已经触发了
clearTimeout(timer);
}
timer = setTimeout(()=>{
callback.apply(this,arguments);
timer = null;
},delay)
}
}
//立即执行
function debounce(func,delay) {
let timeout;
return function (...args) {
if (timeout) clearTimeout(timeout);
const callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, delay)
if (callNow) func.apply(this, args)
}
}
笔记链接
原型和原型链
继承
笔记链接
内容
进程和线程
进程的通信方式
浏览器多进程架构
如何实现浏览器多标签之间的通讯
H5 Web Workers JS多线程运行
浏览器的事件循环机制
Node的事件循环机制
node事件循环代码输出题 用于理解
代码输出题
笔记
内容
DOM的渲染过程
DOM渲染的时机与渲染进程的概述
-浏览器的渲染流程
CSS、JS、DOM解析和渲染阻塞问题
JS加载阻塞DOM渲染问题，怎么解决？ - 异步JS，JS三种异步加载的方式
script 标签中的 async 和 defer 属性
DOMContentLoaded和Load
DOM渲染优化
笔记
内容
什么是重绘和回流
回流和重绘触发的时机
优化方案
GPU加速，如何开启GPU加速
JS优化减少重绘和回流的触发
笔记
内容
setTimeout(cb, 0)会立刻执行吗？
settimeout定时的时间准确吗？ 为什么不准确？ 怎么解决？
setTimeout和requestAnimation的区别
requestAnimationFrame讲一下你的理解
setTimeout实际延迟时间
用setTimeout实现setInterval，实现一个随时停止的版本
setTimeout 和 setInterval区别
JS实现动画的方式
requestAnimationFrame与requestIdleCallback分别是什么？
requestAnimationFrame的执行时机？
requestanimationframe回调函数中进行大量计算，会阻塞页面的渲染吗
每隔一秒输出一个数字
观察者是软件设计模式中的一种，但发布订阅只是软件架构中的一种消息范式
观察者模式
观察者模式定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。
被依赖的对象叫做subject,依赖的对象叫做观察者Observer 。被依赖的对象首先需要提供一个添加观察者方法，以供观察者调用。所以还需要维护一个观察者列表，自身发生变化后，依次通知观察者。
//subject 被观察者
class Subject {
constructor() {
this.observerList = [];
}
addObserver(observer) {
this.observerList.push(observer);
}
removeObserver(observer) {
const index = this.observerList.findIndex(o => o.name === observer.name);
this.observerList.splice(index, 1);
}
notifyObservers(message) {
const observers = this.observeList;
observers.forEach(observer => observer.notified(message));
}
}
//Observer 观察者
class Observer {
constructor(name, subject) {
this.name = name;
if (subject) {
subject.addObserver(this);
}
}
notified(message) {
console.log(this.name, 'got message', message);
}
}
//使用
const subject = new Subject();
const observerA = new Observer('observerA', subject);
const observerB = new Observer('observerB');
subject.addObserver(observerB);
subject.notifyObservers('Hello from subject');
subject.removeObserver(observerA);
subject.notifyObservers('Hello again');
发布订阅机制
发布者和订阅者不直接进行通信，通过事件调度中心进行管理。发布者将要发布的消息交由事件调度中心管理，订阅者也是根据自己的情况，按需订阅事件调度中心的消息。
//事件调度中心
class PubSub {
constructor() {
// 存储格式: warTask: [], routeTask: []
// {订阅事件:[回调1,回调2...],订阅事件2:[回调1,回调2..]}
this.events = {}
}
// 订阅方法 订阅哪个类型type就把对应的回调函数放入
subscribe(type, cb) {
if (!this.events[type]) {
this.events[type] = [];
}
this.events[type].push(cb);
}
// 发布方法
publish(type, ...args) {
if (this.events[type]) {
this.events[type].forEach(cb => cb(...args))
}
}
// 取消订阅方法 的某一个类型的某一个回调
unsubscribe(type, cb) {
if (this.events[type]) {
const cbIndex = this.events[type].findIndex(e=> e === cb)
if (cbIndex != -1) {
this.events[type].splice(cbIndex, 1);
}
}
if (this.events[type].length === 0) {
delete this.events[type];
}
}
}
//测试
let pubsub = new PubSub();
//订阅
pubsub.subscribe('warTask', function (taskInfo){
console.log("宗门殿发布战斗任务，任务信息:" + taskInfo);
})
pubsub.subscribe('routeTask', function (taskInfo) {
console.log("宗门殿发布日常任务，任务信息:" + taskInfo);
});
pubsub.subscribe('allTask', function (taskInfo) {
console.log("宗门殿发布五星任务，任务信息:" + taskInfo);
});
//发布
pubsub.publish('warTask', "猎杀时刻");
pubsub.publish('allTask', "猎杀时刻");
pubsub.publish('routeTask', "种树浇水");
pubsub.publish('allTask', "种树浇水");
区别
| 类型 | 描述 | 特点 |
|---|---|---|
| 观察者模式 | 观察者和被观察者互相知道身份，目标直接将通知分发到观察者身上 | 高耦合 |
| 发布订阅机制 | 发布订阅机制通过事件调度中心来协调，订阅者和发布者互相不知道身份 | 低耦合 |
笔记链接
笔记内容
Generator生成器函数
Generator生成器函数使用上的补充 了解
基于Promise对象的简单自动执行器
iterator迭代器
async/await是什么？ 使用场景是什么？
await/async与generator函数的区别
await/async内部实现原理 Generator函数和自动执行器
async错误捕获方式
promise概述
promise知识点 了解
promise.then、catch、finally的原理与实现
Promise.all/Promise.race/Promise.allSettled的原理和实现
手写题：请求五秒未完成则终止
promise实现并发的异步任务调度器
深浅拷贝只是针对引用数据类型
区分点: 复制之后的副本进行修改会不会影响到原来的
浅拷贝：修改拷贝以后的数据会影响原数据。使得原数据不安全。(只拷贝一层)
深拷贝：修改拷贝以后的数据不会影响原数据，拷贝的时候生成新数据。
浅拷贝
扩展运算符，适用于数组/对象
Aarry.prototype.concat(拷贝对象1，拷贝对象2...) 数组的合并方法，将多个数组或对象拷贝进目标数组，返回新数组。
Object.assign(目标对象1,拷贝对象1,拷贝对象2.....)对象的合并方法，将拷贝对象拷贝进目标对象
方式一: JSON.parse(JSON.stringify())
JSON.stringify()：将JavaScript对象转换为JSON字符串
JSON.parse()：可以将JSON字符串转为一个对象。
问题1: 函数属性会丢失，不能克隆方法
问题2: 循环引用会出错
//循环引用:b中引用了c，c中又有b
obj = {
b:['a','f'],
c:{h:20}
}
obj.b.push(obj.c);
obj.c.j = obj.b;
b:['a','f',{h:20,j:[]}],
c:{h:20,j:['a','f',[]]}
function deepClone1(target) {
//通过数组创建JSON格式的字符串
let str = JSON.stringify(target);
//将JSON格式的字符串转换为JS数据
let data = JSON.parse(str);
return data;
}
方式二：递归+map
递归：实现深拷贝，不丢失属性
map：存储已经拷贝过的对象，解决循环引用问题
//map存放已经拷贝过的对象，key为需要拷贝的对象，value为拷贝后的对象
function deepClone(target,map=new Map()){
//1.判断是否是引用类型
if(typeof target === 'object' && target !==null ){
if(map.has(target))return map.get(target); //说明已经拷贝过了
let isArr = Array.isArray(target);
let res = isArr?[]:{};
map.set(target,res)
if(isArr){//拷贝的是数组
target.forEach((item,index) => {
res[index] = deepClone(item,map);
});
}else{//拷贝的是对象
Object.keys(target).forEach(key=>{
res[key]=deepClone(target[key],map);
})
}
return res; //返回的是一个数组或对象
}else{
return target;
}
}
//测试
console.log(deepClone([1,[1,2,[3,4]]]))
以上就是“web前端高频知识点面试题有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。