JavaScript知识汇总
JavaScript 是属于网络的脚本语言；
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
字符串、数字、布尔、数组、对象、Null、Undefined
原始数据类型有5大类：Undefined,Null,Boolean,Number,String
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
实例var x // x 为 undefinedvar x = 6; // x 为数字var x = "Bill"; // x 为字符串
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
实例var x1=34.00; //使用小数点来写var x2=34; //不使用小数点来写
JavaScript 数组;下面的代码创建名为 cars 的数组：
var cars=new Array();cars[0]="Audi";cars[1]="BMW";cars[2]="Volvo";或者 (condensed array):var cars=new Array("Audi","BMW","Volvo");或者 (literal array):实例var cars=["Audi","BMW","Volvo"];
JavaScript 对象
var person={firstname : "Bill",lastname : "Gates",id : 5566};
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。实例cars=null;person=null;
声明变量类型
当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;var x= new Number;var y= new Boolean;var cars= new Array;var person= new Object;JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
未定义：Undefined:表示变量声明了，未赋初始值；Null属于Object类型在文档中找不到某个元素的时候则为Null；==:表示比较值；===:表示比较值和类型；变量声明时不加var如：a=1;这是全局变量；变量声明时加var如：var a=1;这是局部变量；在JavaScript中可以自动转换数据类型
javaScript代码在html里面执行方式：
1.直接在标签中通过实践执行JavaScript代码2.在网页中任何地方直接嵌套使用JavaScript代码
JavaScript函数有两种：
1.命名函数 function test(){ document.write("命名函数hello"); }2.匿名函数函数本身也是一个值，值就可以出现在=的右边 var test = function(){ document.write("匿名函数test"); } var p = { name:"zhangsan", eat:function(){ alert('eat'); } }
isNaN()如果是一个数字返回false;不是数否则返回true;
javascript中的运算符跟java中的使用一样
条件语句
通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。在 JavaScript 中，我们可使用以下条件语句：if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码 if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码 if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行 switch 语句 - 使用该语句来选择多个代码块之一来执行
JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数 for/in - 循环遍历对象的属性 while - 当指定的条件为 true 时循环指定的代码块 do/while - 同样当指定的条件为 true 时循环指定的代码块
break 语句可用于跳出循环。
一、JS基础
1. js里的null和undefined的区别
undefined表示未定义，null表示对象为空。
null是undefined衍生出来的值，因此两者用==比较是相等的。
2. undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined
3. setTimeout和setInterval方法的区别
相同点:都是异步操作，都是计时器功能， 区别：setTimeout只执行一次 setInterval每隔固定时间执行一次
setTimeout可递归调用自身实现setInterval效果
4. js中eval函数的功能
eval() 函数可计算某个字符串，并执行其中的的 JavaScript
代码 如：
var str = '2 + 3'
console.log(eval(str));
5. 一个方法没有传参，调用的时候再传参行不行，怎么传
函数其实是不需要形参的，函数内部要用的参数都保存在arguments里，所以只需要在arguments里取
function add(){
var sum = 0;
for(var i = 0 ; i < arguments.length ; i++){
sum += arguments[i];
}
return sum
}
console.log(add(3,5,7,9));
6. 分割字符串方法
split();
7. 带字符串的数组如何排序
ary.sort(function(a,b){return a - b});
8. 列出数组对象方法，并描述功能，至少4个
push
pull
shift
unshift
splice
join
reverse
9. 说说 JS return
用于函数执行后返回结果。
10. ‘==’和‘===’
==不判断类型，===要判断类型。
11. 什么是伪数组，如何将伪数组转换为真数组
具备数组的形式，已经length属性，但是不具备数组的其他方法
转为数组的方法：
(1)定义一个空数组，for循环伪数组，依次push到空数组
(2)Array.prototype.slice.call(伪数组)，调用数组的slice方法
12. URL标准格式，其中包括哪几个部分
URL由三部分组成：协议类型，主机名和路径及文件名
(1)协议：一般是http、https、file等
(2)主机名hostname：是指存放资源的服务器的域名系统 (DNS) 主机名或 IP 地址
(3)port（端口号）
(4)路径
(5);parameters(参数) 这是用于指定特殊参数的可选项
(6)？Query查询 可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开。
(7)fragment 信息片段，用于指定网络资源的片段
13. document.write和innerHTML有什么区别
document.write是直接写入到页面的内容
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。
innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
14. 平时是怎么调试js的
(1)console.log();
(2)sources：断点调试；
15. 怎么选择相邻兄弟元素
previousSibling与nextSibling
16. DOM和BOM区别
DOM:文档对象模型。用于获取、操作节点对象。
BOM:操作浏览器的属性和行为。
17. typeof 是什么意思
检测变量类型，将变量的类型信息当做字符串返回，
返回值可以有六种：number、string、boolean、object、function、undefined
18. window.location.href 与window.location.replace 的区别？
window.location.href切换以后可以回退到原页面。
window.location.replace切换以后不能回退原页面。
19. JS有哪些内置的对象
内置对象：指一种语言自带的一些对象，供开发者使用，这些对象提供了一些常用或最基本必要的功能
Js内置对象有：Array，Number，String，Boolean，Date，Math，Functions，RegExp，Global，Events, Object
20. 如何判断一个变量是属于哪种类型，有几种方式，区别是什么，各自怎么使用的。
(1)typeof
(2)intanceof
(3)Object.prototype.toString.call(), 调用顶层对象Object的toString方法，而不是每个对象自身的toString方法
console.log(Object.prototype.toString.call(""));
console.log(Object.prototype.toString.call(1));
console.log(Object.prototype.toString.call(true));
console.log(Object.prototype.toString.call(new Date()));
console.log(Object.prototype.toString.call([]));
21. 什么是JSON？
(1)JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
(2)JSON 是轻量级的文本数据交换格式
(3)JSON 独立于语言
(4)JSON 具有自我描述性，更易理解
(5)JSON 使用JavaScript语法来描述数据对象，但是JSON仍然独立于语言和平台。JSON解析器和JSON库支持许多不同的编程语言。
22. js怎么将一个object对象转换成json字符串？怎么将字符串转化为对象？
对象转JSON字符串：JSON.stringify()(要转换的object对象);
JSON字符串转对象：JSON.parse();
23. arguments是什么,怎样理解？
(1)argument是js的一个内置对象
(2)每个函数都有arguments对象
(3)其表现是一个伪数组，以伪数组的形式保存函数的实参
24. 简述同步和异步的区别？
JavaScript是单线程的。
同步：指程序的下一步执行依赖上一步执行的结果，等上一步执行完毕得到结果后，再往下执行，任务执行的顺序与其排列顺序是一致的，会阻塞程序的执行，
异步：多个任务是同时执行的，当任意一个任务得到结果后，会调用预先设置好的回调函数，回调函数会依次进入任务队列，当主线程执行完成后会执行任务队列里的任务。异步操作不会影响主线程的执行，不会阻塞程序
异步是非常重要的，在浏览器端，那些耗时很长的任务，比如ajax，应该用异步操作，在服务器端，一般都是异步加回调的模式，处理同时的多个http请求，如果是同步请求，服务器的性能就会非常低，经常卡死
25. 事件委托的原理
事件委托技术—利用事件冒泡机制，将监听器添加到父节点上，来避免对每个节点添加监听器，事件监听器会分析从子元素冒泡上来的事件，找到对应的子元素
26. 事件绑定与普通事件的区别？
οnclick=‘xxx’同一个事件只能绑定一个，后面覆盖前面，可以兼容浏览器。
addEventListener(‘click’,function(){},false) 同一时间可以绑定多次，依次执行，有兼容性问题。
27. 什么是事件流，事件流有哪些，Firefox和IE各自支持哪些事件流。
事件流：页面产生事件时，事件传播的方向。
分为：冒泡事件、捕获事件。
DOM浏览器：使用冒泡+捕获。
IE浏览器：使用冒泡。
28. 冒泡事件与捕获事件
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，先捕获再冒泡。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果
29. 如何阻止事件冒泡的默认事件？
事件冒泡：现代浏览器:e.stopPropagation() IE:e.cancleBubble = true
默认事件：现代浏览器:event.preventDefault() 和 return false IE:e.returnValue = false
30. “use strict”是什么意思？使用它的好处和坏处？
严格模式：是ES5新增的js运行模式，使js在更严格、更规范化的模式下运行
好处：(1)消除JS这门语言本身存在的不合理、不严谨之处，使代码更规范，减少一些怪异行为
(2)在该模式下一些糟糕的特效会被禁用，如with，函数必须声明在顶层，arguments、callee不允许使用，
(3)消除一些代码不安全之处，eval()执行与正常模式下不同等
(4)提高编译器效率，增加运行速度，为未来新版本的js作铺垫
所以："严格模式"体现了Javascript更合理、更安全、更严谨的发展方向. 为了达到更为普遍的兼容性, 我们应该总是在严格模式下编写代码.
坏处：(1)兼容性问题，IE6789均不支持
(2)团队合作问题，有些模块是正常模式，有些是严格模式，会出现问题，解决：统一规范模式，或将不同模块写入不同的立即执行函数，每个函数加上严格和非严格
31. this对象的理解，this是怎么工作的
this是JS的一个关键字，它的值是可变化的，它的取值是在函数调用的时候，产生的上下文环境里取得，不是在声明时候取得，根据函数的调用不同会产生不同的上下文环境，this的值也就随之改变，归根结底，谁调用它就指向谁
this的工作：object对象调用函数，就指向object对象，window调用函数就指向window，call和apply调用就指向括号里的对象，bind将this固化到括号里的对象
32. 什么是闭包？为什么使用它？
闭包是一个访问自由变量的函数。它的形成有两个条件。1.函数内部必须访问外部变量。2.该内部函数被外部引用。
闭包可以将局部变量持续保存。缺点，过多的使用会导致内存占用过高。
33. 原生JS中怎么创建，插入，删除？（就是操作dom）
创建：var p1 = document.createElement('p');
赋值：p1.innerHTML = 'nice to see you'
插入：document.getElementById('div1').appendChild(p1)
删除：div1.removeChild(p1)
34. jQuery中怎么创建，插入，删除？（就是操作dom）
创建：$('
hello world1
')
内部：插入:append,appendTo后插入，prepend和prependTo前插入 外部：after、before、insertAfter、insertBefore
删除：empty和remove
35. JS查找DOM节点的方法？对应的Jq写法？
document.getElementsByTagName('li') //JQ $(‘li’)
document.getElementById('div1') //JQ $(‘#div1’)
document.getElementsByClassName('aa') //JQ $(‘.aa’)
document.getElementsByName('zhansan'); //JQ $('input[name="zhansan"]')
document.querySelector('.abc a p>span') //直接用css复合选择器 //JQ $(‘.abc a p>span’)
document.querySelectorAll('.abc') //返回.abc的子元素数组 //JQ $(‘.abc’)
36. 原生JS的window.onload 与 jquery的$(document).ready(function)有什么不同？
(1)执行时机
window.onload：会在页面所有元素加载完成后才会执行，如图片，视频等元素
jquery的ready: 会在DOM结构绘制完毕后生成DOMContentLoaded 事件时就执行
(2)可执行个数不同： window.onload只能有一个，多个的话会执行最后一个，document.ready可以执行多次
(3)window.onload不能简写，document.ready可以写成 $(function(){})
(4)在JQuery中，推荐使用$(document).ready() ,如果需要在window.onload后执行，可以调用 $(window).load()方法
37. ajax的意义，常用的发起ajax的方法？
AJAX最根本原理就是在不刷新页面的情况下访问服务器处理数据，并根据数据的处理结果按你想要的方式对页面作出即时更改
意义：局部刷新提供良好的用户体验，减轻服务器的宽度和压力
常用发起ajax的方法：(1)原生xhr。(2)JQuery的$.ajax。(3)ES6的 fetch。
38. 你提到了jquery，来你介绍一下 jquery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
39. 列举jquery中的提高性能的方案？
(1)对某个元素多次进行选择，会大大消耗浏览器资源，因此可以定义一个变量保存一次选择，多次调用
(2)若要查找页面中指定类名的标签，会极大消耗浏览器资源，可以给其父元素加个id，通过后代选择器来查找类名
(3)jquery提供大量的筛选方法，如eq().children()等，最好使用 find（）方法** 性能最高
(4)jquery 每次使用会有一些缓存，所以推荐使用**链式写法**
40. css3的animate和jq的animate的区别
(1)css3的3D动画，JS模拟不了
(2)css3的2D转换，如translate\scale\rotate（）\animation等，效率均高于js模拟
(3)其余常规属性，如width、height、opacity、color等,css3均低于js模拟，这里推荐js模拟
(4)css3的动画是利用C语言编写，是系统提供的方法，一般情况下效率高于Jq
41. 任意写20个Jquery的方法
each,get,data,map,trim,css,animate,addClass,removeClass,props,attr,appendTo,append,after,before,insertBefore,instanceofrtAfter,find(),eq(),ajax,load,remove,empty,show,hide,slideUp,slideDown,fadeIn,fadeOut,fadeTo
42. JQuery绑定事件的方式，请说明他们的优缺点
(1)on ,推荐，因为其他三个都是调用on实现的
(2)bind，只能给当前元素绑定事件
(3)live，1.9已移除，解决bind的缺陷，可以给未来元素绑定事件，效率低，绑定在document上
(4)delegate 支持事件委托，支持给未来元素绑定事件，最接近on
43. attr和prop的区别
(1)对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
(2)对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
(3)像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
44. $(this)和this关键字在jQuery中有何不同
$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。
this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)
45. 请简单描述一下JQuery中的选择器
1.JQuery封装了大量的选择器，具备元素，标签，类名等基本选择器功能，还对类名选择器进行扩充，支持css的语法选择器
2.对css语法选择器进行扩充，如eq,[type=’text’],has(),first.等
46. 移动端击穿问题（网上都叫“点透”问题）
例：当在C区域进行点击罩层A的时候，会发现跳到百度页面了，也就是，本来点击A，但是却透过A，点击到了B里的链接！这就是传说中的 click点透 。
出现的场景：
(1)A/B两个层上下z轴重叠。
(2)上层的A点击后消失或移开。
(3)B元素本身有默认click事件（如a标签） 或 B绑定了click事件
出现的原因：touch事件的300ms延迟
解决：
(1)移动端统一使用touch相关事件，
(2)B元素有click事件，A应及时取消默认点击，如 if(event=='touchend') e.preventDefault()
二、JS代码实现
47. 如果我要实现（一个按钮，点击之后，出现一个div提示）你会怎么做？
48. 如何获取一个对象的所有属性值。
49. 已知ID的input输入框，希望获取这个输入框的输入值？怎么做？不使用第三方框架
50. 希望获取页面中所有的checkbox怎么做，不适用第三方框架
51. foo = foo || bar ，这行代码是什么意思？为什么这样写
52. 有哪些js方式对一个DOM设置它的css样式？
53. 删除数组最后一个数
54. 怎么向数组指定位置插入数据或者删除一条数据？
55. 用原生JS输出1-999之间的素数（即质数，只能被1或者本身整除的整数)
56. 写一个冒泡排序方法
57. 页面上有一个表格，代码段为,请设置其表格文字字体为18像素，红色，文字间距0.2em,行高150%