一、let const
var有缺陷:有块级作用域、能重复定义、无法限制修改。所以出来了let和const.
有块级作用域,不能重复定义
const不能修改,必须定义的时候赋值
二、解构赋值
1.左右两边结构必须一样
let [a,b]=[1,2]//对 let {c,d}=[1,2]//错
2.右边必须是个合法东西
let {a,b}={1,2}//错
3.声明和赋值不能分开
//错 let [a,b] [a,b]=[1,2]
三、字符串扩展
1.字符串模板
let name='lizhao'; console.log(`我的名字是${name}`)//我的名字是lizhao
2.startsWith、end With
四、数组扩展
1.map 映射 一个对一个
let arr=[40,56,78,90,98];
let arr2=arr.map(item=>item<60?'不合格':'合格');
console.log(arr2);//["不合格", "不合格", "合格", "合格", "合格"]
2.reduce 汇总 一堆出来一个,index从1开始,最初始:temp=arr[0],item=arr[1],index=1。
let arr=[1,2,3,4,5,9];
let result=arr.reduce((tmp,item,index)=>{
if(index==arr.length-1){
return (tmp+item)/arr.length
}else{
return tmp+item
}
});
console.log(result);//4
3.filter 过滤器 只保留值为true的
let arr=[40,56,78,90,98];
let arr2=arr.filter(item=>item<60);
console.log(arr2);//[40, 56]
4.forEach 遍历
let arr=[40,56,78,90,98];
arr.forEach((item,index)=>{
console.log('第'+index+'个元素值为'+item)
});
//第0个元素值为40
//第1个元素值为56
//第2个元素值为78
//第3个元素值为90
//第4个元素值为98
五、函数扩展
1.默认参数
let fn=(name='lizhao')=>{ console.log(`我的名字是${name}`)//我的名字是lizhao } fn();
2.箭头函数
参数只有一个,()可以省
函数只有一个语句且是return ,{}可以省
保持this作用域
3.展开运算符
作用1:展开数组
let fn=(name1,name2)=>{ console.log(name1,name2)//lizhao shoushou } let arr=['lizhao','shoushou'] fn(...arr);
作用2:收集剩余参数(...必须是最后一个参数)
//收集剩余参数 let fn=(name1,name2,...arr)=>{ //展开数组 console.log(name1,name2,...arr)//lizhao shoushou zhangsan lisi } fn('lizhao','shoushou','zhangsan','lisi');
六、对象扩展
1.Object.keys()、Object.values()、Object.entries()
let obj={name:'lizhao',age:'11'} console.log(Object.keys(obj))//["name", "age"] console.log(Object.values(obj))//["lizhao", "11"] console.log(Object.entries(obj))//[Array(2), Array(2)]
2.计算属性
let attr='name'; let obj={ [attr]:'lizhao' } console.log(obj)//{name: "lizhao"}
3.对象方法简写
key和value一样时,可以简写,方法可以简写
let obj={
name,
fn(){
...
}
}
七、类的语法糖
1.class关键字、构造器和类分开类
2.class里直接加方法
3.继承
//以前写类的方式不太好:User是构造器也是类;方法拆分到了外边 function User(name, age) { this.name = name; this.age = age; } User.prototype.showName = function () { console.log(this.name); } User.prototype.showAge = function () { console.log(this.age); } var u1 = new User('李赵', 18) u1.showName(); u1.showAge();
//ES6有了class关键字;使构造器和类分开类;方法不再写到类外边 class User { constructor(name, age) { this.name = name; this.age = age; } showName() { console.log(this.name) } showAge() { console.log(this.age) } }
//以前继承,特别麻烦 function User(name, age) { this.name = name; this.age = age; } User.prototype.showName = function () { console.log(this.name); } User.prototype.showAge = function () { console.log(this.age) } function VipUser(name, age, level) { User.call(this, name, age); this.level = level; } VipUser.prototype = new User(); VipUser.prototype.constructor = VipUser; VipUser.prototype.showLevel = function () { console.log(this.level) } var v1 = new VipUser('李赵vip', 18, '2') v1.showName(); v1.showLevel();
//继承可以用extends class VipUser extends User { constructor(name, age, level) { super(name, age); this.level = level; } showLevel() { console.log(this.level) } } var v1 = new VipUser('李赵vip', 18, '2') v1.showName(); v1.showLevel();
八、模块化
import ,import{},export,export default
//全部暴露,as后是别名 import * as mod from '/module' //结构赋值 import {val1,val1} as mod from '/module' //暴露默认接口 import val3 from '/module'
promise 解决异步
//1.创建Promise对象 let p=new Promise(function(resolve,reject){ $.ajax({ url:'data/1.txt', dataType:'json', success(res){ resolve(res) }, error(err){ reject(err) } }) }); //2.使用 //其实第一个参数就是resolve,第二个参数就是reject p.then((res)=>{ console.log('成功了'+res) },(err)=>{ console.log('失败了') })
let p1=new Promise(function(resolve,reject){ $.ajax({ url:'data/1.txt', dataType:'json', success(res){ resolve(res) }, error(err){ reject(err) } }) }); let p2=new Promise(function(resolve,reject){ $.ajax({ url:'data/2.txt', dataType:'json', success(res){ resolve(res) }, error(err){ reject(err) } }) }); let p3=new Promise(function(resolve,reject){ $.ajax({ url:'data/3.txt', dataType:'json', success(res){ resolve(res) }, error(err){ reject(err) } }) }); Promise.all([p1,p2,p3]).then(arr=>{ let [r1,r2,r3]=arr; console.log(r1); console.log(r2); console.log(r3); },err(err)=>{ console.log('错了') })
generator生成器
踹一脚走一下
function *show(){ alert('a') yield; alert('b') } let obj=show(); obj.next();//a
yield可以传参,也有返回值。
传参:
- 第一次next表示启动generator,不能传参,当希望给第一个next传参时候,可以通过给generator函数传参,从而让参数传进来;
- c的值并不是yield执行后的返回值,而是下次yield的的传参;
function *show(a,b){ console.log(a,b)//12,5 let c=yield; console.log(c)//888 } let obj=show(12,5); let res1=obj.next(); //参数写第二个next里 let res2=obj.next(888);
返回值
function *show(a,b){ alert('a') yield 12; alert('b') return 5 } let obj=show(); //第一阶段返回12 let res1=obj.next();//{value:12,down:false} let res1=obj.next();//{value:5,down:true}如果后边没有yield,down的值就是ture
一般使用递归函数执行生成器里所有的步骤
function next() { let { value, done } = gen.next();//启动 if (!done) //直到迭代完成 next() } next()
promise本质:等待异步操作结束
generator本质:无感的处理异步操作
async本质:官方runner
runner(function *(){ xxx let 结果1=yield 异步操作; xxx let 结果2=yield 异步操作; })
async (()=>{ alert('欢迎') let arr=await $.ajax({url:'data/1.txt',datatype:'json'}); alert('接受到第一个数据'); let arr=await $.ajax({url:'data/1.txt',datatype:'json'}); alert('接受到第二个数据'); })();