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. 事件绑定与普通事件的区别？

onclick=‘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）

创建：$('<p id="p1">hello world1</p>')

内部：插入: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. 页面上有一个表格，代码段为<table id=’userList’>,请设置其表格文字字体为18像素，红色，文字间距0.2em,行高150%

58. 对字符串abcdef进行翻转，原生

59. 实现点击li，alert出它的index (原生和jquery)

<ul id="test">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

60. 随机选取10-100之间的10个数字，存入一个数组，并排序

61. 一个div里有个关闭按钮，点击按钮和div外面所有位置，都可以关闭div

62. 实现alert()函数中出现换行？

63. 判断字符串格式是否符合要求，第一个是字母，往后可以是数字、字母、下划线，字符总长度为5-20

64. 输出页面的节点个数，DOM节点原生

65. 手写JQuery中的ajax获取json简单示例

66. 写一个函数，检测一个变量是否是String类型

67. 写下面打印出来的值

"hello world".split("").reverse().join();

68.

var name = jack;

function say(){

console.log(name);

var name = 'rose';

}

say();

console.log(name);

输出什么？为什么？

69.

var foo = 'hello';

(function(){

var bar = 'World';

alert(foo + bar)

})()

alert(foo+bar)

分别弹出什么

70. 打印出来的值

console.info("1");

setTimeout(function(){

console.info("2");

},0);

console.info("3");

71. 以下continue和break运行结果num分别是多少？

var num=1；

for(var i=0; i<10;i++)(

if(i%3==0){

continue/break;

}

num++;

}

78.

var i=0；

i++；

j=i++;

y=++j;

i,y的值分别是多少？

79.

var foo="11"+1-"1";

console.log(foo);

console.log(typeof foo);

80.

var k = 0;

for(var m = 0,n = 0;m < 10 ,n < 7;m++,n++){

k = m+n

}

console.log(k);

81.

<input type="text" id="search_input">

<input type="button" value="搜索" id="search_btn">

<div id="people_list">

<div class="unit">张三——技术部</div>

<div class="unit">李四——人事部</div>

<div class="unit">王二——财务部</div>

<div class="unit">小郑——后勤部</div>

</div>

以上代码是一组人员列表，以及一个搜索框和一个搜索按钮

要求：用JQuery实现输入关键字在文本框中，点搜索按钮能搜索到含有关键字的人员，不相关人员不显示

$('#search_btn').on('click',function(){

var arr = [];

var reg = new RegExp($('#search_input').val())

$('.unit').each(function(){

$(this).css('display','none')

if(reg.test($(this).html())){

$(this).css('display','block')

}

})

})

82. 求值，为什么？

var a= new Object();

a.value = 1;

b = a;

b.value = 2;

alert(a.value)

83. 下面这个输出什么？

function test(){

var c = '600';

setTimeout(function(){

this.c = '700';

},1000)

}

c = '800';

var a = {c:'900'};

test.apply(a);

console.log(a.c + c);

setTimeout(function(){

console.log(a.c + c);

},1100)

84. 实现节点的拖拽，原生

85. 实现省级二级联动。

86. 实现图片放大镜效果。

87. 实现轮播效果。