es6(1)
1.var let const var---变量,重复定义不报错,没有块级作用域,不能限制修改 if(12>5){ var a=12; } alert(a); //弹出12 let---变量,重复定义报错,有块级作用域,可以限制修改 if(12>5){ let a=12; } alert(a); //报错,let有块级作用域的概念,只在if代码段内有效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload=function(){ var aBtn=document.getElementsByTagName('input'); for(let i=0;i<aBtn.length;i++){ aBtn[i].onclick=function(){ alert(i); } } } </script> </head> <body> <input type="button" name="" value="a"> <input type="button" name="" value="b"> <input type="button" name="" value="c"> </body> </html> 三个按钮分别输出0,1,2 const---常量,重复定义报错,有块级作用域,可以限制修改 const a=12; a=5; alert(a); //报错,const是常量,不能修改 2.箭头函数 只有一个参数,()可以省 只有一个语句,还是return,{}可以省 一、把function去掉,加上=> function (a,b,c){ //代码 } (a,b,c)=>{ //代码 } 二、示例 function show(fn){ fn(12,5); } show((a,b)=>{ alert(a*b); }) 三、只有一个参数,()可以省 let show=a=>{ alert(a) } show(5); 四、只有一个语句,还是return,{}可以省 let sum=(a,b)=>a+b; alert(sum(1,2)); 五、实现排序 let arr=[2,5,4,1,9,6]; arr.sort((a,b)=>a-b); alert(arr); 3.参数扩展(...arg) function show(a,b,...arg){ alert(arg); } show(1,2,3,4,5,6); ///3,4,5,6 注意:...arg只能放在参数的最后一个 function show(a,b,...arg,c){ alert(arg); } show(1,2,3,4,5,6); //报错,...arg没有放在参数的最后一个 4.展开数组 一、采用...arg,数组展开为1,2,3 let arr=[1,2,3]; function sum(a,b,c){ alert(a+b+c); } sum(...arr); //6 二、展开数组,并连接数组 let arr1=[1,2,3]; let arr2=[4,5,6]; let arr=[...arr1,...arr2]; alert(arr); //1,2,3,4,5,6 5.数组map方法(映射) let arr=[1,2,3,4]; let result=arr.map(item=>item*2); alert(result); //2,4,6,8 6.数组filter方法(过滤) let arr=[1,2,3,4,5,6,7,8]; let result=arr.filter(item=>item%2); alert(result); //1,3,5,7 7.数组forEach方法(遍历) let arr=[1,2,3,4,5,6,7,8]; let result=arr.forEach((item,index)=>{ alert(`第${index+1}是${item}`) }) 8.数组reduce方法(汇总) //求平均数 let arr=[1,2,3,4,5,6]; let result=arr.reduce((tamp,item,index)=>{ if(index<arr.length-1){ return tamp+item; }else{ return (tamp+item)/arr.length; } }) alert(result); 9.字符串模板(``) //可以换行 let str=`ab c`; alert(str); 10.面向对象(class、super、extends) class User{ constructor(name,pass){ this.name=name; this.pass=pass; } login(){ alert('登录成功') } } class VIPUser extends User{ constructor(name,pass,level){ super(name,pass); this.level=level; } download(){ alert('下载成功') } } let p=new VIPUser('blue',123,8); p.login(); p.download(); alert(p.name); alert(p.pass); alert(p.level); 11.解构赋值 //数组,一一对应 let [a,b,c]=[1,2,3]; alert(a); alert(b); alert(c); //对象,一一对应 let {a,b,c}={'a':'1','b':'2','c':'3'}; alert(a); alert(b); alert(c); 12.promise 一、 let p=new Promise(function(resolve,reject){ $.ajax({ url:'data/1.txt', dataType:'json', success(arr){ resolve(arr) }, error(err){ reject(err) } }) }) p.then(arr=>{ alert('成功了'+arr) },err=>{ alert('失败了') }) 二、 let p1=new Promise(function(resolve,reject){ $.ajax({ url:'data/1.txt', dataType:"json", success(arr){ resolve(arr) }, error(err){ reject(err) } }) }); let p2=new Promise(function(resolve,reject){ $.ajax({ url:'data/2.txt', dataType:'json', success(arr){ resolve(arr) }, erros(err){ reject(err) } }) }); let p3=new Promise(function(resolve,reject){ $.ajax({ url:'data/3.txt', dataType:'json', success(arr){ resolve(arr) }, error(err){ reject(err) } }) }); Promise.all([p1,p2,p3]).then(function(arr){ let [r1,r2,r3]=arr; alert(r1); alert(r2); alert(r3); },function(){ alert('失败了') })
1.var let const var---变量,重复定义不报错,没有块级作用域,不能限制修改 if(12>5){ var a=12; } alert(a); //弹出12
let---变量,重复定义报错,有块级作用域,可以限制修改
if(12>5){ let a=12; } alert(a); //报错,let有块级作用域的概念,只在if代码段内有效
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload=function(){ var aBtn=document.getElementsByTagName('input');
for(let i=0;i<aBtn.length;i++){ aBtn[i].onclick=function(){ alert(i); } } } </script> </head> <body> <input type="button" name="" value="a"> <input type="button" name="" value="b"> <input type="button" name="" value="c"> </body> </html> 三个按钮分别输出0,1,2
const---常量,重复定义报错,有块级作用域,可以限制修改
const a=12; a=5; alert(a); //报错,const是常量,不能修改 2.箭头函数 只有一个参数,()可以省 只有一个语句,还是return,{}可以省
一、把function去掉,加上=> function (a,b,c){ //代码 }
(a,b,c)=>{ //代码 } 二、示例 function show(fn){ fn(12,5); }
show((a,b)=>{ alert(a*b); }) 三、只有一个参数,()可以省 let show=a=>{ alert(a) } show(5); 四、只有一个语句,还是return,{}可以省 let sum=(a,b)=>a+b; alert(sum(1,2)); 五、实现排序 let arr=[2,5,4,1,9,6]; arr.sort((a,b)=>a-b); alert(arr); 3.参数扩展(...arg) function show(a,b,...arg){ alert(arg); }
show(1,2,3,4,5,6); ///3,4,5,6
注意:...arg只能放在参数的最后一个 function show(a,b,...arg,c){ alert(arg); }
show(1,2,3,4,5,6); //报错,...arg没有放在参数的最后一个 4.展开数组 一、采用...arg,数组展开为1,2,3 let arr=[1,2,3]; function sum(a,b,c){ alert(a+b+c); }
sum(...arr); //6 二、展开数组,并连接数组 let arr1=[1,2,3]; let arr2=[4,5,6];
let arr=[...arr1,...arr2]; alert(arr); //1,2,3,4,5,6 5.数组map方法(映射) let arr=[1,2,3,4]; let result=arr.map(item=>item*2); alert(result); //2,4,6,8 6.数组filter方法(过滤) let arr=[1,2,3,4,5,6,7,8]; let result=arr.filter(item=>item%2); alert(result); //1,3,5,7 7.数组forEach方法(遍历) let arr=[1,2,3,4,5,6,7,8]; let result=arr.forEach((item,index)=>{ alert(`第${index+1}是${item}`) }) 8.数组reduce方法(汇总) //求平均数 let arr=[1,2,3,4,5,6]; let result=arr.reduce((tamp,item,index)=>{ if(index<arr.length-1){ return tamp+item; }else{ return (tamp+item)/arr.length; } }) alert(result); 9.字符串模板(``) //可以换行 let str=`ab c`; alert(str); 10.面向对象(class、super、extends) class User{ constructor(name,pass){ this.name=name; this.pass=pass; }
login(){ alert('登录成功') } }
class VIPUser extends User{ constructor(name,pass,level){ super(name,pass); this.level=level; }
download(){ alert('下载成功') } }
let p=new VIPUser('blue',123,8); p.login(); p.download(); alert(p.name); alert(p.pass); alert(p.level); 11.解构赋值 //数组,一一对应 let [a,b,c]=[1,2,3]; alert(a); alert(b); alert(c); //对象,一一对应 let {a,b,c}={'a':'1','b':'2','c':'3'}; alert(a); alert(b); alert(c); 12.promise 一、 let p=new Promise(function(resolve,reject){ $.ajax({ url:'data/1.txt', dataType:'json', success(arr){ resolve(arr) }, error(err){ reject(err) } }) })
p.then(arr=>{ alert('成功了'+arr) },err=>{ alert('失败了') }) 二、 let p1=new Promise(function(resolve,reject){ $.ajax({ url:'data/1.txt', dataType:"json", success(arr){ resolve(arr) }, error(err){ reject(err) } }) });
let p2=new Promise(function(resolve,reject){ $.ajax({ url:'data/2.txt', dataType:'json', success(arr){ resolve(arr) }, erros(err){ reject(err) } }) });
let p3=new Promise(function(resolve,reject){ $.ajax({ url:'data/3.txt', dataType:'json', success(arr){ resolve(arr) }, error(err){ reject(err) } }) });
Promise.all([p1,p2,p3]).then(function(arr){ let [r1,r2,r3]=arr; alert(r1); alert(r2); alert(r3); },function(){ alert('失败了') })