JavaScript

0x01-介绍:作用：在不重新加载整个页面时，对网页的局部进行刷新。这里的刷新，可以理解为：当前页面向服务端发起了一个请求，然后服务端将数据返回给当前页面，当页面接收到数据之后，通过DOM操作，将新的内容，把旧内容替换了。0x02操作：使用AJAX一共需要4个步骤！请务必记住这4个步骤！1：创建XMLHttpRequest对象。2：使用open()方法，建立联系。3：使用send()方法，将请求发出。4：接收服务端返回的数据。1、创建对象：需要用一个变量来接收实例化返回的对象，然后后续所有的内容，都是由接收的该变量来进行调用！varxhr=newXMLHttpRequest();2、建立联系：可以将这个步骤理解为：我要通过GET请求方式还是POST请求方式向这个url发起请求呢？由以上那段话得知，我们需要为open()方法传入一个请求方式的参数，还有一个目标url的参数。注意：在主域名前面，必须加上http:////xhr.open("请求方式","目标url");xhr.open("GET","http://localhost/api/get_comment");3、将请求发送出去：在open()写好了之后，我们则需要将请求发送出去，使用send()方法。xhr.send();4、获取服务端返回的数据[重要]：在接收数据时，需要使用onreadystatechange这个监听事件。我们可以试着将这个单词分开一下，然后理解一下它的意思。on：事件的意思，想一想JQuery中的$.on()方法。readystate：ready的意思是：准备，state的意思是：状态码，合并起来就是准备的状态码。change：变化、改变的意思。合并起来的意思就是：监听状态码的变化。它的后面，有一个匿名函数，每当状态码发生变化时，就会调用一次这个匿名函数。xhr.onreadystatechange=function(){}在xhr对象下，有一个readyState属性，这个属性就是准备的状态码，注意：onreadystatechange事件，监听的就是它的值，请不要混淆。readyState一共有5个状态码，分别为：01234。当准备的状态码为4时，才说明返回的数据已经是完整的了，那么我们则可以在匿名函数中，使用if语句来判断xhr对象下的readyState的值是否为4。xhr.onreadystatechange=function(){if(xhr.readyState==4){}}这个时候，如果readyState==4了，则可以获取数据了，但是如果返回的是一个404呢？那岂不是没有意义了，所以，我们可以在这里判断一下，HTTP的状态吗，如果是200，则说明是返回没有问题的，在这里，我们使用xhr对象下的status属性来判断。xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){}}我保证，这时候真的可以获取返回的数据了！我们使用xhr对象下的response属性，来获取返回的内容。xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){console.log(xhr.response);}}这时候，可以在控制台查看获取到的数据，然后您可以自定义进行DOM的操作了~0x03-返回的是JSON数据：现在返回的都是JSON格式的数据，返回到客户端之后，它成为了一个字符串形式的JSON，注意，他不是对象，无法通过对象.键名的形式来调用。那么，我们需要在前端进行处理一下，使用JSON.parse()方法，将字符串形式的JSON，转换成对象形式的JSON，这时，才是真正的完毕！varjson1="{"name":"甄雨锋"}";varjson2=JSON.parse(json1);此时，json2就变成了对象形式的JSON，可以通过对象.键名的方式调用了~

0x01async：在普通函数定义前面加上async关键字，普通函数就变成了异步函数。该异步函数默认的返回值是Promise对象。在该函数中return的内容等价于：returnPromise.resolve("内容");//或者reruennewPeomose(function(resolve){resolve("内容");})实例：asyncfunctiontest(){return"内容";//返回的是一个Promise对象}如何使用reject()提供错误信息：如果需要像reject()一样提供报错信息，那么需要使用throw抛出一个异常。注意：如果出现并抛出了异常，那么就无法在return内容。asyncfunctiontest(){throw"我是错误信息";}0x02await：await它只能出现在异步函数中，它可以暂停自己这个异步函数的执行，等待promise对象返回结果后再向下执行。通常返回promise对象后，需要使用.then方法来接收异步函数传过来的值。在该函数前面加上await关键字，返回的值就是resolve中的值，别忘了使用变量接收~如果需要捕获错误信息，需要使用.catch方法来捕获。//变为异步函数asyncfunctionas(){throw"错误信息";//抛出异常return"返回的内容";//返回成功信息}//因为await需要出现在异步函数中，所以定义asyncasyncfunctionrun(){//接收promise返回的结果，catch用来捕获错误consta=awaitas().catch(function(err){console.log("错误信息为：",err);//错误信息为：错误信息});console.log(a);//返回的内容}run()实战案例-检查数据库是否存在相同的昵称和账号，并返回客户端，错误代码：//注册请求：进入后获取表单提交的数据，并判断数据库是否有此昵称和账号admin.post("/register",function(req,res){//查询数据库是否有此昵称User.findOne({username:req.body.username}).then(function(ret){/*如果ret不等于null，说明就是该昵称已经存在了，将这个消息就要告诉客户端*/if(ret!=null){/*在这里其实就出问题了,这里的return我们期望它起一个终结的作用，但是，它最终返回给了这个回调函数，并不起终结作用。首先要知道，res.send()只能在同一个路由里返回一次。那么如果昵称和账号都存在了，这就是返回了两次，这显然就报错了。*/returnres.send({code:1,message:"该昵称已经存在!"});}})})实战案例-检查数据库是否存在相同的昵称和账号，并返回客户端，正确代码：//由于里面需要使用await，所以在这个回调函数外写一个asyncadmin.post("/register",asyncfunction(req,res){//使用await等待返回的结果，然后将结果赋值给username这个变量。constusername=awaitUser.findOne({username:req.body.username});//接下来判断这个变量是否是nullif(username!=null){//这样才是真正的终结了returnres.send({code:1,message:"该昵称已经存在!"});}//然后在判断账号是否存在,如果昵称存在了，就不会执行这里了，更不会res.send两次})

当状态为rejected时，会执行catch方法。当执行体中出现错误时也会执行catch方法。constp=newPromise(function(resolve,reject){reject();});p.catch(function(){console.log("出错了！");});constp=newPromise(function(resolve,reject){console.log(a);//没有a这个变量，出错也会执行catch方法});p.catch(function(){console.log("出错了！");});这样就可以不用在then中写两个回调函数了，可以用将then用作于成功状态的回调函数，将catch用作于失败状态的回调函数，由于他们返回的是Promise对象，所以可以链式调用。

then方法是Promise原型对象中的方法，可以通过Promise实例对象调用。参数：then方法一共有两个参数，这两个参数都是函数，其实就是resolve()和reject()的回调函数。当Promise状态为fulfilled时，执行第一个函数(resolve)。当Promise状态为rejected时，执行第二个函数。(reject)返回值：then的返回值是一个Promise对象。获取数据：首先要从resolve()或者reject()中写好实参，然后该对象的then方法中对应的回调函数会接收形参。constp=newPromise(function(resolve,reject){resolve(data);//例如这里是文件中的数据reject(err);//这里就是读取文件失败的错误信息});p.then(function(value){console.log(value);//这里就是传过来的data数据},function(err){console.log(err);//这里就是传过来的err错误信息});注意：如果Promise对象的状态是pending（也就是没有调用resolve和reject），那么它实例的then方法是不会执行的。返回实例的状态改变：then方法返回的是一个Promise对象，它默认是一个pending状态，也就是说不会执行。可以通过return关键字可以将状态改为fulfilled。constp=newPromise(function(resolve,reject){resolve("成功调用");//改变该对象的状态，否则不会执行then方法//reject("失败调用");});constt=p.then(function(data){console.log(data);//输出resolve的实参//t现在的状态是pending状态，那么t的then方法是不会执行的returndata;//通过return改变t的状态，而这里return的值会被t实例中的then接收。},function(err){console.log(err);returnerr;//当p实例失败时，调用reject，才会执行这里，否则不会执行这里。});t.then(function(data){console.log("成功",data);},function(err){console.log("失败",err);});如果代码出错时，会将then方法返回的实例的状态修改为rejected。链式调用：当前then函数return的结果，可以被下一个then中的第一个function参数接收到。如果return的是一个变量，接收到的就是变量值。如果return的是一个Promise对象，那么后面then中的回调函数就是return传递过来Promise对象中的resolve函数。

为了解决回调地狱这个问题，在ES6中增加了一个API：Promise。0x01简介：Promise是一个构造函数，通过new关键字实例化对象。参数：Promise需要接收函数作为参数。该函数中又有两个参数：resolve和reject，这两个参数都是回调函数。resolve：成功函数reject：失败函数实例：varp=newPromose(function(resolve,reject){//代码体});console.log(p);//实例的两个属性//[[PromiseState]]:"pending"---状态//[[PromiseResult]]:undefined---结果实例的属性：Promise实例有两个属性。state：状态第一种状态：pending（准备、待解决、进行中）。第二种状态：fulfilled（已完成、成功）。第三种状态：rejected（已拒绝、失败）。result：结果。Promise状态的改变：通过调用resolve()和reject()可以改变当前Promise对象的状态。Promise状态改变是一次性的，如果先调用了resolve()，后面又调用了reject()，那么它的状态还是fufilled。调用resolve-使状态变成fufilled：constp=newPromise(function(resolve,reject){resolve();});调用reject-使状态变成rejected：constp=newPromise(function(resolve,reject){reject();});Promise的结果：可以在resovle()和reject()中添加参数，该参数会修改当前Promise对象的结果，并且该参数会传递给then方法中相应的回调函数作为形参。constp=newPromise(function(resolve,reject){resolve("成功的结果！");//reject("失败的结果！");});

find()和findIndex()：简介：这两个方法是ES6中新出的语法，是针对数组查找的。find()：该方法是遍历数组元素的，通过条件判断，返回条件成立的遍历项。如果遍历完所有元素，都不符合条件，就返回undefined。vararr=[1,2,3,4];varret=arr.find(function(value){returnvalue===4;});console.log(ret);//4findIndex()：该方法和find方法差不多，如果该正在遍历的该元素，符合条件，则返回这个元素的索引值。vararr=[1,2,3,4];varret=arr.findIndex(function(value){returnvalue===1;});console.log(ret);//0