ES6新语法(二)

news/2023/12/1 7:54:20

昨天向大家介绍了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做异步处理,减少传统的开发难度。


http://www.niftyadmin.cn/n/3365744.html

相关文章

Elasticsearch入门教程之安装与基本使用

ubuntu16.04elasticsearch6.5为例&#xff0c;参考官网文档https://www.elastic.co/guide/en/elasticsearch/reference/current/getting-started.html 安装java 参考文章&#xff1a;https://www.digitalocean.com/community/tutorials/how-to-install-java-with-apt-get-on-ub…

android view rotate,Android ImageView zoom, rotate, position change prob

问题I am using a the following code for a image, which will rotate, zoom in-out with pinch. User can make its position by dragging it.activity_img_match.xmlxmlns:tools"http://schemas.android.com/tools"android:layout_width"match_parent"a…

git stash 怎么用?

一、切换分之前&#xff0c;添加改动文件到stash; git stash: 备份当前的工作区的内容&#xff0c;从最近的一次提交中读取相关内容&#xff0c;让工作区保证和上次提交的内容一致。同时&#xff0c;将当前的工作区内容保存到Git栈中。 git stash pop: 从Git栈中读取最近一次保…

61 C++ STL容器案例1

案例描述 有5名选手&#xff1a;选手ABCDE&#xff0c;10个评委分别对每一名选手打分&#xff0c;去除最高分&#xff0c;去除评委中最低分&#xff0c;取平均分。 实现步骤 创建五名选手&#xff0c;放到vector中遍历vector容器&#xff0c;取出来每一个选手&#xff0c;执行…

android powermock,Android单元测试之PowerMockito

背景由于Mockito的局限性&#xff0c;对final、private、static等方法不能mock&#xff0c;PowerMockito测试框架正好弥补Mockito的不足。PowerMockito入门依赖配置// PowerMocktestCompile org.powermock:powermock-module-junit4:1.6.5testCompile org.powermock:powermock-m…

adobe

使用adobe acrobat pro dc可以处理pdf&#xff0c;自动识别&#xff0c;编辑pdf&#xff0c;将pdf导出为word。&#xff08;收费可破解&#xff09;转载于:https://www.cnblogs.com/aeolian/p/10160373.html

Linux 查询公网出口IP

查询公网出口IP地址如下&#xff1a; 1 curl http://members.3322.org/dyndns/getip 2 curl myip.ipip.net 3 curl cip.cc 4 curl ipinfo.io 5 curl ifconfig.me 转载于:https://www.cnblogs.com/yangq/p/9198873.html

AndFix注意事项

1、生成补丁&#xff0c;修改前后的apk包都必须签名。 2、AndFix 不支持修改布局文件。 3、文件的路径必须正确。 4、AndFix 不支持添加匿名内部类&#xff08;就是点击事件&#xff09;。 5、AndFix 不支持添加新的类。 6、AndFix 支持连续打补丁&#xff08;注意补丁的名字要…

小板凳app android,小方桌易家园老师端app

小方桌易家园老师端app是一款非常不错的手机家校通类教师端软件&#xff0c;用户可以在该软件上对学生进行系统管理&#xff0c;支持上传学生的成绩&#xff0c;通知家长&#xff0c;与家长进行沟通等等&#xff0c;还可以查看学校的通知活动&#xff0c;支持考勤服务&#xff…

2019微信公开课 同行With Us 听课笔记及演讲全文

【2019WeChat 微信公开课】 产品理念&#xff1a;   微信启动页 一个小人站在地球前面&#xff0c;每个人都有自己的理解和解读   所谓异类&#xff0c;表示与别人与众不同&#xff0c;即优秀的代名词。   微信的与众不同体现在尊重用户对产品的感受和体验。   微信并不…

android5自带palette,android5.x之Palette调色板

Palette类可以分析一张图片&#xff0c;取出这张图片的特征色&#xff0c;然后为View中的文字&#xff0c;背景等设置颜色&#xff0c;让整个界面在色调上看上去更和谐更美观。使用Palette&#xff0c;首先要导入sdk\extras\android\support\v7\palette然后在你的工程中引入Pal…

执行上下文、变量对象、作用域链、this,看这篇就够了!

不管是前端老司机&#xff0c;还是前端小白&#xff0c;看到标题中列举的这些概念&#xff0c;想必都是头大。其实你知道么&#xff1f;这些概念背后是有联系的&#xff0c;理清楚他们的关系&#xff0c;你才能准确且牢靠地记住他们。 也只有理清楚这些基本且重要的概念&#x…

wd移动硬盘不能识别_移动硬盘无法识别

USB不被电脑识别&#xff0c;如果是系统或系统自带的驱动的原因&#xff0c;可以按下面方法修复一下。1、开机按F8进入安全模式后在退出&#xff0c;选重启或关机在开机&#xff0c;就可以进入正常模式(修复注册表)。2、如果故障依旧&#xff0c;请你用系统自带的系统还原&…

小球碰撞(面向对象)

<!DOCTYPE html> <html><head><meta charset"utf-8" /><title>01小球碰撞(面向对象版)</title><style type"text/css">* {margin: 0;padding: 0;}#wrapper {width: 600px;height: 400px;margin: 0 auto;border:…

luogu P4718 【模板】Pollard-Rho算法(贴代码)

嘟嘟嘟 从标题中能看出来&#xff0c;我只是想贴一个代码。 先扯一会儿。 前几天模拟考到了这东西&#xff0c;今天有空就学了一下。 到网上找资料&#xff0c;发现前置技能是miller-rabin筛法&#xff0c;于是我还得先学这么个东西。 学miller-rabin的话不得不推荐这两篇文章&…

html右侧悬浮侧边栏,jQuery页面侧边固定悬浮导航代码(带关闭按钮)

var browser{versions:function(){var u navigator.userAgent, app navigator.appVersion;return { //移动终端浏览器版本信息trident: u.indexOf(Trident) > -1, //IE内核presto: u.indexOf(Presto) > -1, //opera内核webKit: u.indexOf(AppleWebKit) > -1, //苹…
最新文章