一、js的数据类型
首先要明白js一共有两大数据类型：1.基础类型2.引用类型
基础类型包括：String,boolean,Number,Symbol（ES6新增）,Undefined, Null
引用类型包括：Object(Array,Date,RegExp,Function)
扩展：基本数据类型中有两个为特殊数据类型： null, undefined
数据类型 --- 字符串、数字、布尔、对象、Undefined 、Null、数组
二、数据类型判断
1.可以精准判断数据类型object.prototype.tostring.call('');
2.typeof
类型 结果
undefiner "undefined"
Null "object"
Boolean "boolean"
Number "number"
String "string"
Symbol "symbol"
函数对象 "function"
任何其他对象 "object"
三、强制类型转换和隐式类型转换
1.转换成字符型 toString() //可用作2进制，16进制的转换 num.toString(2)
2.转换成数值 Number() 注:true和false转为1和0；null返回0；undefined返回NaN;
3.转换成整数parseInt //将字符转为数字 parsenInt(str,10)
4.转换成parseFloat
1.算术运算符中会生隐式转换，+：如果任意一边为字符，都做字符拼接处理； -*/%:全部转为数值处理
2.在运算中 true==1 false==0
3.在判断语句中 所有非0为true，0为false；所有非空字符串为true，空字符串为false；undefined为false；空数组为true；空对象为true；
4.to.fixed()方法会把number类型转为string类型
四、数组的常用方法
1.join() 将数组的元素用字符串连接在一起 返回数据的类型为string
2.reverse() 将数组元素颠倒排序
3.sort() 将数组的数据按从小到大排序，先排数字，再排字母。
4.concat() 在数组的末尾添加数据，再返回新的数组
5.slice(n,m) 返回一个新数组，从n到m-1
6.splice(n,m) 返回一个新数组，从n到m
7.push() 像数组的末尾添加一个数据，返回数组的长度
8.pop() 删除数组的最后一个数据，并返回删除的数据
9.unshift() 在数组的头部添加一个数据，返回数组的长度
10.shift() 删除数组的第一个元素，返回值是删除后的元素
11.toLocaleString() 把数组转换为字符串
12.valueOf() 返回数组对象的原始值
13.Es5新增数组方法，map((value,key,arr)=>{});filter((value,key,arr)=>{});forEach((item,index)=>{})
14.indexOf() 根据所查询的元素从前往后找并返回对应的索引，查询不到则返回-1
15.lastIndexOf() 根据所查询的元素从后向前兆并返回对应的索引，查询不到则返回-1
16.some() 用于检测数组中的元素是否满足指定条件（函数提供）
17.every() 用于对数组元素检测判断，正确返回true，错误返回false
五、字符串的常用方法
1.indexOf() 检测对应的元素，返回值是该元素的索引
2.lastIndexOf() 检测最后一次出现的相同元素，返回值是元素的索引
3.charAt() 打印出指定索引的元素，默认返回值是该字符串的第一个元素
4.substring(n,m) 用于截取数据，返回的数据是n,m-1
5.substr(n,m) 用于截取数据，返回数据是n到m
6.slice(n,m) 用于截取数据，返回的数据是n,m-1
7.split() 根据一个字符，将字符串切割成一个数组返回
8.replace('a','b') 接受两个参数，第一个是需要替换的字符串，第二个是替换的字符串 返回结果是改变的字符串
9.toUpperCase() 将所有小写英文字符串转为大写
10.toLocaleUpperCase() 将所有大写字符串转为小写
扩展：字符编码 1.字符转编码：str.charCodeAt('5') 2.编码返字符串：String.fromCharCode(100)
六、常用的事件
1.onclick:鼠标点击某个对象
2.ondbclick:鼠标双击某个对象
3.onclick:鼠标点击某个对象
4.onmousemove：鼠标被移动
5.onmouseout:鼠标从某个元素上移开
6.oncontextmenu:鼠标右键点击事件
7.onmouseover:鼠标被移到某个元素之上
8.onmouseup:某个鼠标按键被松开
9.onkeydown:某个键盘的键被按下
10.onkeypress:某个键盘的键被按下或按住
11.onkeyup:键盘的键被松开
12.onabort:图像加载被中断
13.onerror:当加载文档或者图像时发生某个错误
14.onload:某个页面或者图像被完成加载
15.onunload:用户退出页面
16.onblur:元素失去焦点
17.onfoucs：元素获得焦点
18.onchange:用户改变域的内容
19.onreset:重置按钮被点击
20.onsubmit：提交按钮被点击
21.onselect：文本被选中
22.onresize：窗口或者框架被调整尺寸
七、闭包
概念：闭包就是能够读取其它函数内部变量的函数。并且让局部变量变成自由变量的环境 本质上就是将函数内部与函数外部连接了一个桥梁。
用途：一是可以读到取函数内部的变量，二是让这些变量的值始终保存在内存上。
注意：
1.由于闭包会使函数内部的变量都保存在内存中，内存消耗很大，因此不要滥用闭包，否者会造成网页的性能问题，ie中可能会导致内纯泄露。
2.闭包会在父函数的外部改变父函数内部的变量值
解决：在退出函数之前，将不使用的局部变量全部删除。
例：实现f1()()()=100;
function f1(){
var a=100;
return function f2(){
return function f3(){
console.log(a);
}
}
}
八、值类型判断
undefined==null //true
undefined===null //false
0==false //true
1==true //true
1===true //false
2==true //false
[ ]==false //true
[ ]===false //false
[ ]==![ ] //true
[ ]===[ ] //false
0="" //true
NaN==NaN //false
"two"=="three" //false
"two">"three" //true
.3-.2==.4-.3 //false
{x:1}==={x:1} //false
-------------------------------------
alert(typeof null); //object
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
九、cookie、sessionStorage、localStorage
cookie:也叫做会话跟踪技术，通俗的说，就是每当客户端请求一次，服务器端就响应一次，并且客户端将接受到的结果保存在本地机上，一个保存了用户信息的文件，称谓Cookie 。
特点：1.只能使用文本文件
2.文件有大小限制4K～10K
3.数量限制，小于50条 、
4.读取有域名限制，不可跨域读取
5.时效限制
sessionStorage:是HTML5新增的一个会话存储对象，用于临时保存同一窗口的数据，在关闭窗口或标签页之后将会删除这些数据。
特点：1.同源策略限制：同域名，同端口，同协议
2.单标签页限制：sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。
3.只在本地存储：seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。
4.存储方式：seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型
5.存储数据大小：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
localStorage:本地存储，可用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
特点：1.同源策略限制：同域名，同端口，同协议
2.只在本地存储：localStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效。
3.存储方式：localStorage的存储方式采用key、value的方式。value的值必须为字符串类型
4.存储数据大小：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
5.同浏览器共享。localStorage的数据可以在同一个浏览器的不同标签页的同源页面之间共享。
十、call、apply、bind、with、eval
call和apply：都是用来改变this指向用的，call和apply是立即执行，第一个参数表示执行时候的作用域，第二个参数表示传递的参数。call和apply的参数形式也有数不同，call的第二个参数是接收多个参数，apply为数组。
bind：只是为了绑定，需要调用才可以执行，第一个参数表示执行时候的作用域，第二个参数表示传递的参数。
with:with语句用于设置代码在特定对象中的作用域。
eval:用法：eval("("+data+")")
十一、JS原型、原型链
原型： 每创建一个函数，函数上都有一个属性为 prototype，它的值是一个对象。 这个对象的作用在于当使用函数创建实例的时候，那么这些实例都会共享原型上的属性和方法。
原型链： 在 JavaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接（proto）。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向）。这种一级一级的链结构就称为原型链（prototype chain）。 当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止;到查找到达原型链的顶部（Object.prototype），仍然没有找到指定的属性，就会返回 undefined.
十二、Ajax
概念：异步(Asynchronous)的 JavaScript 和 XML。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。AJAX 是一种用于创建快速动态网页的技术。
ajax原理和XmlHttpRequest对象:Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
流程：
1.let xhr=window.XMLHttpRequest?(new XMLHttpRequest()):(new ActiveXObject("Microsoft.XMLHTTP"));
2.xhr.open(method,url,asyn);
3.xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
4.xhr.send(data);
5.xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
//返回数据xhr.responseText
}
}
HTTP 状态码
readyState
1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败
ajax.status
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
------------------------------------------------
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
---------------------------------------------------
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
----------------------------------------------------------
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
---------------------------------------------------------------------------------------------
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本
AJAX的优点：
1.无刷新更新数据。
2.异步与服务器通信。
3.前端与后端分离。
4.节省带宽。
AJAX的缺点：
1.不同版本的浏览器对 XMLHttpRequest 对象支持度不足(比如 IE5 之前)；
2.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）；
3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；
AJAX缓存问题：
1、在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);
2、在服务端加 header(“Cache-Control: no-cache, must-revalidate”);
3、在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“If-Modified-Since”,”0″);
4、在 Ajax 的 URL 参数后加上 "?fresh=" + Math.random(); //当然这里参数 fresh 可以任意取了
5、第五种方法和第四种类似，在 URL 参数后加上 "?timestamp=" + new Date().getTime();
6、jQuery提供一个防止ajax使用缓存的方法：cache: false
十三、get、post
GET：一般用于查询数据，使用URL传递参数，由于浏览器对地址栏长度有限制，所以对使用get方式所发送信息的数量有限制，同时浏览器会记录（历史记录，缓存）中会保留请求地址的信息，包括地址后面的数据。get 只能发送普通格式（URL 编码格式）的数据。
POST：一般用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，但是不会记录 post 提交的数据。post 可以发送纯文本、URL编码格式、二进制格式的字符串，形式多样。
在以下情况中，请使用 POST 请求：
1.以提交为目的的请求（类似语义化，get 表示请求，post 表示提交）；
2.发送私密类数据（用户名、密码）（因为浏览器缓存记录特性）
3.向服务器发送大量数据（数据大小限制区别）；
4.上传文件图片时（数据类型区别）；
十四、跨域
(1)为什么发生跨域
1.浏览器限制：当你的请求是跨域的时候，浏览器出于安全考虑，会进行一些校验，如果是跨域问题，浏览器就会报错；
2.跨域问题：只要是协议、域名、端口中有一个不同，都会被当成不同的域；
3.XHR(XMLHttpRequest)请求，如果不是这个请求，浏览器也不会报跨域请求。
(2)如何解决跨域
1.阻止浏览器做校验：方法百度~
2.jsonp方法
3.让服务器支持跨域
4.在前台隐藏跨域
(3)Jsonp
1.概念： 由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。
2.使用jsonp后台服务器要进行改动么？ 要改动
3.jsonp实现原理：使用jsonp在向后台发送数据的时候，发送了一个callback参数，而后台在发现有callback这个参数的时候，就知道是jsonp请求，就会把json的数据变成javascript，而callback的值就是作为函数名，返回的数据作为函数的参数。
4.区别：
(1)请求类型不同，不是xhr类型，是script,所以浏览器不会最校验。
(2)返回数据不一样，其他返回值是一个json数据，而jsonp返回值是一个javascript脚本。
5.jsonp的弊端
(1).服务器需要代码改动；
(2).只支持get方法，因为是通过script标签发出请求；
(3).发送的不是XHR请求；
(4)服务器支持跨域
后端配置：
//配置cors中间件
app.use(cors({
"origin": ["http://localhost:3000", "http://localhost:3001".......], //允许所有前端域名
"credentials": true, //允许携带凭证
"methods": "GET,HEAD,PUT,PATCH,POST,DELETE", //被允许的提交方式
"allowedHeaders": ['Content-Type', 'Authorization'] //被允许的post方式的请求头
}));
//路由响应时
res.setHeader('Access-Control-Allow-Origin',req.headers.origin);//当前服务允许跨域
前端配置:
{credentials:'include'}
跨域代码实例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp跨域请求</title>
</head>
<body>
</body>
<script type="text/javascript" src="http://127.0.0.1/project/jsonp/jsonp.js"></script>
/*凡是拥有src这个属性的标签都拥有跨域的能力，如img，iframe，script。那我们就可以把数据装载到JS文件内，供客户端调用和进一步处理。*/
</html>
----------------------------------------------------------------------------------------------------------------------
/*回调函数（全局，否则无法找到）接收并处理跨域请求的返回的数据*/
function callback(data) {
var data="跨域请求的数据结果："+data
console.log(data)
document.body.innerHTML=data;
}
window.onload=function () {
var oScript=document.createElement('script');
/*创建script标签*/
oScript.src="http://127.0.0.1/project/jsonp/jsonp.php?callback=callback";
/*设置script标签src属性值为跨域请求的文件并指定接收返回结果的回调函数*/
document.body.appendChild(oScript);
/*创建的标签加载到body页面*/
document.body.removeChild(oScript)
/*跨域请求完成标签废弃，进行移除*/
}
---------------------------------------------------------------------------------------------------------------------
<?php
$arr = array(
'测试数据1！',
'测试数据2！',
'测试数据3！'
);
$arr = json_encode($arr);
//数组格式转换为字符串
$callback = $_GET['callback'];
//获取回调函数的名称
echo $callback.'('.$arr.')';
//返回回调函数并传参
?>
十五、promise
一、什么是promise
1.promise对象用于异步计算
2. 是一个构造函数,它实际上是对回调函数的一种封装 对异步编程的一种改进。
3.可以将异步操作队列化，按照期望的预期执行，返回符合预期的结果。
4.可以在对象之间传递promis，帮助我们处理队列。
二、promise的特点
1.Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
2.一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
Promise的优点：
Promise对象可以将异步操作以同步操作的流程表达出来，避免层层嵌套的回调函数。Promise对象提供统一的接口，使得控制异步操作更加容易。
Promise的缺点：
1.无法取消Promise，一旦新建它就会立即执行，无法中途取消。
2.如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
3.当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
三、Promise函数的参数使用
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
四、promise的then方法使用
1
. Promise的then方法
：指定Resolved状态和Reject状态的回调函数。
2.then方法可以接受两个回调函数作为参数。
3.第一个回调函数：Promise对象的状态变为Resolved时调用
4.第二个回调函数：Promise对象的状态变为Reject时调用。第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
5.并且then方法支持链式调用
五、catch方法的使用
catch方法
：catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。一般来说，不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），总是使用catch方法。如果没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何反应。
六、promise构造函数身上的方法
Promise.all()：Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。
var p = Promise.all([p1,p2,p3]);
promise.all方法接受一个数组作为参数，p1、p2、p3都是Promise对象的实例。
p的状态由p1、p2、p3决定，分成两种情况。
（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
Promise.race()：将多个Promise实例，包装成一个新的Promise实例。
var p = Promise.race([p1,p2,p3]);
上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数
十六、JS事件流模型
事件流描述的是从页面中接收事件的顺序。 DOM 结构是树形结构，当页面中的某一个元素触发了某个一个事件，事件会从最顶层的 window 对象开始，向下传播到目标元素，途径的祖先节点都会触发对应的事件，如果当前节点的该事件绑定了事件处理函数的话，则会执行该函数当事件达到目标元素并执行绑定函数（如果有绑定的话）后，事件又会向上传播到 window 元素，途径的祖先节点都会触发对应的事件（如果绑定事件处理函数的话）
事件流包含三个阶段：
事件捕捉阶段：事件开始由顶层对象触发，然后逐级向下传播，直到目标的元素；
处于目标阶段：处在绑定事件的元素上；
事件冒泡阶段：事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素
十七、浅拷贝与深拷贝
对于字符串类型，浅拷贝是对值得复制，对于对象来说，浅拷贝是对对象地址的复制，并没有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，如果修改其中一个值，则另一个也会改变，而深拷贝则是开辟新的栈，两个对象对应的地址也不一样，修改一个对象的属性，不会改变另一个对象的属性。
深拷贝：let data = JSON.parse(JSON.stringify(obj));//对于循环嵌套的对象