Werfen Sie einen Blick auf diese Front-End-Interviewfragen, die Ihnen dabei helfen, hochfrequente Wissenspunkte zu meistern (8).

Dieser Artikel fasst einige JavaScript-Interviewfragen für Sie zusammen und hilft Ihnen, hochfrequente Wissenspunkte zu meistern. Ich hoffe, dass er für alle hilfreich ist!

var, let, const

Der Unterschied zwischen den drei

Unterschied

let

const

var

Doppelte Aussage

Kann nicht gemacht werden Bei wiederholten Anweisungen wird SyntaxError gemeldet.

const Definieren Sie Variablen, deren Werte nicht geändert werden können. Ihnen muss ein Anfangswert zugewiesen werden, da sie nicht geändert werden können.

Kann wiederholt deklariert werden.

Bereich auf Blockebene.

Erklärung
1. Variablenheraufstufung gibt es auch für let und const, aber die Heraufstufungsmethoden sind unterschiedlich

let, const-Variablenheraufstufung: Die Variablendeklaration wird nach oben befördert, aber die Variable ist als Noch nicht initialisiert markiert.
• Es gibt eine vorübergehende tote Zone für let und const. Während eines Zeitraums während der Ausführung des Codes können hier keine Bezeichner verwendet werden, und Variablen in äußeren Bereichen können nicht referenziert werden. 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. Globale Variablen, die von var -> Attributen des globalen Objekts erstellt wurden, Variablen, die im globalen Bereich von let und const deklariert wurden -> keine Attribute des globalen Objekts

3 Wenn die Konstante ein Array oder Objekt ist, Die Änderung interner Elemente zählt nicht als Änderung der Konstanten und es wird kein Fehler gemeldet. Die Konstante zeigt auf eine Adresse und es wird kein Fehler gemeldet, wenn die Adresse unverändert bleibt.

Variablenförderung und Funktionsförderung

• Variablendeklarations-Upgrade

  Auf Variablen, die über var definiert (deklariert) werden, kann vor der Definitionsanweisung zugegriffen werden Die Funktion kann direkt davor aufgerufen werden. Der Wert ist der Funktionskörper es
  .
  Funktion:

  Variablenbindung ist in diesem Bereich gültig
, isoliert Variablen und es kommt zu keinem Konflikt mit Variablen mit demselben Namen in verschiedenen Bereichen.
• Bereichsklassifizierung

  
  
  Globaler Bereich

Funktionsbereich

Bereich auf Blockebene

Bereichskette: Mehrere Bereiche sind verschachtelt. Wählen Sie den nächstgelegenen aus, suchen Sie ihn zuerst in Ihrem eigenen Bereich und dann Gehen Sie zum nächstgelegenen Zielfernrohr, um es zu finden.

Der Umfang der Funktion ist bereits bei der Deklaration festgelegt, unabhängig vom Aufrufort. Wenn Sie also aaa() ausführen, suchen Sie zuerst im Bereich von aaa. Wenn a nicht gefunden wird, wechseln Sie zum übergeordneten Bereich Fenster Suchen, finde a=10

//变量提升先于函数提升,提升后被函数声明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() ;

Der Ausführungskontext

• ist eine Abstraktion der aktuellen JavaScript-Ausführungsumgebung. Immer wenn JavaScript mit der Ausführung beginnt, wird es im Ausführungskontext ausgeführt.

• Globaler Ausführungskontext: Bestimmen Sie das Fenster als globalen Ausführungskontext, bevor Sie globalen Code ausführen.

• Globale Daten vorverarbeiten.

Die durch var --> undefiniert definierte globale Variable wird als Attribut des Fensters hinzugefügt

Funktion als globale Funktion deklariert –> und zur Vorbereitung der Ausführung des Funktionskörpers das entsprechende Funktionsausführungskontextobjekt erstellen

zur Vorverarbeitung lokaler Daten

Zuweisung (tatsächlicher Parameter) –> Kontext

Argumente (in der formalen Parameterliste gekapseltes Pseudo-Array) –> Zuweisung (Liste der tatsächlichen Parameter), hinzugefügt zu den Eigenschaften des Funktionsausführungskontexts
Lokale Variablen, die durch var definiert sind –> undefiniert, als Funktionsattribute hinzugefügt den Ausführungskontext

Funktion deklarierte Funktion –> eine Methode für den Funktionsausführungskontext hinzufügen diese–> Ausführung des Funktionskörpercodes starten

• Ausführungskontextstapel

1. Bevor der globale Code ausgeführt wird, erstellt die JS-Engine einen Stapel, um alle Ausführungskontextobjekte zu speichern und zu verwalten
• 2. Nachdem der globale Ausführungskontext (Fenster) bestimmt wurde, fügen Sie ihn dem Stapel hinzu ( schieben) )

  3. Nachdem der Funktionsausführungskontext erstellt wurde, fügen Sie ihn dem Stapel hinzu (schieben)

  4. Nachdem die aktuelle Funktion ausgeführt wurde, entfernen Sie das Objekt oben auf dem Stapel (platzieren)
5. Wann Der gesamte Code wird ausgeführt. Danach wird nur das Fenster ausgeführt
• wird bestimmt, wenn die Funktion immer vorhanden ist und sich nicht erneut ändert.

  Der globale Ausführungskontext wird tatsächlich erstellt, bevor der js-Code ausgeführt wird wenn die Funktion aufgerufen wird, wird sie nach Abschluss des Aufrufs freigegeben, was dynamisch ist

• 

  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();

  如何用ES5实现let和const

  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

  ES6 class和 ES5类的区别

  ES5 function类	ES6 class
  可以new 可以调用	必须new调用，不能直接执行
  function存在变量提升	class不存在变量提升
  static静态方法只能通过类调用，不会出现在实例上

  this的指向

  • 一般函数中this的指向会在调用时向函数传递执行上下文对象中设置。
    • 以函数形式调用，指向window
    • 以方法形式调用，this指向调用的方法
    • 以构造函数的形式调用，this是新创建的对象
  • 箭头函数:本身没有this，它的this可以沿作用域链(定义时就确定了的)查找

  bind、call、apply的区别与实现

  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)
    }
  }

  原型和原型链

  笔记链接

  • 原型和原型链
  • 继承

  JavaScript 线程机制与事件循环机制

  笔记链接

  内容

  • 进程和线程
  • 进程的通信方式
  • 浏览器多进程架构
  • 如何实现浏览器多标签之间的通讯
  • H5 Web Workers JS多线程运行
  • 浏览器的事件循环机制
  • Node的事件循环机制
  • node事件循环代码输出题 用于理解
  • 代码输出题

  DOM渲染

  笔记

  内容

  • DOM的渲染过程
  • DOM渲染的时机与渲染进程的概述
    -浏览器的渲染流程
  • CSS、JS、DOM解析和渲染阻塞问题
  • JS加载阻塞DOM渲染问题，怎么解决？ - 异步JS，JS三种异步加载的方式
    • script 标签中的 async 和 defer 属性
    • DOMContentLoaded和Load
  • DOM渲染优化

  重绘和回流

  笔记

  内容

  • 什么是重绘和回流
    • 回流和重绘触发的时机
  • 优化方案
    • GPU加速，如何开启GPU加速
    • JS优化减少重绘和回流的触发

  setTimeout 、setInterval、requestAnimationFrame

  笔记

  内容

  • 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生成器函数 async/await、Promise

  笔记链接

  笔记内容

  • 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]]]))

  commonJS和ES6模块化

  笔记链接

  内容

  • commonJs实现原理
  • 模块执行的原理
  • require模块加载原理
  • ES6 module的特性
  • import() 函数 动态引入
  • commonJs和es module的区别

  【推荐学习：javascript高级教程】

Das obige ist der detaillierte Inhalt vonWerfen Sie einen Blick auf diese Front-End-Interviewfragen, die Ihnen dabei helfen, hochfrequente Wissenspunkte zu meistern (8).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!