ES6--let,解构赋值,promise && ES7--async

ES-->IE10、Google、火狐

ES6

let

• 声明的关键字
• 不能重复声明
• 块级作用域

<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">

window.onload = function() {
    let abt = document.getElementsByTagName('input');
    for (var i = 0; i < abt.length; i++) {
       abt[i].onclick = function() {
          alert(i);
       }
    }
}
// 因为var作用域是函数，所以三个按钮点击弹出都是3
window.onload = function() {
  let abt = document.getElementsByTagName('input');
  for (var i = 0; i < abt.length; i++) {
     (function(i) {
        abt[i].onclick = function() {
           alert(i);
        }
     })(i)
   }
}
window.onload = function() {
  let abt = document.getElementsByTagName('input');
  for (let i = 0; i < abt.length; i++) {
     abt[i].onclick = function() {
        alert(i);
     }
  }
}
// let作用域是块，可以避免这个问题

箭头函数 ()=>{}

• 一个参数()可以省略：val =>{}
• 只有return，{}可以省略

函数的参数

• 参数扩展/展开

• 接收参数，...args必须放在最后;可以用于参数个数不确定

    function show(a,b,...args){
        alert(a)  //12
        alert(b)  //15
        alert(args)  //8,9,10
    }
    show(12,15,8,9,10)
  

• 展开数组

• ...arr 等同于直接把arr放在这里，也就是所谓的链接

     let arr1 = [1,2,3];
     let arr2 = [4,5,6];
     let arr = [...arr1,...arr2];   //[1,2,3,4,5,6]
  

默认参数

• 没传值的情况下，用自己设置的默认参数

     function show(a,b=10,c=15){
         console.log(a,b,c)
     }
     show(5) //5,10,15
     shpw(1,2,3) //1,2,3

解构赋值

• 左右两边结构一模一样
• 右边必须是个合格对象

     let [json,arr,num,str]=[{a:1,b:2},[3,4,5],8,'abc'];
     consle.log(json,arr,num,str)

数组

• 映射 map

     obj.map(function(item){
         console.log(item)
     })
  

• 汇总 reduce

• tem 是指一个中间值，初始为0，item为两个数的和，index为从1开始执行的次数

    let arr = [12,69,180,8763];
    let result=function(tem,item,index){
        return tem+item
     }
  

• 过滤 filter

• 保留一部分，抛弃一部分

    let arr=[1，2，3，4，5]
    let result=arr.filter(item=>item%3==0)
  

• 迭代 forEach

     let arr=[12,5,8,9];
     arr.forEach(item=>alert(item))

字符串

• startsWith

• endsWith

• 字符串模板：反单引号

     let a='一个';
     let b='好人';
     let str = `我是${a}${b}`;  //我是一个好人
  

面向对象

• class 构造函数
• 继承

JSON

• JSON.stringify obj转json
• JSON.parse json转obj

promise

• 操作之间没关系，同时进行多个操作

• 消除异步操作，同步一样的方式，写异步

• all会将所有请求异步完成，接受参数是arr，返回的也是arr

    function ajax(url){
        return new promise(function(resolve,reject){
            $.axax({
                url:url,
                dataType:'json',
                success:function(data){
                    resolve()
                },
                error:function(err){
                    reject(err)
                }
            })
        })
    }
    promise.all([
        ajax(url1),
        ajax(url2)
    ]).then(
        arr => {
            let data = arr[0];
            let result = arr[1];
        },
        err => alert('失败')
    )
  

• catch 解决一个接口返回作为另一个接口参数的问题

    // 创建一个Promise实例，获取数据。并把数据传递给处理函数resolve和reject。
    // 需要注意的是Promise在声明的时候就执行了。
    var getUserInfo=new Promise(function(resolve,reject){
        $.ajax({
            type:"get",
            url:"index.aspx",
            success:function(data){
                if(data.Status=="1"){
                    resolve(data.ResultJson)//在异步操作成功时调用
                }else{
                    reject(data.ErrMsg);//在异步操作失败时调用
                }
            }
        });
    })
  
    //另一个ajax Promise对象，
    var getDataList=new Promise(function(resolve,reject){
        $.ajax({
            type:"get",
            url:"index.aspx",
            success:function(data){
                if(data.Status=="1"){
                    resolve(data.ResultJson)//在异步操作成功时调用
                }else{
                    reject(data.ErrMsg);//在异步操作失败时调用
                }
            }
        });
    })
  
    //Promise的方法then,catch方法
    getUserInfo.then(function(ResultJson){
        //通过拿到的数据渲染页面
    }).catch(function(ErrMsg){
        //获取数据失败时的处理逻辑
    })
  
    //Promise的all方法，等数组中的所有promise对象都完成执行
    Promise.all([getUserInfo,getDataList]).then(function([ResultJson1,ResultJson2]){
        //这里写等这两个ajax都成功返回数据才执行的业务逻辑
    })
  

generator

• yield配合用
• 控制代码执行程度，走走停停

ES7

数组

• includes 查看arr是否包含值，返回true/false

    [a,b,c,d].includes('b'12)    // true
    [a,b,c,d].includes('b',2)    // false
    [1,NaN,2,3].includes(NaN)    // true
    [1,NaN,2,3].indexOf(NaN)     // -1
  

• keys/values/entries

1. for ... of 循环的是值--key
   
   2.for ... in 循环的是下标--index
   
   3.enries 所有键值对拿出来 {a:1}

幂运算

1. ** = 快捷运算
2. Math.pow(3,3) = 27

async

• 用法

        let readData = async () => {
            let data1 = await $.ajax({url,param});
            let data2 = await $.ajax({url,param});
            let data3 = await $.ajax({url,param});
            console.log(data1,data2,data3)
        }
        readData()

await等的是一个promise

await要和promise搭配使用