js去掉前后空格trim（去掉所有空格的用法）
1.Promise 用于解决异步编程
/* * 比如说 ajax 就是一个异步操作 , 之前的使用的回调函数的方式解决异步编程 * * $.ajax({ * url:&’abc.com&’, * success:function(res){ * * } * }) * * 场景: * 1.先获取当前token是否已经失效 * 2.如果没有失效,返回当前的token的用户的基本信息(基本信息包含 uid ) * 3.根据uid 来查询当前用户的会员等级 * 4.再通过当前用户的会员等级,来查询当前用户的特权(来检测用户是否有权限来执行某个操作) * * 案例: * 已知a.txt 地址 ,然后需要根据a.txt 返回的结果进行下一次的查询 ,逐一查询到最后的结果d.txt内容 * */
//使用jQuery 实现 = &> 造成一个 &“回调地狱&”
$.ajax({ url:"data/a.txt", success:function(res){ console.log('第一次:',res); //再发出下一次请求 $.ajax({ url:res, success:function(res){ console.log('第二次',res); $.ajax({ url:res, success:function (res) { console.log('第三次:',res); $.ajax({ url:res, success:function (res) { console.log("第四次:",res); } }) } }) } }) } })2. Promise 用于解决异步编程的一种解决方案, 也可以理解是一个执行异步操作的容器,在容器中封装好了一套处理异步的流程机制
* 1.有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
* 2.一旦状态改变，就不会再变，任何时候都可以得到这个结果。从pending &– &> fulfilled (成功) 或者 pending -&> 和rejected (失败) , 每次只能改变一次状态
* * 常用方法
* all()
* race()
var promise = new Promise(function(resolve,reject){//创建一个promise容器 , resolve 一个用于在处理异步成功时调用的函数 , reject 处理异步失败的时候调用的函数 setTimeout(function(){ //通过延时定时器模拟异步 , 2000ms 结束后就可以调用成功或者失败 console.log(&‘时间到了!!!&’); resolve(123456); reject(12) },2000); }); //当实例化Promise之后(已经执行异步操作) , (结果怎么样)然后呢? then() 编写需要执行的回调业务 promise.then(function(res){ console.log(&“执行成功!&”,res); },function(err){ console.log(&“执行失败!&”,err); });
3.使用promise 异步编程封装一个ajax模块
//使用promise 异步编程封装一个ajax模块 function Ajax(url){ //创建一个Promise实例 return new Promise(function(resolve,reject){ var xhr = new XMLHttpRequest(); //绑定请求过程状态改变事件 xhr.onreadystatechange = function () { if(xhr.readyState==4){ if((xhr.status &>= 200 &&&& xhr.status&<=304)){ resolve(xhr.responseText); }else{ reject(xhr.statusText); } } } //发起请求 xhr.open("get",url); xhr.send(null); }); } //使用 // all() 可以同时拥有几个异步操作, 如果有一个失败 ,则触发失败 // Promise.all(&[Ajax('data/a.txt'),Ajax('data/b.txt'),Ajax('data/c3.txt')]).then(function (res) { // console.log("成功:",res); // }).catch(function (err) { // console.log("失败:",err); // }) //race() 竞速 Promise.race(&[Ajax('data/a.txt'),Ajax('data/b.txt'),Ajax('data/c3.txt')]).then(function (res) { console.log("成功:",res); }).catch(function (err) { console.log("失败:",err); })4.使用promise 异步编程封装一个ajax模块
function Ajax(url){ //创建一个Promise实例 return new Promise(function(resolve,reject){ var xhr = new XMLHttpRequest(); //绑定请求过程状态改变事件 xhr.onreadystatechange = function () { if(xhr.readyState==4){ if((xhr.status &>= 200 &&&& xhr.status&<=304)){ resolve(xhr.responseText); }else{ reject(xhr.statusText); } } } //发起请求 xhr.open("get",url); xhr.send(null); }); } //使用 Ajax("data/a.txt") .then(function (res) { console.log("第一次成功:",res); //调用下一次 return Ajax(res); }).then(function (res) { console.log("第二次成功:",res); return Ajax(res); }) .then(function (res) { console.log("第三次成功:",res); //调用下一次 return Ajax(res); }).then(function (res) { console.log("第四次成功:",res); }).catch(function () { console.log("最后请求失败!!!"); }) // promise().then(()=&>{},()=&>{}) // promise().then(()=&>{}).catch(()=&>{})5.语法糖 (提供一种代码更加简洁,方便的做法,与之之前的实现过程相比,感觉像是吃了糖一样美滋滋)
// var a = 10;
// var b = 20;
// var c = 30;
// var d = 40;
//ES6实现 &– 数组形式解构赋值
let &[a, b, c, d, e, f] = &[10, 20, 30, 40, 50]; //对象形式解构赋值 , 定义abc , hhh 变量 , 将等号右边的foo的值赋值给abc , 等号右边的bar的值赋值给hhh let { foo: abc, bar: hhh } = { foo: "啊啊啊啊啊", bar: "呵呵呵呵呵" } //es6的对象中有一个简写方式 var name = "张三"; var obj = { name, // 等于 name:name ,在对象中如果属性名与属性值的变量名一样 ,就可以简写 run() { console.log('奔跑方法'); } } let { foo, bar } = { foo: "啊啊啊啊啊", bar: "呵呵呵呵呵" }; /* 使用场景 : restFul API 规范的接口 { code:200, msg:"加载用户余额数据成功!", data:&[ { id:123123, money:1000 }, { id:123123, money:1000 } ] } */ var obj = { data: { res: { code: 200, msg: "加载用户余额数据成功!", data: &[ { id: 123123, money: 1000 }, { id: 123123, money: 1000 } ] } } } //使用ES6 解构赋值快速搞定 let { code , data , msg} = obj.data.res; //需要根据返回的状态码 ,做出对应的提示内容(弹窗) ,将数据列表输出在控制台 // if (obj.data.res.code == 200) { // alert(obj.data.res.msg); // console.log(obj.data.res.data); // } if (code == 200) { alert(msg); console.log(data); } 6.字符串:
* 1.新增一些常用方法:
* includes() 用于检测字符串中是否包含指定字符. , 返回布尔值
* startsWith() 用于检测字符的开头是否包含指定字符 , 返回布尔值
* endsWith() 用于检测字符串的结尾是否包含指定字符 ,返回布尔值
* padStart(length,str) 对字符串进行length长度的前补位 ,不足使用str去补
padEnd(length,str) 对字符串进行length长度的后补位 ,不足使用str去补
repeat(times) 对字符串进行times 次重复
trimStart() 去除字符串开头位置的空格
trimEnd() 去除字符串结束位置的空格
trim() 去除字符串前后的空格 * * * 2.模板字符串 * * */
var s = '10000'; console.log(s.padStart(8,0)); var studentName = '张三'; var bookName = "&<&<且听风吟&>&>"; // document.write('&<h3&>'+studentName+"正在读一本书,书名为"+bookName+'&</h3&>'); //使用ES6的模板字符串 document.write(`&<h3&>${studentName}正在读一本书,书名为${bookName}&</h3&>`);7.数据结构?? : 数据结构是计算机存储、组织数据的方式。数据结构是指相互之间存在一种或多种特定关系的数据元素的集合
//数据类型:存储的数据类型(boolean , string , undefined , null , number ,object , smybol) //Set() 集合
var set = new Set(&[1,2,3,4,5,5,3]); console.log(set); //1.不能直接使用下标访问 ,一般通过一些遍历方式得到值 //2.唯一性 : 在集合的内部 ,一个相同的值 只允许出现一次 (可以用来实现数组的去重) var arr = &[10,20,30,40,50,50,40,30,20,10]; var arr2 = new Set(arr); console.log(arr2); arr = Array.from(arr2); //将一些集合类型数据转换成数组 //Map() 映射 , 为了解决传统对象的键值对关系中, 键名只能以字符串数据类型的问题 var obj = { 20:'这是一个数字', true:"这是一个true" // &[0,1,2]:'sssaadasad' }8.proxy (代理) :在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写
var man = { age: 8, state: '儿童', sex: '女', name: "张三" } // man.age = -2500; //这样设置无法对数据可靠性,安全性做出处理 ,很容易造成数据的混乱 //拦截处理 : get(在获取属性时会自动触发) / set (在设置属性时会自动触发) , 在这种拦截机制中做出需要拦截的操作 var hanlder = { set: function (target, key, value) { console.log('正在准备设置对象的属性...',target, key, value); if(key == "age"){ if(value&>=0 &&&& value&<=120){ target.age = value; if(value&>=0 &&&& value&<=12){ //实现在每次修改年龄的时候 ,根据修改年龄的数值决定对象属性state的状态 ,此处就与age属性实现了数据的绑定,而不需要在每次设置age属性的时候,都要去写一遍判断逻辑和操作state target.state="儿童" }else if(value&>=13 &&&& value &<18){ target.state = "少年"; }else if(value&>=19 &&&& value &<30){ target.state = "青年"; }else{ target.state = "老年人"; } }else{ throw new Error('年龄输入不合法!!'); } } }, get: function (target, key) { // console.log('此处应该是获取代理目标对象属性的拦截操作...',target,key); switch (key) { case "age": if (target.sex == '女') { return '女孩子的年龄一般不能问的!!'; } else { return target.age; } break; default: return target&[key]; } // return '数据保密!'; } } //实例化一个proxy , 其实就是对外提供的一个操作代理对象(操作时修改的就是prxoy对象,但是它会将数据再修改到目标对象上) var proxy = new Proxy(man, hanlder); console.log('年龄为:', proxy.age); //此时会触发proxy中的get ,因为在获取age属性 proxy.age = 30;9.async 函数 ,异步函数 : 目的就将异步操作变成同步操作的方式编写
/** 使用关键字 async 声明一个异步函数 , 在调用异步函数的之前使用await关键配合使用,来声明当前执行的异步需要等待 ,等await关键字中的函数执行完之后 ,才会执行后边的代码 */
async function timeout(time) { return new Promise((resolve, reject) =&> { setTimeout(() =&> { //模拟一个异步操作,比如说是一次ajax交互 resolve(123); }, time) }) } async function hello(title, time) { let s = null; await timeout(time).then((res) =&> { // console.log(res); s = res; }); console.log(title + s); } hello("教育改变生活!!!!", 5000);