ES6-学习笔记

一、let const

　　有块级作用域，不能重复定义

　　const不能修改，必须定义的时候赋值

二、解构赋值

　　1.左右两边结构必须一样

　　let {a,b}={1,2}

　　2.右边必须是个合法东西

　　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 汇总 一堆出来一个

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.继承

class User{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    showName(){
        console.log(this.name)
    }
    showAge(){
        console.log(this.age)
    }
}

class VipUser extends User{
    constructor(name,age,level){
        super(name,age)
        this.level=level;
    }
    showLevel(){
        console.log(this.level)
    }
}
v1=new VipUser('LIZHAO','22',2);
v1.showAge();//22

 八、模块化

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可以传参，也有返回值

 

传参：

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}

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('接受到第二个数据');
    })();