ES6

ES6：

ECMAscript6 是一种标准、JavaScript 使用这个标准

ES6 新语法

1.变量

传统js使用var 定义变量，缺点是
1.可以重复定义.
2.不能限制修改.
3.作用域只有函数作用域,没有块级作用域.
es6中新增的变量let、const 优点是 
1、不可以重复定义.
2、let为变量可以重新赋值，const为常量不可以重新赋值 （const a = 12; a=13就会报错）.
3、允许属于块级作用域.

解构赋值 （解构赋值对应的python里的序列解包）

1.左右一样类型即可完成赋值.
2.右侧必须符合语法.
3.不可以先定义后赋值.

解构赋值方式一：

    let[a,b,c] = [12,2,8];
    let{a,b,c} = {a:12,b:2,c:8}
    console.log(a,b,c)

解构赋值方式二：对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

    let[a,{f1,f2,f3},c] = [12,{f1:2,f2:3,f3:5},5]
    console.log(a,f1,f2,f3,c)

2.函数

箭头函数

   //ES5的写法：
   function  fnName（参，参）{函数体}
   //ES5调用 fnName(参，参)

   //ES6的写法：
   let fnName = (参，参）=>{函数体}
   //ES6调用 fnName(参，参)
   //箭头函数通常需要父级this时，或者不需要this的时候用

简写箭头函数 arr.sort((参，参)=>{return a1-a2})

1. 如果有，且仅有一个参数，（）可以省
2. 如果函数体只有一句话，而且是return，{}跟return可以省
   let fnName =(a)=>{return a+3}可以简写 fnName(a=>a+3)

默认参数

   //ES5默认参数的写法：
   function show(a,b,c){
       b=b||5;//设置b的默认参数为5
   }
   //ES6默认参数的写法: 
   function show(a,b=5,c=12){
   }

参数展开||剩余参数

    function show(a,b,...args){
        console.log(a,b,args)
    }
    //剩余参数必须在参数列表最后
    //...的用途 1、↑接收剩余参数。2、↓在当前展开一个数组（希望展开时，必须是一个数组）
    let arr = [1,2,3]
    let arr1 = [3,4,...arr,5]
    console.log(arr1)//3,4,1,2,3,5

3.数组/json

    //ES6 添加数组5中方法、JSON两种变化
    //数组：
    //map（映射，返回对应的数组）
    let arr = [18,25,90,96,27]
    let att2 = arr.map(function (item){//item为数组当中的元素
        if(item>60){return true}else{return false}
    })
    //简写 ：
    let att2 =arr.map(item=>item>=60)
    ///reduce（汇总，返回单个值，在函数体中进行操作后返回最终元素。下标从1开始。tmp 为临时结果，第一次为第一个下标，而item就从第二个下标开始）
    let arr = [18,25,90,96,27]
    let sum = arr.reduce((tmp,item,index)=>{
        console.log(tem,item,index) //
        if(index<arr.length){
            return tem+item;//求和
        }else{
            return tem+item/arr.length;//求平均数
        }
    })
    //filter（过滤，返回符合条件的数组，经过函数体的过滤之后，返回符合条件的元素组成一个新数组）
    let arr = [18,25,90,96,27]
    let att2 = arr.filter(item=>item%2) //返回奇数，留下偶数
    //foreach（遍历，在函数体中对每个元素进行遍历操作，无返回值）
    let arr = [18,25,90,96,27]
    let sum = 0;
    arr.forEach()
    //from(处理) 用法是把JS对象的集合转变成真正的数组，以便可以使用数组方法
    Array.from(arr).forEach()//Array.from(arr)将参数中的集合转变成数组，然后使其可以使用数组的方法
    //注：for..in是语法 for.each是数组的方法

JSON

//1,可以简写，当json对象键值对一样的时候，可以省略一个 
let json = {a:a,b:b} 
//可以简写为 
let json = {a,b}
//2/可以省略function
let  json = {a:a,b:b,show:function(){}}
//可以省略function为
let  json = {a:a,b:b,show(){}}

4.字符串

    //添加了反单引号字符串模板 使用反单引号字符串模板之后 代码可以随意折行而无需连字符。
    let json = {name:'田源'}
    //ES5：
    alert("名字"+json.name)
    //ES6：使用单引号之后 ${}代替了原来的++
    alert(`名字：${json.name}`)
    //用单引号可以代替（） alert`123` 等于alert()
    //新添加的方法 
    //startsWith(以某某开头) 
    if(str.startsWith('xx')){}
    //endsWith(以某某结束)  
    if(str.entsWith('xx')){}
    //includes()：返回布尔值，表示是否找到了参数字符串。
    let s = 'Hello world!';
    s.includes('o') // true
    //repeat方法返回一个新字符串，表示将原字符串重复n次。
    'x'.repeat(3) // "xxx"
    'hello'.repeat(2) // "hellohello"
    'na'.repeat(0) // ""

5.面向对象(有内部类的概念)

//constructor 是干嘛的？就是构造函数
//ES6创建对象:
class Person{
    constructor(name){
        this.anme = name
    }
    showName(){
        alert(this.name)    
    }
}
let p = new Person("tianyuan")
P.showName();
//ES6继承：
class Worker extends Person{
    constructor(name,job){
        super(name)//直接使用super继承父类
        this.job = job
    }
    showJob(){
        alert(this.job) 
    }
} 
let w = new Worker("it")
w.showJob();

//function 带有bind()方法,将对象的this绑定在bind的参数
document.onclick =  w.showJob().bind(w)//此时this就绑定在w上，而不是document
//普通函数this 谁调用就是谁
//箭头函数this 是当前所属环境
//箭头函数的优先级高于bind

6.promise

7.generator

8.模块