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 所有键值对拿出来

幂运算

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搭配使用