前端面试js基础（前端人必看的JS面试题汇总）

面试是每一个前端人在求职过程中都需要面对的事情              。在面试过程中              ，面试官没有办法通过实践操作去了解应聘者的技能水平 
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，所以他们更多地会通过“八股文  
  
  
  
  
  
  
”的考察来判断你是否符合公司的招聘要求 
 
  
 
  
 
  
 
  
 
  
 
  
 
 。所以作为一个前端人













，在掌握好前端技能的同时
  
  
  
  
  
  
  ，也需要掌握好一些基础理论知识 
  
  
  
  
  
  
 ，这样才能在面试中脱颖而出 


 


 


 


 


 


 


，拿到自己心仪的offer













。

那么
 
 
 
 
 
 
 ，下面小职就整理了一些在前端面试过程中比较常见的JS面试题  
   
   
   
   
   
   
 ，有需要的朋友可以看一下哦~

一  
  
  
  
  
  
  
、JS数据类型

JS数据类型通常分为基本数据类型和引用数据类型两种
  
  
  
  
  
  
  。

基本数据类型：Number 
  
  
  
  
  
  
 、String


 


 


 


 


 


 


 、Boolean 
 
 
 
 
 
 
、Null  
   
   
   
   
   
   
 、Undefined

 

 

 

 

 

 

 、Symbol
 

 

 

 

 

 

 
、bigInt七种 

 

 

 

 

 

 

，

引用数据类型：object              、Array
 

 
 

 
 

 
 

 
 

 
 

 
 

 、Date













、Function                     、RegExp 
  
  
  
  
  
  
 。

二
 
 
 
 
 
 
 
 
 
 
 
 
 
 、JS变量和函数声明的提升

1




















、在JS中变量和函数的声明会提升到最顶部执行 


 


 


 


 


 


 


。

2              、函数的提升高于变量的提升

 

 

 

 

 

 

 ，

3
 
  
 
  
 
  
 
  
 
  
 
  
 
  、函数内部如果用 var 声明了相同名称的外部变量              ，函数将不再向上寻找
 
 
 
 
 
 
 。

4













、匿名函数不会提升  
   
   
   
   
   
   
 。

三  
  
  
  
  
  
  
、== 和 ===的区别

== 和 ===都是判断等式两边是否相等 
 

 
 

 
 

 
 

 
 

 
 

 
 

，但是==是非严格意义上的相等













，值相等就相等                     ，而===是严格意义上的相等 
 
 
 
 
 
 
 
 
 
 
 
 
 
，会比较两边的数据类型和值大小




















，值和引用地址都相等才相等

四 
  
  
  
  
  
  
 、闭包

闭包就是能够读取其他函数内部变量的函数              ，闭包基本上就是一个函数内部返回一个函数 

 

 

 

 

 

 

。

优点：

1


 


 


 


 


 


 


 、可以读取函数内部的变量；

2 
 
 
 
 
 
 
、将变量始终保持在内存中；

3  
   
   
   
   
   
   
 、可以封装对象的私有属性和私有方法；

缺点：比较耗费内存

 

 

 

 

 

 

 、使用不当会造成内存溢出的问题

 

 

 

 

 

 

 。

五
 

 

 

 

 

 

 
、this

this是 JavaScript 语言的一个关键字              。在绝大多数情况下 
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，函数的调用方式决定了 this 的值（运行时绑定） 
 

 
 

 
 

 
 

 
 

 
 

 
 

。this总是指向函数的直接调用者













。如果有new关键字













，this指向new出来的对象                     。在事件中
  
  
  
  
  
  
  ，this指向触发这个事件的对象 
 
 
 
 
 
 
 
 
 
 
 
 
 
。

六              、map与forEach的区别

forEach 方法是最基本的方法 
  
  
  
  
  
  
 ，就是遍历与循环 


 


 


 


 


 


 


，默认有 3 个传参




















。这三个传参分别是遍历的数组内容 item
 

 
 

 
 

 
 

 
 

 
 

 
 

 、数组索引 index













、和当前遍历数组 Array

map 方法基本用法与 forEach 一致
 
 
 
 
 
 
 ，但是它会返回一个新的数组  
   
   
   
   
   
   
 ，所以 callback需要有 return 值 

 

 

 

 

 

 

，如果没有

 

 

 

 

 

 

 ，会返回 undefined              。

七                     、箭头函数与普通函数

函数体内的 this 对象就是定义时所在的对象              ，而不是使用时所在的对象 
 
  
 
  
 
  
 
  
 
  
 
  
 
 。不可以当作构造函数 
 

 
 

 
 

 
 

 
 

 
 

 
 

，也不可以使用 arguments 对象













，该对象在函数体内不存在













。如果一定要用                     ，可以用 Rest 参数代替
  
  
  
  
  
  
  。不可以使用 yield 命令 
 
 
 
 
 
 
 
 
 
 
 
 
 
，因此箭头函数不能用作 Generator 函数 
  
  
  
  
  
  
 。

八
 
 
 
 
 
 
 
 
 
 
 
 
 
 、同源策略

同源策略是一种约定




















，它是浏览器最核心也最基本的安全功能              ，如果缺少了同源策略 
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，则浏览器的正常功能可能都会受到影响 


 


 


 


 


 


 


。 可以说Web是构建在同源策略基础之上的













，浏览器只是针对同源策略的一种实现
 
 
 
 
 
 
 。 它是一个安全策略  
   
   
   
   
   
   
 。所谓同源是指
  
  
  
  
  
  
  ，域名




















、协议              、端口相同 

 

 

 

 

 

 

。

九
 
  
 
  
 
  
 
  
 
  
 
  
 
  、严格模式的限制

严格模式主要有以下限制：

1













、变量必须声明后再使用

2  
  
  
  
  
  
  
、函数的参数不能有同名属性 
  
  
  
  
  
  
 ，否则报错

3 
  
  
  
  
  
  
 、不能使用with语句

4


 


 


 


 


 


 


 、不能对只读属性赋值 


 


 


 


 


 


 


，否则报错

5 
 
 
 
 
 
 
、不能使用前缀0表示八进制数
 
 
 
 
 
 
 ，否则报错

6  
   
   
   
   
   
   
 、不能删除不可删除的属性  
   
   
   
   
   
   
 ，否则报错

7

 

 

 

 

 

 

 、不能删除变量delete prop 

 

 

 

 

 

 

，会报错

 

 

 

 

 

 

 ，只能删除属性delete global[prop]

8
 

 

 

 

 

 

 
、eval不会在它的外层作用域引入变量

9              、eval和arguments不能被重新赋值

10
 

 
 

 
 

 
 

 
 

 
 

 
 

 、arguments不会自动反映函数参数的变化

11













、不能使用arguments.callee

12                     、不能使用arguments.caller

13
 
 
 
 
 
 
 
 
 
 
 
 
 
 、禁止this指向全局对象

14




















、不能使用fn.caller和fn.arguments获取函数调用的堆栈

15              、增加了保留字（比如protected
 
  
 
  
 
  
 
  
 
  
 
  
 
  、static和interface）

十













、es6新增

1  
  
  
  
  
  
  
、新增模板字符串

2 
  
  
  
  
  
  
 、箭头函数

3


 


 


 


 


 


 


 、for-of（用来遍历数据—例如数组中的值

 

 

 

 

 

 

 。）

4 
 
 
 
 
 
 
、ES6 将 Promise 对象纳入规范              ，提供了原生的 Promise 对象              。

5  
   
   
   
   
   
   
 、增加了 let 和 const 命令 
 

 
 

 
 

 
 

 
 

 
 

 
 

，用来声明变量 
 

 
 

 
 

 
 

 
 

 
 

 
 

。

6

 

 

 

 

 

 

 、引入 module 模块的概念

十一
 

 

 

 

 

 

 
、attribute 和 property 的区别

attribute 是 dom 元素在文档中作为 html 标签拥有的属性













，而property 就是 dom 元素在 JS 中作为对象拥有的属性













。对于 html 的标准属性来说                     ，attribute 和 property 是同步的 
 
 
 
 
 
 
 
 
 
 
 
 
 
，是会自动更新的




















，但是对于自定义的属性来说              ，他们是不同步的                     。

十二              、let和const 的区别

let和const很相似 
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，但是let 命令不存在变量提升













，如果在 let 前使用
  
  
  
  
  
  
  ，会导致报错 
 
 
 
 
 
 
 
 
 
 
 
 
 
。如果块区中存在 let 和 const 命令 
  
  
  
  
  
  
 ，就会形成封闭作用域




















。不允许重复声明              。const定义的是常量 


 


 


 


 


 


 


，不能修改
 
 
 
 
 
 
 ，但是如果定义的是对象  
   
   
   
   
   
   
 ，可以修改对象内部的数据 
 
  
 
  
 
  
 
  
 
  
 
  
 
 。

十三
 

 
 

 
 

 
 

 
 

 
 

 
 

 、内存泄漏

内存泄漏指的是程序中己动态分配的堆内存由于某种原因程序未释放或无法释放引发的各种问题













。

内存泄漏结果：变慢 

 

 

 

 

 

 

，崩溃

 

 

 

 

 

 

 ，延迟大等

内存泄漏原因：全局变量              ，dom 清空时 
 

 
 

 
 

 
 

 
 

 
 

 
 

，还存在引用













，定时器未清除                     ，子元素存在引起的内存泄露
  
  
  
  
  
  
  。

十四













、数组(array)方法

map : 遍历数组 
 
 
 
 
 
 
 
 
 
 
 
 
 
，返回回调返回值组成的新数组

forEach : 无法 break 




















，可以用 try/catch 中 throw new Error 来停止

filter : 过滤

some : 有一项返回 true               ，则整体为 true

every : 有一项返回 false  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，则整体为 false

join : 通过指定连接符生成字符串

push / pop : 末尾推入和弹出













，改变原数组
  
  
  
  
  
  
  ， 返回推入/弹出项

unshift / shift : 头部推入和弹出 
  
  
  
  
  
  
 ，改变原数组 


 


 


 


 


 


 


，返回操作项

sort(fn) / reverse : 排序与反转
 
 
 
 
 
 
 ，改变原数组

concat : 连接数组  
   
   
   
   
   
   
 ，不影响原数组 

 

 

 

 

 

 

， 浅拷贝

slice(start, end) : 返回截断后的新数组

 

 

 

 

 

 

 ，不改变原数组

splice(start,number,value…): 返回删除元素组成的数组              ，value 为插入项 
 

 
 

 
 

 
 

 
 

 
 

 
 

，改变原数组

indexOf / lastIndexOf(value, fromIndex) : 查找数组项













，返回对应的下标

reduce / reduceRight(fn(prev, cur)                      ，defaultPrev) : 两两执行 
 
 
 
 
 
 
 
 
 
 
 
 
 
，prev 为上次化简函数的return 值




















，cur 为当前值(从第二项开始)

十五                     、JavaScript 深浅拷贝

浅拷贝：Object.assign

深拷贝：可以通过 JSON.parse(JSON.stringify(object)) 来解决

十六
 
 
 
 
 
 
 
 
 
 
 
 
 
 、异步编程的实现方式

1




















、回调函数

优点：简单              、容易理解

缺点：不利于维护
 
  
 
  
 
  
 
  
 
  
 
  
 
  、代码耦合高

2













、事件监听

优点：容易理解              ，可以绑定多个事件 
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，每个事件可以指定多个回调函数

缺点：事件驱动型













，流程不够清晰

3  
  
  
  
  
  
  
、发布/订阅(观察者模式)

类似于事件监听
  
  
  
  
  
  
  ，但是可以通过‘消息中心’ 
  
  
  
  
  
  
 ，了解现在有多少发布者 


 


 


 


 


 


 


，多少订阅者

4 
  
  
  
  
  
  
 、Promise 对象

优点：可以利用 then 方法
 
 
 
 
 
 
 ，进行链式写法；可以书写错误时的回调函数

缺点：编写和理解  
   
   
   
   
   
   
 ，相对比较难

5


 


 


 


 


 


 


 、Generator 函数

优点：函数体内外的数据交换 
 
 
 
 
 
 
、错误处理机制

缺点：流程管理不方便

6  
   
   
   
   
   
   
 、async 函数

优点：内置执行器

 

 

 

 

 

 

 、更好的语义
 

 

 

 

 

 

 
、更广的适用性              、返回的是 Promise
 

 
 

 
 

 
 

 
 

 
 

 
 

 、结构清晰

缺点：错误处理机制

十七













、面向对象编程思想

基本思想是使用对象 

 

 

 

 

 

 

，类

 

 

 

 

 

 

 ，继承              ，封装等基本概念来进行程序设计

优点：

1                     、易维护

2
 
 
 
 
 
 
 
 
 
 
 
 
 
 、易扩展

3




















、开发工作的重用性              、继承性高 
 

 
 

 
 

 
 

 
 

 
 

 
 

，降低重复工作量 
  
  
  
  
  
  
 。

4
 
  
 
  
 
  
 
  
 
  
 
  
 
  、缩短了开发周期

十八













、作用域链 

作用域链可以理解为一组对象列表













，包含 父级和自身的变量对象                     ，因此我们便能通过作用域链访问到父级里声明的变量或者函数

十九  
  
  
  
  
  
  
、原型 
  
  
  
  
  
  
 、原型链


 


 


 


 


 


 


 、继承

原型：每一个构造函数都有一个 prototype 属性 
 
 
 
 
 
 
 
 
 
 
 
 
 
，这个属性会在生成实例的时候




















，成为实例对象的原型对象 


 


 


 


 


 


 


。javascript 的每个对象都继承另一个对象              ，后者称为“原型 
  
  
  
  
  
  
 ”（prototype）对象
 
 
 
 
 
 
 。

原型链：每一个对象都有一个 proto 属性 
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，对象的属性和方法













，有可能定义在自

身
  
  
  
  
  
  
  ，也有可能定义在它的原型对象  
   
   
   
   
   
   
 。由于原型本身也是对象 
  
  
  
  
  
  
 ，又有自己的原型 


 


 


 


 


 


 


，所

以形成了一条原型链（prototype chain） 

 

 

 

 

 

 

。

继承：继承就是在子类构造函数中继承父类构造函数的私有属性和原型属性

 

 

 

 

 

 

 。我们

在子类构造函数中使用 call 或 apply 方法调用父类构造函数并改变其 this 指向为

子类构造函数的 this
 
 
 
 
 
 
 ，此时子类的构造函数就继承了父类的私有属性和私有方法              。

将父类的实例化对象赋值给子类的原型对象  
   
   
   
   
   
   
 ，此时子类就继承了父类的原型属性和

原型方法 
 

 
 

 
 

 
 

 
 

 
 

 
 

。

二十 
 
 
 
 
 
 
、逐进增强和优雅降级

逐进增强：针对低版本浏览器进行构建页面 

 

 

 

 

 

 

，保证最基本的功能

 

 

 

 

 

 

 ，然后再针对高版本浏览器进行效果  
   
   
   
   
   
   
 、交互等改进和追加功能达到更好的用户体验













。

优雅降级：一开始就构建完整的功能              ，然后再针对低版本浏览器进行兼容

前端开发虽然是一项实践性较强的工作 
 

 
 

 
 

 
 

 
 

 
 

 
 

，但是理论知识也是非常重要的













，想要在众多求职者中脱颖而出                     ，就要理论基础与实操技能两手抓                     。如果你连最基本的理论基础都没有掌握好 
 
 
 
 
 
 
 
 
 
 
 
 
 
，那面试官又怎么会相信你的技能水平能又多高呢？所以




















，建议每个前端人在找工作之前都能熟记上面的知识点              ，能够帮助你更轻松地拿到offer哦~

​