ES5
1.声明脚本
<script type="text/javascript"></script>
PS：<script>标签放在body里面。
<html> <!-- ... --> <body> <!-- ... --> </body> <script type="text/javascript" src="./js/config.js"></script> </html> <!-- 或者 --> <html> <!-- ... --> <body> <!-- ... --> <script type="text/javascript" src="./js/config.js"></script> </body> </html>
浏览器最终渲染成这样。
2.DOM与BOM
DOM（Document Object Model）指文档对象模型。
BOM（Borwser Object Model）指浏览器对象模型。
PS：DOM基本操作
查找节点 document.getElmentById
创建节点 element.creatElement，document.body.appendChild
删除节点 element.remove
修改节点 element.setAttributeNode
windows.top指顶端对象。
windows.parent指父对象。
3.var与不var的区别
//表示全局变量 var a = 89 function test() { //全局变量a重新赋值。 // a = 80 //函数内部定义一个变量a var a = 80 console.log(a) } test() console.log(a)
PS：js是弱数据类型，意思是不需要指定数据类型是什么，数据类型是由js引擎决定的。
4.js 比较运算符
console.log(2 > 1) //true console.log(6 < 2) //false console.log(2 <= 4) //true console.log(2 >= 4) //false //==比较值是否相等，需要自动转换类型再比较。 //===精准比较值与类型是否相等，不需要自动转化类型再比较。 console.log('2' == 2) //true console.log('2' === 2) //false console.log('2' != 2) //false console.log('2' !== 2) //true //null是引用为空时（如对象） //undefined是数值为空时（如普通变量） console.log(typeof null) //object console.log(typeof undefined) // undefined console.log(null == undefined) //true，因为null是空白的对象引用，空白的对象引用就等于没有定义，所以相等。 console.log(null === undefined) //false，因为null是null类型，undefined是undefined类型，类型不匹配，所以不相等。
5.js逻辑运算符
var expr = 1 //expr表达式为（null、NaN、0、''、undefined）会转为false if (expr) { console.log(true) } else { console.log(false) } // true var expr1 = 1 var expr2 = 1 // &&、||、!、!! 逻辑运算符，逻辑运算符结果类型不一定是boolean，可以是任意类型。 console.log(expr1 && expr2) // 1。 // &&、|| 具有短路功能，第一个表达式不满条件（false），后面的表达式将被忽略。 console.log(true && false) //false console.log(false && true) //false console.log(false || true) //true console.log(true || false) //true // !、!! 逻辑运算符 console.log(!true) // false console.log(!!true) // true // &、| 既是逻辑运算符,也是位运算符（按位操作符）。 console.log(true & false) //0，false 转换为 0，true 转换为 1，0 & 1 = 0 console.log(true | false) //1
5.js中this关键字
this用法等于public（全局）
function Person(){
var name ="abc";//私有
this.name ="abd3"//共有
}
this指向上一个对象，最后调用的的对象。
6.js闭包
闭包就是能够读取其他函数内部变量的函数。外部是不能访问函数内部的。
7.prototype和__proto__区别
prototype是只属于function的，显式属性，而__proto__属于所有object的，隐式属性。
function的prototype属性表示该function所创建的对象的原型。
PS：构造器其实就是一个普通的函数。当使用 new 操作符来作用这个函数时，它就可以被称为构造方法（构造函数）。
funtion的引用就是原型。
原型指向自己的原型（prototype）所形成一级一级的链结构就是原型链。
8.编码转化
//将字符串转换成URL编码 var myString = 'hello all' var code = encodeURI(myString) var str = decodeURI(code) console.log(code) //hello%20all console.log(str) //"hello all"
10.js innerhtml 与outerhtml区别
innerhtml 设置或获取位于对象起始和结束标签内的 HTML
如：<div><span>innerhtml</span></div>
outerhtml 设置或获取对象及其内容的 HTML 形式
如：<div><span>innerhtml</span></div>
12.js中的document对象与window对象区别
document当前页面所有的，包括超出的部分。
window当前窗口所有的，超出的部分不计。
13.js性能优化
能用原生js就用js代码写，减少js库（jquery）依赖。
避免使用 with 关键字与eval() 函数。（不精准定位查询，整体遍历查询，耗资源）。
将重复的表达式赋值精简到最小 （建议使用三目运算符）。
在复杂对象中使用索引来查找数组 （快速定位，节约查询时间）。
少用 document.write()函数（文档流输入输出也是很占资源的）。
15.js的严格模式
在函数里面加"use strict";
比如：使用严格模式下，变量都必须先用var命令声明，然后再使用。
好处就是保证代码的严谨性。（慎用）
16.js代码懒加载
var script = document.createElement ("script"); script.type = "text/javascript"; script.src = "script.js"; document.getElementsByTagName("head")[0].appendChild(script);
优点：无阻塞，异步加载js代码快。
17.函数
函数声明
function foo(){ console.log(1) }
函数表达式
var foo = function(){ console.log(1) }
匿名函数
function(){ console.log(1) }
补充： IIFE(Immediately Invoked Function Expression) ，称为立即执行函数，即不需要调用立即执行函数， 在函数周围添加括号以表明它是一个函数表达式。
优点防止全局污染内部变量。
//无参数 (function(){ var a = 1; var b = 2; alert(a+b); })(); //有参数 (function(a,b){ var result = a+b; return result; })(1,2);
18.链式调用（jquery为例）
如：$("p").append("文本颜色").css("color","red");
19.call与apply、bind区别
call() 调用一个对象的一个方法，以另一个对象替换当前对象。 （ 我替换别人的方法）
apply() 应用某一对象的一个方法，用另一个对象替换当前对象。 （别人的方法交给我去使用）
bind() 创建一个新函数，把新函数的tihs传给指定对象。
PS：es6中使用箭头函数取代bind()。
20.setInterval与setTimeout区别
setTimeout超时执行一次。
setInterval每隔一段时间执行一次。
PS：setTimeout与setInterval是同步方法。
使用定时器都要先clearTimeout(xxx)，防止定时器多次执行。
21.typeof与instanceof区别
instanceof 判断对象的原型链是否存在于某个构造函数prototype属性上，返回一个布尔型。
typeof 判断数据类型，返回一个字符串，返回值为"number"、"string"、"boolean"、"object"、"function" 和 "undefined"。
PS：简单类型使用typeof，复杂类型使用instanceof，因为typeof无法确定引用对象中具体类型。
[] instanceof Array; // true
typeof []; //object
补充：typeof应用：可以判断某些对象或方法是否已经初始化。
22.js作用域
全局变量和局部变量。
23.target与currentTarget区别
target一般指当前元素点击事件流。
currentTarget一般指当前元素的父元素事件流。
24.ajax缓存
请求一些长期不变的数据可以缓存起来，提高的页面性能。比如城市级联的数据。
PS：get 请求适合采用缓存。
25.ajax轮询与ajax长轮询。
//ajax轮询，定时发起ajax请求。 window.setInterval(getInfoApi, 10000) function getInfoApi() { $.ajax({ type: "get", url: "http://www.xxx.com", contentType: "application/json", success: function(res) { console.log(res) }, error: function(err) { console.error(err) }, }) }
//ajax长轮询，循环发起ajax请求 getInfoApi() function getInfoApi() { $.ajax({ type: "get", url: "http://www.xxx.com", contentType: "application/json", success: function(res) { getInfoApi() }, error: function(err) { getInfoApi() }, }) }
PS：ajax请求contentType常见类型
“application/x-www-form-urlencoded” ：form表单提交。
优点：简单快捷，支持各种数据类型提交。
缺点：仅适用用于简单数据类型，解析效率低。
POST /xxx HTTP/1.1 Content-Type: application/x-www-form-urlencoded name=Sroot&sex=man ---------------------------------------------------- GET /xxx?name=Sroot&sex=man HTTP/1.1 Content-Type: application/x-www-form-urlencoded
“multipart/form-data”：FormData数据格式提交。
优点：简单快捷，适合传输二进制文件，文件类型传输效率高。
缺点：仅适用用于简单数据类型，解析效率低。
POST /xxx HTTP/1.1 Content-Length: 68137 Content-Type: multipart/form-data; boundary=---------------------------314911788813839 -----------------------------314911788813839 Content-Disposition: form-data; name="foo"，filename="foo.txt"
“application/json”：json数据格式提交。
优点：简单快捷，支持复杂数据类型，文本类型传输效率高。
缺点：仅适用于文本数据类型，对文件类型传输效率低。
POST /xxx HTTP/1.1 Content-Type: application/json; {"uid":"4d5df","info":{"sex":"man"}}
其他不常见类型就不列举。
26.html调用js方法。
<button onclick="test()">点我</button> <script> //正确写法 test = function() { alert('ok') } //错误写法 function test () { alert('ok') } </script>
27.监听浏览器关闭事件
window.onbeforeunload = function(e) { console.log('beforeunload') return 1 }
PS：1.当前页面标签关闭才会触发，关闭浏览器按钮不会触发。
2.当前页面需要有表单元素（input、textarea）才会触发。
28.回调函数
一般指http请求的回调函数，等待数据请求回来才执行的函数。
function testAjax(params,callback){ var result = 1; $.ajax({ url : 'http://www.ss.com', type : "post", data : {"params ":params }, async : true, success : function(data) { result = 2; callback(result); } }); } testAjax("Value",function(rs){ console.log(rs) })
29.回调地狱 （callback-hell）。
指嵌套过多的回调函数。
getData(function(x) { nextFuntionA(x, function(y) { nextFuntionB(y, function(z) { //... }) }) })
js函数柯里化
柯里化指将函数转换为多个的过程，减少重复性就可以实现相同的功能。（简单来讲就是一环扣一环，类似回调地狱形式）
// 普通函数 function add(x, y) { return x + y } // 柯里化函数 function curryingAdd(x) { return function (y) { return x + y } } add(1, 2) //3 curryingAdd(1)(2) //3
PS：Reactjs的高阶组件就是应用函数柯里化的例子。
补充：函数柯里化优点：复用参数，复用部分通用方法。
函数柯里化缺点：不易于阅读代码，容易滥用导致js性能下降。
30.js纯函数与非非纯函数
纯函数
指函数只依赖传入的参数，相同参数返回相同的结果，不会与外部（方法、变量）进行交互产生副作用。
例子：
function pureFunc(x,y){ return x + y; }
非纯函数
指函数除了只依赖的传入的参数之外，还有其他影响因素（方法、变量、读写操作、网络）影响产生副作用。
例子：输出显示、随机数、时间、网络请求、读写操作的数据。
function impureFunc(value){ return Math.random() * value; }
A();//函数A执行完，会被垃圾回收器回收内存。 var c=A(); //不会被回收，变量c引用函数A。 c=null // 变量c置空，函数A就会被垃圾回收器回收内存
内存泄漏就是应用程序无法释放不再使用内存，导致计算机系统可用内存较少，降低计算机性能。
例子：无限循环语句（计时器）、全局变量（没有使用变量修饰符，闭包）。
<button onclick="addLi()">添加li元素</button> <ul onclick='getEventType(event)'> <li>1</li> <li>2</li> <li>3</li> </ul> <script type="text/javascript"> function getEventType(e) { console.log(e.target.innerText); } var ulElement = document.getElementsByTagName('ul')[0] function addLi() { var ulLength = ulElement.children.length var liElement = document.createElement('li') liElement.innerText = ulLength ulElement.appendChild(liElement) } </script>
//阻止冒泡事件 e.stopPropagation() e.cancelBubble = true //函数内部 return false //阻止捕获事件/默认行为 e.preventDefault() e.returnValue = false //函数内部 return false
补充:
1.js递归函数。（自己调用自己）
如：function count(i) {
PS: 递归函数一定要添加判断条件，否则就会报错出现内存溢出问题。
斐波那契数列(这个数列从第3项开始，每一项都等于前两项之和,即1, 1, 2, 3, 5, 8, 13)
举例:求第四项的值
var num1 = 1;
var num2 = 1;
for(var i = 3; i <= 4; i++) {
var temp = num2;
console.log("第" + (i - 2) + "次,temp=" + temp)
num2 = num1 + num2;
console.log("第" + (i - 2) + "次,num2=" + num2)
num1 = temp;
console.log("第" + (i - 2) + "次,num1=" + num1)
}
console.log("结果,num2=" + num2);