面试题总结
C类简单面试题
- js组成?
ECMAScript（js语法），DOM（页面文档对象模型），BOM（浏览器对象模型）
- Js输出语句?
alert弹出警示框
console.Log(输出的);浏览器控制台打印输出信息
prompt（）浏览器弹出输入框，用户可以输入
document.write() 在网页中输出内容
3.变量的命名规范?
1 不能以数字开头
2 严格区分大小写
3 不能是关键字和保留字
4 变量要有意义
5 驼峰式命名法
4.Js数据类型分类?
1简单数据类型
其中包含number，string，Boolean，undefined，null
2复杂数据类型
其中包含Object
5.请写出转为字符串的方法？请写出转为数字型的方法？
toString 转为字符串
String 转为字符串（强制转换）
parseInt（string） 将字符串类型转换为数值型
parseFloat（string）讲字符串转换为浮点数值型
Number强制类型转换 强制转换为数值型
6.什么是标识符？规范是什么？
标识符：开发人员为变量，属性，函数，参数取的名字
规范：
1 是有字母，数字，下划线_，美元符$
2 不能以数字开头
3 不能是js里的关键字和保留字
4 驼峰式命名法
7.请写出逻辑运算符以及他们的运算规则?
&& 逻辑与
两边都是true，才返回true，否则返回false
|| 逻辑或
两边只要有一个是true，就返回true，否则返回false
！ 逻辑非
用来取一个布尔值相反的值
8.请写出If双分支语句语法以及三元运算符语法？
If双分支语句语法：
语法：
if（条件表达式）{
//条件成立执行的代码 如果
}else{
//条件不成立执行的代码 否则
}
三元运算符语法：
语法：表达式1 ？ 表达式2 ： 表达式3；
执行流程：如果表达式1返回true，执行表达式2，如果返回false，执行表达式3
9.请写出switch分支流程语法以及执行流程?
语法：
Switch（表达式）{
case value1：
//表达式 等于 value1 时执行的代码
Break；
case value2：
//表达式 等于 value2 时执行的代码
Break；
case value3：
//表达式 等于 value3 时执行的代码
break；
default：
//表达式不等于任何一个value时执行的代码
break;
}
执行流程：
Switch表达式的值会与结构中的case的值做比较
如果匹配，则与该case关联的代码块会被执行，遇到break时停止，整个switch语句结束。
如果都不匹配，则执行default里的代码
10.Switch语句和if else if 语句的区别?
1 一般情况下，他们可以互相替换
2 switch … case 通常处理case比较确定值的情况，而if else语句相比更加灵活，常用于范围判断
3 switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if else语句有几种条件就要判断几种
4 当分支比较少时，if else语句的执行效率比switch高
5 当分支比较多的时候，switch的执行效率比较高，而且结构更清晰
11.循环的目的是什么？写出for循环的语法以及执行思路？
目的：可以重复执行某些代码
语法：
for（初始化变量；条件表达式；操作表达式）{
//循环体
}
执行思路：
初始化变量：初始化一个计数器，记录次数
条件表达式：确定每一次循环是否能被执行，如果结构是true就继续循环，否则就退出循环。
操作表达式：每次循环最后执行的代码，通常用来为计数器变量更新
12.写出while循环的语法以及执行思路？
语法：
While（条件表达式）{
//循环体
}
执行思路：
1 先执行条件表达式，如果返回true，就执行循环体，如果返回false，就退出循环，执行后面的代码
2 执行循环体
3 循环体执行完毕，继续判断条件表达式，如果条件仍然为true，继续执行循环体，直到条件为false，整个循环过程才结束
13.写出do while循环的语法以及执行思路？
语法：
do{
循环体代码
} while(条件表达式);
执行思路：
1 先执行一次循环体
2 在执行条件表达式，如果为true，继续执行循环体代码，如果为false，退出循环，执行下面的代码
14.split() join() 的区别?
前者是将字符串切割成数组的形式，后者是将数组转换成字符串
15.js中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令式什么?
alert
confirm
prompt
B类中等面试题
1.如何获取javascript三个数中的最大值和最小值？
Math.max(a,b,c);//最大值
Math.min(a,b,c)//最小值
2.arguments的使用?
当不确定有多少参数传递的时候，用arguments来获取
arguments其实是当前函数的一个内置对象
arguments对象中存储了传递的所有实参
Arguments的展示形式是一个伪数组，可以遍历
伪数组有以下特点
1 具有length属性
2 按照索引的方式存储数据
3 不具有数组的push，pop等方法
3.return，break，continue的区别?
return：不仅可以退出循环，还能返回return语句中的值，同时还可以结束当前函数体内的代码
break：结束当前的循环体（for，while，do while）
continue：结束本次循环，继续下一次循环（for，while，do while）
4. 全局变量和局部变量的区别?
全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间
5.作用域链?
只要是代码都一个作用域中，写在函数内部的局部作用域，未写在任何函数内部即在全局作用域中；如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。
6.构造函数的注意事项?
1. 构造函数约定首字母大写。
2. 函数内的属性和方法前面需要添加this，表示当前对象的属性和方法。
3. 构造函数中不需要 return 返回结果。
4. 当我们创建对象的时候，必须用 new 来调用构造函数。
7.new关键字的作用?
1. 在构造函数代码开始执行之前，创建一个空对象；
2. 修改this的指向，把this指向创建出来的空对象；
3. 执行函数的代码
4. 在函数完成之后，返回this---即创建出来的对象
8.事件三要素?
事件源（谁）：触发事件的元素
事件类型（什么事件）： 例如 click 点击事件
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
9.常见的鼠标事件?
onmouseover 移入、onclick 点击、onmouseout 移出、onmousemove 移动
onmouseup 抬起、onmousedown按下 onfocus 获取焦点 onblur 丧失焦点
- innerText和innerHTML的区别?
获取内容时的区别：
innerText会去除空格和换行，而innerHTML会保留空格和换行
设置内容时的区别：
innerText不会识别html，而innerHTML会识别
11.节点的种类有几种，分别是什么？
(1)元素节点：nodeType ===1;
(2)文本节点：nodeType ===3;
(3)属性节点：nodeType ===2;
12.unshift() shift()的区别?
unshift()头部添加 shift()头部删除
13.数组方法pop() push()?
push()尾部添加 pop()尾部删除
14.js提供的内置对象有哪些？
array、string、math、date
A类难度面试题
1.DOM元素的创建，增删改查和属性操作?
创建：document.wirte、innerHTML、createElement
增加 appendChild insertBefore
删除 removeChild
改 修改元素的属性：src、href、title等
修改普通元素内容：innerHTML、innerText
修改表单元素：value、type、disabled、checked等
修改元素样式：style、className
查
DOM提供的API方法：getElementById、getElementsByTagName
H5新增的方法：querySelector、querySelectorAll
利用节点操作获取元素：
父 parentNode子 children 、
兄 弟 nextElementSibling\previousElementSibling
属性操作
setAttribute：设置dom的属性值
getAttribute：得到dom的属性值
removeAttribute移除属性
2.DOM流的三个阶段以及使用方式和流程?
三个阶段：捕获阶段 、当前目标阶段 、冒泡阶段
使用方式
事件：onclick 只能执行冒泡阶段 想要执行捕获阶段
可以使用addEventListener 如果把事件监听的第三个参数设置为true，将会是事件捕获
流程
事件捕获的一个过程，比如：document-->html-->body->father->son
冒泡阶段的过程，比如：son-->father->body->html->document
3.什么是事件对象?
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象
4.事件委托的原理和作用?
原理：给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
作用：
我们只操作了一次 DOM ，提高了程序的性能。
动态新创建的子元素，也拥有事件。
5.什么是BOM，BOM的主要组成有哪些?
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
组成部分：
Document、location、navigation、screen、history
6.this的指向问题?
全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例
7.声明定时器和销毁定时器，两者之间的区别是什么?
声明定时器：setTimeout() 、setInterval()
销毁定时器：clearTimeout()、clearInterval()
setTimeout（）是延迟时间到了之后，就回去回调函数，只会调用1次，就结束这个定时器
setInterval() 每隔一段延迟时间，就会去调用回调函数，会持续的去调用
8.offset、client、scroll的用法?
offset系列 经常用于获得元素位置 offsetLeft offsetTop
client经常用于获取元素大小 clientWidth clientHeight
scroll 经常用于获取滚动距离 scrollTop scrollLeft
9.javascript的typeof返回哪些数据类型?
string,boolean,number,undefined,function,object
10.例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（== ===）
11.IE和标准下有哪些兼容性的写法?
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
12. ”==”和“===”的不同?
前者会自动转换类型,再判断是否相等
后者不会自动类型转换，直接去比较
13.函数声明与函数表达式的区别？
在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。
14.null和undefined的区别？
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示尚未存在的对象
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2）调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null表示"没有对象"，即该处不应该有值。典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
15.可视区的大小?
(1)innerXXX（不兼容ie）
window.innerHeight //可视区高度，包含滚动条宽度
window.innerWidth //可视区宽度，包含滚动条宽度
(2)document.documentElement.clientXXX(兼容ie)
document.documentElement.clientWidth //可视区宽度，不包含滚动条宽度
document.documentElement.clientHeight //可视区高度，不包含滚动条宽度
- 请描述一下 cookies，sessionStorage 和 localStorage 的区别?
存储大小
cookie数据大小不能超过4k; sessionStorage和localStorage虽然也有存储大小的限制，但比cookie 大得多，可以达到5M或更大。
有效时间
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端; sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
17.线程，进程?
线程是最小的执行单元，进程是最小的资源管理单元一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程
18.事件委托，目的，功能，写法?
把一个或者一组元素的事件委托到它的父层或者更外层元素上优点，减少内存消耗，动态绑定事件target 是触发事件的最具体的元素，currenttarget是绑定事件的元素(在函数中一般等于this)JavaScript 事件委托详解
19.css 动画和 js 动画的差异?
代码复杂度，js 动画代码相对复杂一些动画运行时，对动画的控制程度上，js 能够让动画，暂停，取消，终止，css动画不能添加事件动画性能看，js 动画多了一个js 解析的过程，性能不如 css 动画好
- 解释一下变量的提升?
变量的提升是JavaScript的默认行为，这意味着将所有变量声明移动到当前作用域的顶部，并且可以在声明之前使用变量。初始化不会被提升，提升仅作用于变量的声明。
- js加载位置区别优缺点?
html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到`<script>`脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。
所以，大部分网上讨论是将script脚本放在`<body>`之后，那样dom的生成就不会因为长时间执行script脚本而延迟阻塞，加快了页面的加载速度。
但又不能将所有的script放在body之后，因为有一些页面的效果的实现，是需要预先动态的加载一些js脚本。所以这些脚本应该放在`<body>`之前。
其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效
script放置位置的原则“页面效果实现类的js应该放在body之前，动作，交互，事件驱动，需要访问dom属性的js都可以放在body之后