ES6新特性总结

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