2021年Javascript最常见的面试题以及答案

区别：

| | 和原数据是否指向同一个对象 | 第一层数据为基本数据类型 | 原数据中包含的子对象 |

| — | — | — | — |

| 浅拷贝 | 否 | 不会使原数据一起改变 | 会使原数据一起改变 |

| 深拷贝 | 否 | 不会使原数据一起改变 | 不会使原数据一起改变 |

点击对Javscript中浅拷贝和深拷贝的探索和详解查看详解

项目中实现深浅拷贝常用的方法有哪些？

=================================================================================

实现浅拷贝的方法：

• 简单赋值

• 利用 for…in循环实现浅拷贝

• 利用Object.assign()方法

实现深拷贝的方法：

• 使用递归的方式实现深拷贝

• 通过 JSON 对象实现深拷贝

• slice()、concat()对数组进行深拷贝

点击对Javscript中浅拷贝和深拷贝的探索和详解查看详解

赋值、浅拷贝和深拷贝的区别？

=============================================================================

| | 和原数据是否指向同一个对象 | 第一层数据为基本数据类型 | 原数据中包含的子对象 |

| — | — | — | — |

| 赋值 | 是 | 会使原数据一起改变 | 会使原数据一起改变 |

| 浅拷贝 | 否 | 不会使原数据一起改变 | 会使原数据一起改变 |

| 深拷贝 | 否 | 不会使原数据一起改变 | 不会使原数据一起改变 |

三者的内存图：

赋值

浅拷贝

深拷贝

点击对Javscript中浅拷贝和深拷贝的探索和详解查看详解

new创建一个对象的时候做了些什么？

=================================================================================

1. 首先创建了一个空对象 obj

2. 将对象与构建函数通过原型链连接起来

3. 将构建函数中的this绑定到新建的对象obj上

4. 根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理

Javascript中的原型和原型链有了解吗？

======================================================================================

原型：

• 在 JavaScript 中，每当定义一个对象时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。

• 原型对象都会自动获得一个constructor属性，这个属性是一个指向prototype属性所在函数的指针；

• 当调用构造函数创建一个新实例后，高实例对象内部将包含一个指针（内部属性_proto_），指向构造函数的原型对象；

• 原型对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

原型链：

• 原型链是就是实例对象在查找属性时，如果查找不到，就会沿着__proto__去与对象关联的原型上查找，有则返回，如果找不到，就去找原型的原型，直至查到最顶层Object函数的原型，其原型对象的_proto__已经没有可以指向的上层原型，因此其值为null，返回undefind;

• 原型链是实现继承的主要方法，其基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法；

点击对Javascript中原型和原型链的探索和详解查看详解

说说Javascript中的继承，如何实现继承？

=======================================================================================

继承是什么：

继承（inheritance）是面向对象软件技术当中的一个概念；如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类”；

• 继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码

• 在子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能

实现继承的方法：

• 原型链继承

• 构造函数继承（借助 call）

• 组合继承

• 原型式继承

• 寄生式继承

• 寄生组合式继承

点击Javascript中的继承和实现方法查看详解

Javascript中的执行上下文和执行栈是什么？

========================================================================================

执行上下文：

执行上下文是对Javascript代码执行环境的一种抽象概念，只要有Javascript代码运行，那么它就一定是运行在执行上下文中；

执行上下文的类型分为三种：

• 全局执行上下文：只有一个，浏览器中的全局对象就是 window对象，this 指向这个全局对象

• 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文

• Eval 函数执行上下文：指的是运行在 eval 函数中的代码，很少用而且不建议使用

执行栈：

执行栈，也叫调用栈，具有 LIFO（后进先出）结构，用于存储在代码执行期间创建的所有执行上下文；

当Javascript引擎开始执行你第一行脚本代码的时候，它就会创建一个全局执行上下文然后将它压到执行栈中

每当引擎碰到一个函数的时候，它就会创建一个函数执行上下文，然后将这个执行上下文压到执行栈中

引擎会执行位于执行栈栈顶的执行上下文(一般是函数执行上下文)，当该函数执行结束后，对应的执行上下文就会被弹出，然后控制流程到达执行栈的下一个执行上下文

点击JavaScript的执行机制——调用栈查看详解

说说你对Javascript作用域的理解？

====================================================================================

作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。通俗地理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。

在 ES6 之前，ES 的作用域只有两种：全局作用域和函数作用域。

• 全局作用域中的对象在代码中的任何地方都能访问，其生命周期伴随着页面的生命周期。

• 函数作用域就是在函数内部定义的变量或者函数，并且定义的变量或者函数只能在函数内部被访问。函数执行结束之后，函数内部定义的变量会被销毁。

ES6 出现了块级作用域，块级作用域就是使用一对大括号包裹的一段代码，比如函数、判断语句、循环语句，甚至单独的一个{}都可以被看作是一个块级作用域。

说说你对闭包的理解以及使用场景？

===============================================================================

在 JavaScript 中，根据词法作用域的规则，内部函数总是可以访问其外部函数中声明的变量，当通过调用一个外部函数返回一个内部函数后，即使该外部函数已经执行结束了，但是内部函数引用外部函数的变量依然保存在内存中，我们就把这些变量的集合称为闭包。

如果闭包使用不正确，会很容易造成内存泄漏，所以在使用闭包的时候，你要尽量注意一个原则：如果该闭包会一直使用，那么它可以作为全局变量而存在；但如果使用频率不高，而且占用内存又比较大的话，那就尽量让它成为一个局部变量。

任何闭包的使用场景都离不开这两点：

• 创建私有变量

• 延长变量的生命周期

场景：

• 柯里化函数

点击JavaScript的执行机制——作用域链和闭包查看详解

说说你对Javascript中this对象的理解？

========================================================================================

1. 函数执行时首先看函数名前面是否有".“，有的话，”."前面是谁,this就是谁；没有的话this就是window

2. 自执行函数中的this永远是window

3. 在构造函数模式中，类中(函数体中)出现的this.xxx=xxx中的this是当前类的一个实例

4. call、apply和bind，可以改变this的指向，为函数的第一个参数

5. 箭头函数的this看外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。

Javascript数组常见的方法有哪些？

====================================================================================

操作方法：

• 增：push()、unshift()、splice()、concat()

• 删：pop()、shift()、splice()、slice()

• 改：splice()

• 查：indexOf()、includes()、find()

排序方法：

• 数组本身有两个方法：reverse()、sort()

• 定义排序函数：冒泡排序、插入排序、递并排序、计数排序

转换方法：

• join()

迭代方法：

• some()

• every()

• forEach()

• filter()

• map()

点击Javscript数组中最常用的方法（建议收藏）查看详解

手写一个数组排序方法？

==========================================================================

冒泡排序：

var arr = [3,4,1,2,21,5,15,6,63];

function BubbleSort(ary){

for(var i = 0; i < ary.length - 1; i++){

for(var j = i + 1; j < ary.length; j++){

var current = ary[i];

if(current > ary[j]){

var tmp = ary[j];

ary[j] = current;

ary[i] = tmp;

}

}

}

return ary;

}

1

BubbleSort(arr); // [1, 2, 3, 4, 5, 6, 15, 21, 63]

点击Javscript数组中最常用的方法（建议收藏）查看详解

Javascript字符串常见的方法有哪些？

=====================================================================================

操作方法：

• 增：concat()、

• 删：slice()、substr()、substring()

• 改：trim()、trimLeft()、trimRight()、repeat()、toLowerCase()、 toUpperCase()

• 查：chatAt()、indexOf()、startWith()、includes()

转换方法：

• split

模板匹配方法：

• match()

• search()

• replace()

点击Javascript字符串常见的方法查看详解

谈谈Javascript中类型转变机制？

===================================================================================

常见的类型转换有：

• 强制转换（显示转换）

• 自动转换（隐式转换）

点击js的六种数据类型、强制类型转换和隐式类型转换查看详解

== 和 === 的区别和使用场景？

==================================================================================

等于操作符：

等于操作符用两个等于号（ == ）表示，如果操作数相等，则会返回 true；

等于操作符（==）在比较中会先进行类型转换，再确定操作数是否相等；

• 两个都为简单类型，字符串和布尔值都会转换成数值，再比较

• 简单类型与引用类型比较，对象转化成其原始类型的值，再比较

• 两个都为引用类型，则比较它们是否指向同一个对象

• null 和 undefined 相等

• 存在 NaN 则返回 false

全等操作符：

全等操作符由 3 个等于号（ === ）表示，只有两个操作数在不转换的前提下相等才返回 true。即类型相同，值也需相同

区别：

• 相等操作符（==）会做类型转换，再进行值的比较，全等运算符不会做类型转换

• null 和 undefined 比较，相等操作符（==）为true，全等为false

除了在比较对象属性为null或者undefined的情况下，我们可以使用相等操作符==，其他情况建议一律使用全等操作符===；

Javascript中的事件模型如何理解？

====================================================================================

事件模型可以分为三种：

• 原始事件模型（DOM0级）

• 标准事件模型（DOM2级）

• IE事件模型（基本不用）

点击Javascript中的事件模型查看详情

谈谈你对进程和线程的理解？

============================================================================

多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程来启动和管理的。

一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。

关系：

• 进程中的任意一线程执行出错，都会导致整个进程的崩溃。

• 线程之间共享进程中的数据。

• 当一个进程关闭之后，操作系统会回收进程所占用的内存。

• 进程之间的内容相互隔离。

点击到底什么是Event Loop？查看详解

说一说Javascript中事件循环的理解？

=====================================================================================

JavaScript 在设计之初便是单线程，即指程序运行时，只有一个线程存在，同一时间只能做一件事；为了解决单线程运行阻塞问题，JavaScript用到了计算机系统的一种运行机制，这种机制就叫做事件循环（Event Loop）

在JavaScript中，所有的任务都可以分为：

• 同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行

• 异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等

同步任务与异步任务的运行流程图如下：

从上面我们可以看到，同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。上述过程的不断重复就是事件循环;

点击对Javascript中的事件循环机制的探索和详解查看详解

介绍一下宏任务和微任务

==========================================================================

解释下什么是事件代理和应用场景？

===============================================================================

是什么：

事件代理，俗地来讲，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素；

事件流的都会经过三个阶段：捕获阶段 -> 目标阶段 -> 冒泡阶段，而事件委托就是在冒泡阶段完成；

事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素

当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数

应用场景：

如果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件，如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，这时候就可以事件委托，把点击事件绑定在父级元素ul上面，然后执行事件的时候再去匹配目标元素

点击事件代理和应用场景查看详情

什么是函数柯里化？

========================================================================

是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

把接受多个参数的函数转换成接受一个单一参数的函数

// 普通函数

var add = function(x, y) {

return x + y;

}

add(3, 4) //7var foo = ‘bar’;

// 柯里化

var foo = function(x) {

return function(y) {

return x + y

}

}

foo(3)(4) // 7

Ajax的原理是什么，如何实现？

===============================================================================

是什么：

AJAX全称(Async Javascript and XML)

即异步的JavaScript 和XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面

流程图如下：

实现过程:

• 创建 Ajax的核心对象 XMLHttpRequest对象

• 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接

• 构建请求所需的数据内容，并通过XMLHttpRequest 对象的 send() 方法发送给服务器端

• 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态

• 接受并处理服务端向客户端响应的数据结果

• 将处理结果更新到 HTML页面中

点击Ajax的原理、实现步骤和封装查看详解

bind、call和apply的区别?

==================================================================================

作用：

call、apply、bind作用是改变函数执行时的上下文，简而言之就是改变函数运行时的this指向；

区别：

• apply、call、bind 三者都是可以改变函数的this指向的

• apply 和 call 都是改变函数this指向，并传入参数后立即调用执行该函数

• bind 是在改变函数this指向，并传入参数后返回一个新的函数，不会立即调用执行

• apply 传入的参数是数组形式的；call 传入的参数是按顺序的逐个传入并以逗号隔开； bind 传入的参数既可以是数组形式，也可以是按顺序逐个传入。

点击bind、call和apply的区别查看详情

说说你对DOM的理解，常见的操作有哪些？

===================================================================================

DOM全称为The Document Object Model，即文档对象模型。应该理解为是一个规范，是一种跨平台的、独立于编程语言的API，它把HTML、XHTML或XML文档当作一个树结构，而每个节点视为一个对象，这些对象可以被编程语言操作，进而改变文档的结构，映射到文档的显示。

简单来说，DOM就是我们为了方便编程语言对HTML等文档进行操作，所以啊，把HTML文档中的节点全部视为一个个的对象，然后这些对象依照层级关系形成一棵树，这棵树就命名为DOM树。有了对象，编程就方便多了，只要一层层拿到对象就可以优雅地改变对象的属性进而动态地改变HTML等文档的展示。

下面就来分析DOM常见的操作，主要分为：

• 创建节点

• 查询节点

• 更新节点

• 添加节点

• 删除节点

点击DOM的理解和常见的操作查看详解

说说你对BOM的理解，常见的BOM对象你了解哪些？

========================================================================================

是什么：

BOM (Browser Object Model)，浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象

其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率；

BOM对象：

• window

• location

• navigator

• screen

• history

点击对BOM的理解和常见的BOM对象查看详解

说说 JavaScript 中内存泄漏的几种情况？

========================================================================================

是什么：

内存泄漏（Memory leak）是在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存；

对于持续运行的服务进程，必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃；

所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为"垃圾回收机制"

常见内存泄露情况：

• 意外的全局变量

• 定时器也常会造成内存泄露

• 还有闭包，延长了函数内部变量的生命周期，调用不当和不及时释放也会造成内存泄漏

JavaScript中本地存储的方式有哪些？区别及应用场景？

=============================================================================================

本地存储的方式：

• cookie

• sessionStorage

• sessionStorage

区别：

• 存储大小：cookie数据大小不能超过4k，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

• 有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

• 数据与服务器之间的交互方式，cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端；sessionStorage和localStorage不会自动把数据发给服务

应用场景：

• 标记用户与跟踪用户行为的情况，推荐使用cookie

• 适合长期保存在本地的数据（令牌），推荐使用localStorage

• 敏感账号一次性登录，推荐使用sessionStorage

点击本地存储的方式介绍查看详解

JavaScript中如何实现函数缓存？有哪些应用场景？

===========================================================================================

是什么：

函数缓存，就是将函数运算过的结果进行缓存

本质上就是用空间（缓存存储）换时间（计算过程）

缓存只是一个临时的数据存储，它保存数据，以便将来对该数据的请求能够更快地得到处理

实现方法：

• 闭包

• 柯里化

• 高阶函数

以下几种情况下，适合使用缓存：

• 对于昂贵的函数调用，执行复杂计算的函数；

• 对于具有有限且高度重复输入范围的函数

• 对于具有重复输入值的递归函数

• 对于纯函数，即每次使用特定输入调用时返回相同输出的函数

点击如何实现函数缓存查看详解

说说函数节流和防抖？有什么区别？如何实现？

====================================================================================

节流（throttle）：

• n 秒内只运行一次，若在 n 秒内重复触发，只有一次执行

防抖（debounce）：

• n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

白话文理解：

把电梯完成一次运送，类比为一次函数的执行和响应

假设电梯有两种运行策略 debounce（防抖） 和 throttle（节流），超时设定为15秒，不考虑容量限制

电梯第一个人进来后，15秒后准时运送一次，这是节流；

电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖

区别：

相同点：

• 都可以通过使用 setTimeout 实现

• 目的都是，降低回调执行频率。节省计算资源

不同点：

• 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能

• 函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次

点击函数节流和防抖查看详解

es6有哪些新特性？

=========================================================================

• Let和const关键字

• 变量的解构赋值

• 数组，对象的扩展

• 箭头函数

• 展开运算符

• 类的支持

• 函数的参数默认值