ES8 学习 -- async 和 await / 对象方法扩展 / 字符串填充

文章目录

  • 1. async 和 await
    • 1.1 基本语法
    • 1.2 使用示例
    • 1.3 案例练习
  • 2. 对象方法扩展
    • 2.1 Object.values(obj)
    • 2.2 Object.entries(obj)
    • 2.3 Object.getOwnPropertyDescriptors(obj)
      • 使用示例
  • 3. 字符串填充
  • 4. 函数参数的末尾加逗号

1. async 和 await

async 函数,使得异步操作变得更加方便。

  • 更好的语义。
  • 返回值是Promise。

1.1 基本语法

async function test(){
let res = awiat … // 对象
})
}

async function test(){
console.log("test")
// return "sucess-11111111"
return new Promise((resolve,reject)=>{
// resolve("data-11111")
reject ("err-22222")
})
}
let res = test()
// console.log(res)
res.then(res=>{
console.log("success",res)
})catch(err=>{
console.log("err",err)
)

// test
// err err-22222

根据以上代码我们可以得出:

  1. async返回值是非promise对象时,返回值一定是fulfiled状态,指定执行then();
  2. async返回的是promsie对象时,我们要个人句返回的promsie对象判断fulfilled 和 rejected两种状态,接着再进行判断执行then() 还是catch()。

async 和 await只能搭配着成对出现!

1.2 使用示例

function ajax(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log("ajax-成功")
resolve("data-11111")
},1000)
})
}
async function test(){
// await后面可以接非promise对象,或者promise对象
// let res = await {name:"kerwin"}  //{name:kerwin}
// let res = ajax()
let res = await ajax()
console.log(res)
test()

没有使用await 时:
// Promise{}
// ajax-成功

使用await 时:
// ajax-成功
// data-11111
// 这段代码是在 1s 之后才出现的!

为什么代码在 1s 之后才出现呢?这是因为使用await 时,如果异步结果不传给res ,那么程序就会在此等着,不去执行下面的程序。

如果某块代码出现错误时,代码就会直接跳到catch() 处,而不会继续执行下面的代码。

一般情况下我们的代码执行顺序就入下面所示,在then() 中渲染页面,在catch() 中处理错误:

async function test(){
... // 与上边代码一样
}
test().then(res=>{
console.log(res)
// 渲染页面
}).catch(err=>{
console.log("err",err)
// 处理错误
})

但是我们也有另一种写法:
我们可以直接在方法中渲染页面,同时写try…catch… 用来处理错误。

async function test()
// await后面可以接非promise对象,或者promie对象
// let res = await {"name":"Kerwin"}
try {
let res1 = await ajax1()
console.log(res1)
let res2 = await ajax2(res1)
console.log(res2)
// 渲染页面
console.log("渲染页面")
catch (error){
console.log("err",error)
}
}

1.3 案例练习

function ajax(url){
return new Promise((resolve,reject)=>{
let xhr = new XMLHttpRequest()
xhr.open("get",url,true)
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readystate === 4){
if(xhr.status >= 200 && xhr.status < 300){
resoLve(JSON.parse(xhr.responseText))
}else{
reject(xhr.responseText)
}
}
}
})
async function test(){
// let res = await ajax("1.json")
// console.log(res)
// let res2 = await ajax("2.json")
// console.log(res2)//promise.all
let res = await Promise.all([ajax("1.json"),ajax("2.json")])
}
test()

2. 对象方法扩展

2.1 Object.values(obj)

let obj = {
name:"kerwin",
age:100
}
console.log(object.values(obj))

// (2) [‘kerwin’,100]

2.2 Object.entries(obj)

let obj = {
name:"kerwin",
age:100
}
console.log(object.entries(obj))

// (2) [‘kerwin’,100]

let obj = {
name:"kerwin",
age:100
}
let m = new Map(object.entries(obj))
console.log(m)

在这里插入图片描述

2.3 Object.getOwnPropertyDescriptors(obj)

该方法可以用来复制对象,当对象中存在拦截属性的方法时,我们使用object.assign() 就不灵了(object.assign() 只能复制属性和简单方法,具有拦截属性的方法就不能被复制)。所以此时我们选择使用Object.getOwnPropertyDescriptors(obj)。

拦截属性函数中我们一般不会去拦截对象的现有属性,比如说下面的代码中我们使用get() 获取this.name ,当程序运行时会不断调用get() ,程序一直在循环进行,但是得不到结果;
我们一般会转换方式的到对象的现有属性,这样可以解决对现有属性依赖问题。

let obj = {
name:"kerwin",
age:100,
// get name() {
// console.log("get")
// return this.name
// }
get uppername(){
console.log("get")
return this.name.substring(0,1).toUppercase()+this.name.substring(1)
}
set uppername(value){
console.log("set",value)
this.name = value
}
}

使用示例

使用Object.assign( ) :

let obj1 ={ }
Object.assign(obj1,obj)

在这里插入图片描述

let obj1 ={ }
Object.defineProperties(obj1,object.getownPropertyDescriptors(obj))

在这里插入图片描述

3. 字符串填充

let str = "kerwin"
console.log(str.padstart(10,'x'))
console.log(str.padEn(10,'x'))
console.log(str.padstart(5,'x'))
console.log(str.padEnd(5,'x'))

// xxxxkerwin
// kerwinxxxx
// kerwin
// kerwin

一般用于设置时间格式

let list = [
for(let i = 1;i < 13 ;i++)
// list.push(String(i).padstart(2,"0"))
list.push((i+"").padstart(2,"0"))

4. 函数参数的末尾加逗号

function test(
a,
b,
C,
){
console.log(a,b)
}
test(
1,
2,
3,
)

一般是让gate 中修改完代码后想看看修改完和修改前的区别。(了解一下就行)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/295276.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript 设计模式之代理模式

代理模式&#xff0c;代理&#xff08;proxy&#xff09;是一个对象&#xff0c;它可以用来控制对另一个对象的访问。 现在页面上有一个香港回归最想听的金典曲目列表&#xff1a; <ul id"container"><li>我的中国心</li><li>东方之珠<…

Photoshop 2024 Mac/win---图像处理的新纪元,解锁无限创意

Photoshop 2024是一款功能强大的图像处理软件&#xff0c;以其卓越的性能和广泛的应用领域&#xff0c;赢得了设计师、摄影师、图形艺术家等各类创意工作者的青睐。它提供了丰富的绘画和编辑工具&#xff0c;让用户能够轻松进行图片编辑、合成、校色、抠图等操作&#xff0c;实…

Redis缓存设计与性能优化【缓存和数据库不一致问题,解决方案:1.加过期时间这样可以一段时间后自动刷新 2.分布式的读写锁】

Redis缓存设计与性能优化 缓存与数据库双写不一致 缓存与数据库双写不一致 在大并发下&#xff0c;同时操作数据库与缓存会存在数据不一致性问题 1、双写不一致情况 2、读写并发不一致 解决方案&#xff1a; 1、对于并发几率很小的数据(如个人维度的订单数据、用户数据等)&a…

LabelConvert: 目标检测和图像分割数据集格式转换工具

LabelConvert LabelConvert是一个目标检测和图像分割的数据集格式转换工具&#xff0c;支持labelme、labelImg与YOLO、VOC和COCO 数据集格式之间的相互转换。 支持的转换格式 安装 pip install label_convert具体使用方法 由于文章篇幅所限&#xff0c;请移步LabelConvert官…

算法学习——LeetCode力扣动态规划篇8(300. 最长递增子序列、674. 最长连续递增序列、718. 最长重复子数组、1143. 最长公共子序列)

算法学习——LeetCode力扣动态规划篇8 300. 最长递增子序列 300. 最长递增子序列 - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删…

Flutter开发之图片选择器

使用FLutter开发了一个图片选择的组件&#xff0c;功能如下&#xff1a; 1、支持设置最大可选图片的个数&#xff1b; 2、根据选择的图片个数自适应容器组件的高度&#xff1b; 3、可设置容器的最大高度&#xff1b; 4、支持点击放大和删除功能&#xff1b; 具体效果如下 …

Java多线程实战-从零手搓一个简易线程池(三)线程工厂,核心线程与非核心线程逻辑实现

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️本系列源码仓库&#xff1a;多线程并发编程学习的多个代码片段(github) &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正…

漂亮哇塞的可视化大屏页面该如何设计?

要提升可视化界面的设计美观度&#xff0c;可以从以下几个方面入手&#xff1a; 使用高质量的图片和素材&#xff1a;使用高质量的图片和素材可以让界面更加美观。可以选择高清晰度的图片和素材&#xff0c;使得整个界面的质感更加高端。突出重点&#xff1a;在界面设计中&…

《QT实用小工具·八》数据库通用翻页类

1、概述 源码放在文章末尾 该项目实现数据库通用翻页类&#xff0c;主要包含如下功能&#xff1a; 1:自动按照设定的每页多少行数据分页 2:只需要传入表名/字段集合/每页行数/翻页指示按钮/文字指示标签 3:提供公共静态方法绑定字段数据到下拉框 4:建议条件字段用数字类型的主…

debian的使用笔记

1. XP风格任务栏 安装 debian-live-12.5.0-amd64-xfce.iso 后&#xff0c;把下面的任务栏删除&#xff0c;把上面的任务栏移到下面&#xff0c;然后设置如下选项 2. 命令自动补全 sudo apt install bash-completion 3. 找不到命令 sudo apt install command-not-found sudo…

RISC-V GNU Toolchain 工具链安装问题解决(含 stdio.h 问题解决)

我的安装过程主要参照 riscv-collab/riscv-gnu-toolchain 的官方 Readme 和这位佬的博客&#xff1a;RSIC-V工具链介绍及其安装教程 - 风正豪 &#xff08;大佬的博客写的非常详细&#xff0c;唯一不足就是 sudo make linux -jxx 是全部小写。&#xff09; 工具链前前后后我装了…

论文阅读RangeDet: In Defense of Range View for LiDAR-based 3D Object Detection

文章目录 RangeDet: In Defense of Range View for LiDAR-based 3D Object Detection问题笛卡尔坐标结构图Meta-Kernel Convolution RangeDet: In Defense of Range View for LiDAR-based 3D Object Detection 论文&#xff1a;https://arxiv.org/pdf/2103.10039.pdf 代码&…

栈溢出攻击的软硬件缓解技术

为了防范栈溢出攻击&#xff0c;现代处理器架构&#xff08;如Arm架构&#xff09;具有执行权限。在Armv8-A中&#xff0c;主要的控制是在MMU地址转换表&#xff08;translation tables&#xff09;中的执行权限位。 UXN User (EL0) Execute-never …

SpringBoot+thymeleaf完成视频记忆播放功能

一、背景 1)客户要做一个视频播放功能,要求是系统能够记录观看人员在看视频时能够记录看到了哪个位置,在下次观看视频的时候能够从该位置进行播放。 2)同时,也要能够记录是谁看了视频,看了百分之多少。 说明:由于时间关系和篇幅原因,我们这里只先讨论第一个要求,第…

基于WEB的花卉养殖知识平台的设计与实现|SSM+ Mysql+Java(可运行源码+数据库+LW)植物绿植种植,留言管理,知识科普,新闻数据

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读300套最新项目持续更新中..... 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含ja…

Android Studio学习5——布局layout与视图view

wrap_content&#xff0c;内容有多大&#xff0c;就有多宽&#xff08;包裹&#xff09; 布局 padding 边框与它自身的内容 margin 控件与控件之间

docker容器环境安装记录(MAC M1)(完善中)

0、背景 在MAC M1中搭建商城项目环境时&#xff0c;采用docker统一管理开发工具&#xff0c;期间碰到了许多环境安装问题&#xff0c;做个总结。 1、安装redis 在宿主机新建redis.conf文件运行创建容器命令&#xff0c;进行容器创建、端口映射、文件挂载、以指定配置文件启动…

【Python面试题收录】Python的深浅拷贝

一、Python的深浅拷贝的区别 在Python中&#xff0c;深拷贝和浅拷贝是两种不同的对象复制机制&#xff0c;它们的主要区别在于如何处理对象内部所包含的可变或不可变类型的子对象。 浅拷贝 是指创建一个新的对象&#xff0c;但它只复制了原对象的第一层内容&#xff0c;也就是说…

Linux|centos7|postgresql数据库主从复制之异步还是同步的问题

前言&#xff1a; postgresql数据库是一个比较先进的中型关系型数据库&#xff0c;原本以为repmgr和基于repmgr的主从复制是挺简单的一个事情&#xff0c;但现实很快就给我教育了&#xff0c;原来postgresql和MySQL一样的&#xff0c;也是有异步或者同步的复制区别的 Postgre…

运放知识点总结

目录 一、运放基础知识 (operational amplifier) 1.由来 2.用途 3.符号 4.内部结构​编辑 5.虚短虚断 二、同相放大电路 &#xff08;Non-inverting Amplifier&#xff09; 三、反相放大电路 (Inverting Amplifier) 四、差分放大电路 (Difference Amplifier) 五、加法…