JS面试题整理

1、JavaScript有哪几种数据类型

基本数据类型和引用数据类型 number string boolean null undefined
对象数据类型：对象 数组 正则 时间 Math Date 函数数据类型：function

2、call() 和 apply() 的区别和作用？

call方法传参数是用逗号隔开，从第二个参数开始一个一个传进去
apply方法传参数，除了第一个参数以外，剩下的参数要把他放在一个数组中传入，然后在形参赋值的时候，也是一个一个的赋值

JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时，用 call，而不确定的时候，用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个数组来便利所有的参数。

3、BOM对象有哪些，列举window对象？

1. window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
2. document对象，文档对象；
3. location对象，浏览器当前URL信息；
4. navigator对象，浏览器本身信息；
5. screen对象，客户端屏幕信息；
6. history对象，浏览器访问历史信息。

4、列举至少3种强制类型转换和2种类型转换？

Boolean(value)——把给定的值转换成Boolean型；
Number(value)——把给定的值转换成数字（可以是整数或浮点数）；
String(value)——把给定的值转换成字符串。

js提供了parseInt()和parseFloat()两个转换函数。
前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)。

5、请写出以下运算结果：

alert(typeof null);  objecy
alert(typeof undefined);  undefined
alert(typeof NaN);  number
alert(NaN\==undefined);  false
alert(NaN\==NaN);  false
var str="123abc";
alert(typeof str++); number
alert(str); nan

6、JavaScript的typeof返回哪些数据类型？

number, boolean, string, undefined, object, function
（它不能细分object）

7、data-属性的作用是什么？

自定义data属性
使用 data-* 属性来嵌入自定义数据

8、document.ready和document.load和$(function(){})有什么区别？

document.ready 是页面文件资源加载完毕 执行
document.load 是dom结构详细信息（包括了加载图片等其他信息）加载完毕执行
$(function(){}) dom结构加载完成 执行

9、什么是闭包？闭包作用？在工作中是如何应用的?

闭包的概念：函数执行都会形成一个私有作用域 保护里面定义的私有变量不受外界干扰，这种保护机制 叫做闭包
但是现在99%的IT开发者都认为：函数执行，形成一个不销毁的私有作用域，除了保护私有变量以外，还可以存储一些内容，这样的模式才是闭包

介绍一下闭包和闭包的常用场景

闭包作用：
（1）保护 团队协作开发 每个开发者把自己的代码存放在一个私有的作用域中，防止相互之间的冲突 把需要供别人使用的方法
通过return或者window.xxx暴露在全局下即可； jQuery源码中也是利用保护机制实现的

（2）保存
eg:选项卡 的闭包解决方法 单例模式（JS高阶编程技巧：惰性思想/柯理化函数思想…）

10、JS实现继承的几种方式?
什么是继承：子类继承父类的一些属性和方法

(1) 原型继承
(2) call继承
(3) 寄生组合继承
(4) ES6中的类及继承

11、创建对象的三种方式?

(1) 通过"字面量"方式创建
(2) 通过"构造函数"方式创建
(3) 通过object方式创建

1.对象字面量创建对象
var obj = { a:1,b:2 };
注意：对象字面量是一个表达式，这种表达式每次运算都会创建并初始化一个新对象，并计算这个新对象的每个属性值。所以如果在循环体内使用对象字面量，每次循环时都会创建新对象。

2.通过new运算符创建对象
var obj = new Object(); //创建空对象 var ary = new Array(); //创建空的数组对象
注意：new运算符后面跟的是一个函数调用，这个函数被称为构造函数。js中原始类型都包含内置的构造函数，也可以自己定义构造函数。

3.通过立即执行函数创建对象
var obj = (function(){ return {x:1,y:2};}());
注意：在立即执行函数内部一定要有return语句，return出的内容就是待创建的对象。

4.通过Object.create()创建对象
var obj = Object.create({x:1,y:2});
注意：Object.create()是一个静态函数，传入原型对象就可以创建继承此原型对象的对象，例如上面的例子中obj对象继承了x,y属性。

12、new Person()时发生了什么?

构造函数模式执行 通过一个new 把Person 当做一个类 执行 并且返回这个类的实例 就是返回“Object” (构造函数模式：创建一个自定义类 并且创建这个类的实例（封装组件）

13、什么是深拷贝和浅拷贝？
1.浅拷贝：复制一份引用，所有引用对象都指向一份数据，并且都可以修改这份数据。
2.深拷贝（复杂）：复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。

深拷贝: 复制对象所引用的全部对象。
浅拷贝: 仅仅复制对象的引用,而不是对象本身。

14、手工模拟完整的bind方法

15、什么是节流和防抖？

函数节流：是确保函数特定的时间内至多执行一次。
函数防抖：是函数在特定的时间内不被再调用后执行。

应用场景：
函数节流（throttle）

频繁的mousemove/keydown，比如高频的鼠标移动，游戏射击类的
搜索联想（keyup）
进度条（我们可能不需要高频的更新进度）
拖拽的dragover等
高频的点击，抽奖等
函数防抖（debounce）

scroll/resize事件
文本连续输入，ajax验证/关键字搜索

16、console.log(typeof (typeof (typeof (typeof[]))));
出来两个和两个以上的typeof的时候 ，最终结果都是"string"

17、把一个数组随机打乱

18、如何判断一个对象是否属于某个类？

instanceof

19、严格模式和非严格模式的区别
在严格（“use strict”）模式下 （要写在第一行）

严格模式 让js在严格的条件运行js(消除不合理 一些怪异行为 优化编译器运行速度)

● 函数执行前面就算没有点 this指向的不是window 而是 undefined
● 自执行函数中的this也是undefined
● arguments 传的参就算在函数里修改 也不会改变 因为是在严格模式下

严格模式中，对象直接量中定义同名属性会抛出语法错误； 非严格模式不会报错
严格模式中，函数形参存在同名的，抛出错误； 非严格模式不会
严格模式不允许八进制整数直接量（如：023）
严格模式中 eval和arguments当做关键字，它们不能被赋值和用作变量声明
严格模式会限制对调用栈的检测能力，访问arguments.callee.caller会抛出异常
严格模式 变量必须先声明，直接给变量赋值，不会隐式创建全局变量，不能用with,
严格模式中 call apply传入null undefined保持原样不被转换为window
严格模式下, delete运算符后跟随非法标识符(即delete 不存在的标识符)，
会抛出语法错误； 非严格模式下，会静默失败并返回false
严格模式中，arguments对象是传入函数内实参列表的静态副本；非严格模式下，
arguments对象里的元素和对应的实参是指向同一个值的引用

20、一个页在从输入url，到页面显示完成，都经历了哪些过程？你有什么优化的技巧吗？
主要分为三个阶段（请求request、响应response、渲染dom render）

[请求阶段]
1、根据输入的URL中的域名到DNS服务器上进行反解析，找到服务的外网IP
2、通过外网IP地址，找到对应的服务器
3、通过输入的端口号（HTTP默认端口80、HTTPS默认端口443、FTP默认端口21）找到服务器上对应的服务及资源文件

[响应阶段]
1、服务器根据请求的内容，找到对应的资源文件，把资源文件中的代码获取到
2、通过传输协议（例如：HTTP或者HTTPS）把获取的原代码返回给客户端浏览器

[DOM渲染]
1、不同的浏览器会调用自己的内核（例如：谷歌webkit、IE的trident、火狐的gecko、欧朋的presto…）把返回的原代码进行渲染，调取电脑中的GPU（显卡），绘制出对应的页面

21、JS运行机制
如何理解JS的单线程

因为JS运行在浏览器中，是单线程的，每个window一个JS线程，既然是单线程的，在某个特定的时刻只有特定的代码能够被执行，并阻塞其它的代码。而浏览器是事件驱动的（Event
driven），浏览器中很多行为是异步（Asynchronized）的，会创建事件并放入执行队列中。javascript引擎是单线程处理它的任务队列，你可以理解成就是普通函数和回调函数构成的队列。

当异步事件发生时，如mouse click, a timer firing, or an XMLHttpRequest completing（鼠标点击事件发生、定时器触发事件发生、XMLHttpRequest完成回调触发等），将他们放入执行队列，等待当前代码执行完成。

22、script标签的defer、async的区别

defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行
async是在加载完成后立即执行，如果是多个，执行顺序和加载顺序无关

包括三个阶段： 捕获阶段 目标阶段 冒泡阶段

2、DOM事件级别有哪些?
DOM0 DOM1 DOM2 不同版本

DOM 0级事件： 在行内 或者直接给元素绑定 都是DOM0级事件
只有冒泡阶段 DOM 2级事件： 需要通过addEventListener / removeEventListener 绑定/移除
它俩是 EventTarget的原型上的方法
不需要加on

3、描述DOM事件捕获和冒泡的具体流程?
事件捕获 先捕获—>再到目标—>再到冒泡

1)捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
2)目标阶段：到达目标事件位置（事发地），触发事件；
3)冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

4、Event对象的常见应用场景?

事件对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行

5、事件委托是什么？

事件委托：利用事件默认会进行冒泡传播的机制，给最外层容器相关行为（eg：click）绑定事件，当后代元素中的相关行为（click）触发时，会一直触发到最外层容器相关行为（click） 我们根据事件对象中的事件源来判断（当前是哪个元素）并作出相应的处理

6、事件冒泡,e.target和e.currentTarget的区别
事件传播（事件冒泡）：

当前元素的相关行为（例如click）触发的时候 ，他的所有上级元素的相关行为（click）也会触发 一直到document
（！行为要统一如果一个是onclick一个是onmouseover 就不会有冒泡）

e.currentTarget指的是注册了事件监听器的对象，而e.target指的是该对象里的子对象，也是触发这个事件的对象

7、事件委托的实现原理是什么？有什么优势与缺点？
原理：事件冒泡机制

优势：
(1)可以大量节省内存占用，减少事件注册，比如ul上代理所有li的click事件就很不错，
(2)可以实现当新增（或删去）子对象时无需再次对其绑定（或解绑）事件。尤其是对于动态部分的内容，比如AJAX，不需要对新增的元素进行绑定以及对删除的元素解除绑定

缺点：
(1)事件委托是基于事件冒泡机制来说的，如果不支持事件冒泡则不能进行事件委托
(2)如果层级过多，冒泡过程中，很可能被某层阻断

1、排序方法有哪些？

排序的方法：插入排序 冒泡排序 快速排序

泡排序思想：每一次对比相邻两个数据的大小，小的排在前面，如果前面的数据比后面的大就交换这两个数的位置

快速排序思想：先找到一个基准点（一般指数组的中部），然后数组被该基准点分为两部分，依次与该基准点数据比较，如果比它小，放左边；反之，放右边

2、请使用原生JS语法将以下数组进行去重和排序（不使用sort）
var arr=[5,2,2,1,4]

上图有个地儿写错了 笔记里截图也不方便改
ary[i]=ary[ary.length-1];记得改一下 前面有ary[ary.length-1]

3、数组sort 排序 只能排10以内的

// 从小到大  ary.sort(function (a,b){return a-b})
// 从大到小  ary.sort(function (a,b){return b-a})

4、插入排序思想：每次摸一张，每拿一张的时候，看手里的牌，从右到左依次比较，发现比手里的某一张牌小，放到他的左边

• px：绝对单位，页面按精确像素展示
• em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值
• rem：相对单位，可理解为”root em”,
  相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持
• vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%
• vh：viewpoint height，视窗高度，1vh等于视窗高度的1%
• vmin：vw和vh中较小的那个
• vmax：vw和vh中较大的那个

2、有哪些隐藏内容的方法

1. CSS display的值是none。
2. type=”hidden”的表单元素。
3. 宽度和高度都显式设置为0。
4. 一个祖先元素是隐藏的，该元素是不会在页面上显示。
5. CSS visibility的值是hidden。
6. CSS opacity的值是0。

3、display和disvisibility:hidden的区别

联系：它们都能让元素不可见

区别：

• display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；
• visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
• display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；
• visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility:
  visible;可以让子孙节点显示；
• 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
• 读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

之前整理过一些面试题 有从网上搜集的、实际面试遇到的、也有自己看视频整理的笔记
希望能帮助到大家 （如文章内容有侵权请联系我删除）