ES6新语法(二)

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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()    //1n2

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的ES6新语法(二)全部内容,希望文章能够帮你解决ES6新语法(二)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。