ES6新语法(二)

昨天向大家介绍了ES6的一部分新语法，今天我将把剩下我所知道的新语法都写到这里

插值表达式

//之前
var name="jim"
var age=23

var say="name:"+name+"age:"+age

//es6
var say="name:${name}age:${age}"

多行字符串

let str="
<div>
      <h1>我是jim</h1>
</div>
"        //写多行字符串会语法报错

//es6
let str=`
<div>
      <h1>我是jim</h1>
</div>
`    //正确，并能按格式输出

这个书写方式很像python的三引号，不知道小伙伴们想起来了没。

this

//普通函数
document.onclick=function fn(){
    console.log(this)
}    //点击页面出现:#document    this指向调用者    

//对象
var obj={
    x:1,
    y:2,
    sum(){
        console.log(this)    //{x: 1, y: 2, sum: ƒ}
        return this.x+this.y    //不加this会找不到x,y，可见this和上面作用相同
    }
}
console.log(obj.sum())

//箭头函数
document.onclick=()=>console.log(this)  //Window

为普通函数固定this,如第一个例子
let obj={
    name:'jim'
}
fn=fn.bind(obj)
fn()    //{name: "jim"}    this指向了obj

this的指向对于普通函数指向了调用它的对象，对于箭头函数指向了所处大环境，对于对象指向其本身

Promise:同步操作解决异步之痛

#对于以前我们一个页面要处理好几个ajax请求可能需要按照步骤一步步来操作，而现在，我们有了Promise,看看具体怎么操作吧
let p=new Promise({
    (resolve,reject)=>{
      $.ajax({
        url:request url,
        success(data){
          resolve(data)
        },
        error(err){
          reject(err)
        }
      })
    }
  })
  p.then((data)=>{},(err)=>{})    //then用来最后处理数据

Promise.all([
    $.ajax(),
    $.ajax(),
    $.ajax(),
]).then(data=>{},err=>{})    //批次处理，其data是一个数据数组，有需求可以通过解构然后处理

async/await

async function fn(){
    console.log('1')
    let v=await 2    //后面跟同步操作是不等待的
    console.log(v)
}
fn()    //1\n2

async function fn(){
    console.log('1')
    let v=await $.ajax('a.txt')    //$.ajax就是一个Promise
    console.log(v)    //输出ajax获取数据
}
fn()

我们可以通过async/await+Promise做异步处理,减少传统的开发难度。