ES6

ES6基础知识

ECMAScript是JavaScript的标准，JS是ES的实现，主流实现只有JS，所以很多时候JS就等同于ECMA
正式名称：ES2015，是ECMA标准的第六版

变量

var:
    1、重复声明：
        var=12;
        var=5；
    
    2、控制修改：
        var GIT_HOST='github.com'
        if(GIT_HOST='git')

    3、块级作用域：
        ES5的var作用域——函数级
        ES6的let作用域——块级
            
    let:变量,防止重复定义
    const:常量,防止重复定义

小总结：
变量：
    var:可以重复声明，随意修改，函数级
    let:不能重复声明，变量, 块级
    const:不能重复声明,常量，块级

---

解构赋值

json={a:12,b:5};
let {a,b}=json;

arr=[1,2,3];
let [a,b,c]=arr;

错误案例
    1、两边结构必须一样
        let {a,b}=[1,2]
    2、右边必须是个东西
        let {a,b}={1,2}
    3、赋值与解构同时完成
        let {a,b};
        {a,b}={a:1,b:2}

---

箭头函数

function(){
    .....
}

()=>{}
固定this指向

简写：
    1、如果有且仅有一个参数，（）可不写
    2、如果有且仅有一个语句并且是return，{}也可以不写

修正this

---

…

参数展开
    收集
    	...c只能放在最后边，不能有其他参数
        function show(a,b,...c){
                console.log(a,b,c);
            }
        show(1,2,3,4,5);
    展开
        /*let arr=[1,2,3];
            function show(a,b,c){
                alert(a+b+c);
            }
            //show(arr);
            show(...arr);*/

        let arr1=[1,2,3];
        let arr2=[4,5,6];
        //alert(arr1+arr2);
        let arr=[...arr1,...arr2];
        alert(arr);
数组展开
	拼接数组 
		this.arr = [...this.arr, ...this.newarr]
json展开

---

Array扩展

map         映射，一一对应（n=>n）
    let arr1=[60,70,50,40];
    /*let arr2=arr1.map(function(item){
    if(item>=60){
        return "及格";
    }else{
        return "不及格";
    }
    })*/
    /*let arr2=arr1.map(function(item){
        return item>=60?"及格":"不及格";
    })*/
    let arr2=arr1.map(item=>item>=60?"及格":"不及格");
    console.log(arr1);
    console.log(arr2);

reduce      n=>1
        let arr=[12,56,87,95,64];
        /*let result=arr.reduce(function(tmp,item,index){
        //alert(index+":"+tmp+","+item);
            return tmp+item;
        })
        alert(result/arr.length)*/
        let result=arr.reduce(function(tmp,item,index){
            if(index==arr.length-1){
                return (tmp+item)/arr.length;
            }else{
                return tmp+item;
            }
        })
        alert(result)

filter     过滤（n=>?）
        let arr1=[12,35,64,57,67,84,90];
        /*let arr2=arr1.filter(function(item){
            if(item%2==0)
                return true;
            else
                return false;
        })*/
        /*let arr2=arr1.filter(function(item){
            return item%2==0;
        })*/
        let arr2=arr1.filter(item=>item%2==0);
        console.log(arr1);
        console.log(arr2);

forEach
    模板字符串     遍历
    let arr=[12,56,87,95,64];
    arr.forEach((item,index) => {
    alert(` 第${index}个：${item} `);
});

JSON

 JSON.stringify(json):  JSON->字符串
 JSON.parse(string):    字符串->JSON


let json={a:1,b:12,name:'tom'};
alert(JSON.stringify(json))

let str='{"a":1,"b":12,"name":"jerry"}'
console.log(JSON.parse(str))

bable编译

在线(不靠谱 ie7已经不可兼容)

​ 1、引入browser
​ 2、type=”text/babel”

本地（推荐）

​ 1、安装node
​ 2、安装babel

npm i @babel/core @babel/cli @babel/preset-env  //最多兼容ie7
npm i @babel/polyfill

​ 3、添加脚本scripts
​ “build”:”babel src -d dest”
​ 4、新建文件.babelrc 添加配置
​ {
​ “presets”:{
​ “@babel/preset-env”
​ }
​ }
​ 5、执行
​ npm run build

异步操作—ajax

• 异步操作：同时进行多个操作，用户体验，代码混乱，回调地狱
• 同步操作：一次只能进行一个操作，用户体验不好，代码清晰

异步同步相融合

​ Promise
​ 1、封装

Promise.all([

  	 $.ajax({ url: "1.txt", dataType: 'json' }),

  	 $.ajax({ url: "2.txt", dataType: 'json' }),

  	 $.ajax({ url: "3.txt", dataType: 'json' }),

  ]).then(([data1,data2,data3]) => {  //结构

 	  console.log(data3)

  }, err => {

 	  console.log("失败")

  })

3、promise.race //哪个执行快用哪个，返回单个数据并非数组

generator/yield(已废弃)

async/await
异步操作，同步写法-语法糖
    普通函数——一直执行，直到结束
    async函数——能够"暂停"

async function show(){
    let data = await $.ajax({})
}

ES6面向对象

​ 语言发展：
​ 机器语言->汇编语言->低级语言（面向过程）->高级语言（面向对象）->模块系统->框架->系统接口（API）

封装

• ES5面向对象（假的）

  • 没有统一的写法

    //以函数的形式写对象
    function Person(name,age){
        this.name=name;
        this.age=age;
    }
    //添加方法
    Person.prototype.showName=function(){
        alert(this.name);
    }
    Person.prototype.showAge=function(){
        alert(this.age);
    }
    //let p = new Person("Tom",20)
    //p.showAge();
    //p.showName();
    
    function Worker(name,age,job){
        Person.call(this,name,age);
        this.job=job;
    }
    Worker.prototype=new Person();
    Worker.prototype.constructor=Worker;
    Worker.prototype.showJob=function(){
        alert(this.job)
    }
    
    let w = new Worker("Tom",20,"程序员")
    w.showAge();
    w.showName();
    w.showJob();

• S6面向对象（假的）

  <script>
          //单独构造函数和类的声明
          class Person{
              constructor(name,age){
                  this.name=name;
                  this.age=age;
              }
              showName(){
                  alert(this.name);
              }
              showAge(){
                  alert(this.age);
              }
          }
          //let p = new Person("Tom",20)
          //p.showAge();
          //p.showName();
  
          class Worker extends Person{
              constructor(name,age,job){
                  super(name,age);
                  this.job=job;
              }
              showJob(){
                  alert(this.job)
              }
          }
          let w = new Worker("Tom",20,"程序员")
          w.showAge();
          w.showName();
          w.showJob();
      </script>

继承

1、省事
2、便于扩展

ES6新加

​ class 类声明
​ constructor 构造函数
​ extends 继承
​ super 父类/超类

模块系统

​ 1、定义

2、使用
    1、导出（export）
        //变量
        export let a=1;
        //函数
        export function show(){
            ......
        }
        //类
        export class Person{
            .......
        }
        //默认成员
        export default
    2、导入
        import * as model from xxx          引入所有成员
        import model from xxx               引入default成员
        import {a,b as name} from xxx
        //只引入，不使用
        import 'xxx'
        //异步引入
        let p=import(xxxx)
    3、webpack编译

ES7/ES8/ES9

ES7

1、幂操作

//alert(Math.pow(5,3));
alert(3**5) //3的五次方

2、Array.includes()

let arr=[1,2,3,4,5]
//alert(arr.indexOf(8)!=-1)
alert(arr.includes(5)

ES8

async/await

ES9

rest/spread