03.ES7 04.ES8

3.1.Array.includes

Includes 方法用来检测数组中是否包含某个元素,返回布尔类型值

    <script>// includes   const mingzhu = ['王二','张三','李四','王五'];//判断console.log(mingzhu.includes('张三'));//trueconsole.log(mingzhu.includes('周六'));//false//indexOf  是否存在数组中  返回的是数字console.log(mingzhu.indexOf('张三'));//1console.log(mingzhu.indexOf('周六'));//-1</script>

3.2、** 指数操作符

在 ES7 中引入指数运算符「**」,用来实现幂运算,功能与 Math.pow 结果相同

console.log(2 ** 10); //1024
console.log(Math.pow(2, 10));//1024

4.1、async 和 await

async 和 await 两种语法结合可以让异步代码像同步代码一样

4.1.1、async 函数

async 是一个修饰符,async 定义的函数会默认的返回一个Promise对象resolve(已定型成功或失败)的值,因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数。

  • async 函数的返回值为 promise 对象,
  • promise 对象的结果由 async 函数执行的返回值决定
    • 返回的结果不是一个 Promise 类型的对象, 是字符串、数字、undefined等,就是成功的结果
    • 抛出错误, 返回的结果是一个失败的 Promise
    • 返回的结果如果是一个 Promise 对象,根据Promise返回的结果确定状态
 <script>//async 函数async function fn() {/* 1: 返回的结果不是一个 Promise 类型的对象, 是字符串、数字、undefined等返回的结果就是成功 Promise 对象 */// return 'bdqn';// return;  // 2:抛出错误, 返回的结果是一个失败的 Promisethrow new Error('出错啦!');// 3:返回的结果如果是一个 Promise 对象,根据Promise返回的结果确定状态// return new Promise((resolve, reject) => {//   resolve("成功的数据");//   reject("失败的错误");// });}const result = fn();//调用 then 方法result.then((value) => {console.log(value,'成功回调');},(reason) => {console.warn(reason,'失败回调');});</script>

4.1.2、await 表达式

  • await 必须写在 async 函数中
  • await 右侧的表达式一般为 promise 对象
  • await 返回的是 promise 成功的值
  • await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理
  <script>//创建 promise 对象const p = new Promise((resolve, reject) => {// resolve("用户数据");reject("失败啦!");});//1: await 要放在 async 函数中. await单向依赖asyncasync function main() {try {// result 是Promise对象成功的值let result = await p;console.log(result, "async,await");} catch (e) {//e返回的 是Promise对象失败的值console.log(e, "async,await");}}//调用函数main();// Promise调用then方法/*  p.then((v) => {console.log(v, "then方法");},(r) => {console.log(r, "then方法");}); */</script>

4.1.3、async与await封装AJAX请求

  <script>// 发送 AJAX 请求, 返回的结果是 Promise 对象function sendAJAX(url) {return new Promise((resolve, reject) => {//1. 创建对象const x = new XMLHttpRequest();//2. 初始化x.open("GET", url);//3. 发送x.send();//4. 事件绑定x.onreadystatechange = function () {if (x.readyState === 4) {if (x.status >= 200 && x.status < 300) {//成功啦resolve(x.response);} else {//如果失败reject(x.status);}}};});}//第一种:promise then 方法测试// sendAJAX("https://api.apiopen.top/getJoke").then(value=>{//     console.log(value);// }, reason=>{})//第二种: async 与 await 测试  axiosasync function main() {//发送 AJAX 请求let result = await sendAJAX("https://api.apiopen.top/getJoke");console.log(result);}main();</script>

4.2、对象方法扩展

4.2.1、Object.values 和 Object.entries

  • Object.values()方法返回一个给定对象的所有可枚举属性值的数组
  • Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组
   <script>//声明对象const school = {name: "bdqn",cities: ["北京", "上海", "深圳"],xueke: ["前端", "Java", "大数据", "测试"],};//获取对象所有的键console.log(Object.keys(school),'key');//['name', 'cities', 'xueke'] 'key'//获取对象所有的值console.log(Object.values(school),'value');//['bdqn', Array(3), Array(4)] 'value'//entries  返回的是一个数组,数组里放一组组数组,里面是键,值console.log(Object.entries(school),'entries');//有了上面的entries结果,方便创建 Map// const m = new Map(Object.entries(school));// console.log(m,'map');</script>

4.2.2、Object.getOwnPropertyDescriptors

该方法返回指定对象所有自身属性的描述对象

补充

Object.create( proto[,propertiesObject] )

参数

proto:创建对象的原型,表示要继承的对象

propertiesObject(可选 ):也是一个对象,用于对新创建的对象进行初始化

  <script>//声明对象const school = {name: "bdqn",cities: ["北京", "上海", "深圳"],xueke: ["前端", "Java", "大数据", "测试"],};//对象属性的描述对象console.log(Object.getOwnPropertyDescriptors(school),'111');//  可以对对象深层次的克隆const obj = Object.create(null, {name: {//设置值value: "bdqn",//属性特性writable: true,//是否可写configurable: true,//是否可以删除enumerable: true,//是否可以遍历},});</script>

4.3、字符串填充

padStart()、padEnd()方法可以使得字符串达到固定长度,

有两个参数,字符串目标长度和填充内容。

  <script>let str = "hello";console.log(str.padStart(10, "m")); //mmmmmhelloconsole.log(str.padEnd(10, "m")); //hellommmmmconsole.log(str.padStart(5, "m")); //hello,如果长度不够,就不添加console.log(str.padEnd(5, "m")); //hello</script>

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

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

相关文章

离线安装 Docker-IO:详细步骤指南

离线安装 Docker-IO:详细步骤指南 一、准备工作1.1 下载 Docker 离线安装包1.2 准备安装环境1.3 配置防火墙和 SELinux(可选)二、上传和解压离线安装包2.1 上传安装包2.2 解压安装包三、安装 Docker-IO3.1 移动 Docker 文件到系统目录3.2 配置 Docker 服务3.3 赋予服务文件执…

单细胞细胞通讯全流程分析教程,代做分析和辅导

0. 分析参数文件和细胞通讯的演示数据 0.1 细胞通讯分析总的参数文件&#xff0c;后面部分细胞通讯分析模块会用到 分析参数文件 参数文件名称&#xff1a;total_analysis_params_demo.xlsx &#xff0c;很多分析模块都是这个总的参数文件&#xff0c;我的这个总的参数文件如…

Flume 与 Kafka 整合实战

目录 一、Kafka 作为 Source【数据进入到kafka中&#xff0c;抽取出来】 &#xff08;一&#xff09;环境准备与配置文件创建 &#xff08;二&#xff09;创建主题 &#xff08;三&#xff09;测试步骤 二、Kafka 作为 Sink数据从别的地方抽取到kafka里面】 &#xff08;…

从零开始理解JVM:对象的生命周期之对象销毁(垃圾回收)

一、JVM参数 在学垃圾回收器之前&#xff0c;我们先要知道&#xff0c;jvm参数是怎么回事。因为配置各种回收器&#xff0c;必须对应各种参数设置。 标准参数&#xff08;-&#xff09; 所有的JVM实现都必须实现这些参数的功能&#xff0c;而且向后兼容 -help-version 非标准参…

win10中使用ffmpeg的filter滤镜

1 给视频加文字水印 1.1 添加播放时间 ffmpeg -i input.mp4 -vf "drawtextfontfileC\\:/Windows/fonts/consola.ttf:fontsize30:fontcolorwhite:timecode00\:00\:00\:00:rate25:textTCR\::boxcolor0x000000AA:box1:x20:y20" -y output.mp4 在视频的x20:y20位置添加t…

模拟器快速上手,助力HarmonyOS应用/服务高效开发

文章目录 1 创建模拟器1&#xff09;打开设备管理界面2&#xff09;设置本地模拟器实例存储路径3&#xff09;创建一个模拟器&#xff08;1&#xff09;选择模拟器设备&#xff08;2&#xff09;创建模拟器&#xff08;3&#xff09;启动模拟器&#xff08;4&#xff09;关闭模…

HarmonyOS(61) 组件间状态共享的分类以及状态选择器的选取优先级

状态共享 状态共享的分类状态共享选择器State与prop\Link\ObservedObjectLink组合的区别合理选择装饰器的顺序参考资料 状态共享的分类 HarmonyOS的组件之间是可以共享状态数据了&#xff0c;不同的组件之间&#xff0c;状态共享的场景也不一样&#xff0c;根据共享范围从小到…

高德地图 Readme GT 定制版 10.25.0.3249 | 极致简洁

这款定制版高德地图去除了广告&#xff0c;运行速度更快。虽然没有车道级导航、打车功能和红绿灯倒计时等功能&#xff0c;但支持正常登录和收藏功能。检测更新始终为最新版本。 大小&#xff1a;82.5M 下载地址&#xff1a; 百度网盘&#xff1a;https://pan.baidu.com/s/1Y…

去中心化物理基础设施网络(DePIN):重塑未来的基石

一、引言&#xff1a;DePIN的定义与背景 什么是DePIN&#xff1f; 去中心化物理基础设施网络&#xff08;DePIN&#xff0c;Decentralized Physical Infrastructure Networks&#xff09;是利用区块链和去中心化技术管理、优化和激励物理资源分配的一种新兴模式。与传统集中式…

模型 布鲁姆法则

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。分层提升思维力。 1 布鲁姆法则的应用 1.1 布鲁姆法则在产品开发流程中的应用 背景&#xff1a; 在产品开发领域&#xff0c;创新和效率是关键。布鲁姆法则可以帮助产品经理和设计师系统地提升产品开…

恒创科技:服务器操作系统和客户端操作系统之间的区别

客户端操作系统和服务器操作系统是两种不同的操作系统&#xff0c;旨在满足计算机网络环境中的特定目的。虽然每种类型的操作系统在基本功能方面都有一些相似之处&#xff0c;但它们针对不同的用例进行了优化&#xff0c;并具有针对其特定角色量身定制的特定功能。 什么是服务器…

Flink的双流join理解

如何保证Flink双流Join准确性和及时性、除了窗口join还存在哪些实现方式、究竟如何回答才能完全打动面试官呢。。你将在文中找到答案。 1 引子 1.1 数据库SQL中的JOIN 我们先来看看数据库SQL中的JOIN操作。如下所示的订单查询SQL&#xff0c;通过将订单表的id和订单详情表ord…

2024学习之前端微信小程序开发教程,从入门到精通-含基础+实战+源码code

目录 一、简单介绍 二、课程需知 三、内容编排 1、小程序基础  起步式 目录结构 小程序框架 场景值  逻辑层 视图层 组件 视图容器 基础内容 表单组件 导航 媒体组件 Api 路由 界面 交互 网络 数据缓存 自定义组件 2、项目实战 …

HarmonyOS4+NEXT星河版入门与项目实战(23)------组件转场动画

文章目录 1、控件图解2、案例实现1、代码实现2、代码解释3、实现效果4、总结1、控件图解 这里我们用一张完整的图来汇整 组件转场动画的用法格式、属性和事件,如下所示: 2、案例实现 这里我们对上一节小鱼游戏进行改造,让小鱼在游戏开始的时候增加一个转场动画,让小鱼自…

数据预处理方法—特征选择、特征缩放、特征构造

特征选择 1.1 原理 特征选择是选择对模型训练最重要的特征&#xff0c;减少数据维度&#xff0c;去除冗余或不相关特征&#xff0c;提高模型性能的性能和训练速度&#xff0c;减少过拟合。 1.2 核心公式 可以使用基于树模型的特征重要性度量&#xff0c;如在随机森林中计算特…

【C++/Qt 】使用QCustomplot类打造一款数学函数图像生成工具(支持latex公式渲染+Python连接AI大模型)

✨✨ Rqtz 个人主页 : 点击✨✨ &#x1f308;Qt系列专栏:点击 软件介绍 基于Qt的开源项目QCustomplot类的一款在线的数学函数图像生成工具&#xff0c;涉及到了数学的latex公式渲染&#xff0c;如何将latex语法转换为Python的函数&#xff0c;和如何在Qt中使用QCustomplot类进…

分页查询功能

EmployeeController /** * 员工分页查询 * * param employeePageQueryDTO * return */ GetMapping("/page") ApiOperation("员工分页查询") public Result<PageResult> page(EmployeePageQueryDTO employeePageQueryDTO) { log.info("…

mp4视频流推送的学习

一、依赖引入&#xff1a; ①使用 CDN 的播放器代码 <!-- 引入 xgplayer 核心 --> <script src"https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.js" charset"utf-8"></script><!-- 引入 xgplayer mp4 插件 -->…

C++趣味编程:基于树莓派Pico的模拟沙漏-倾斜开关与LED的互动实现

沙漏,作为一种古老的计时工具,利用重力让沙子通过狭小通道,形成了计时效果。在现代,我们可以通过电子元件模拟沙漏的工作原理。本项目利用树莓派Pico、倾斜开关和LED,实现了一个电子沙漏。以下是项目的详细技术解析与C++代码实现。 一、项目概述 1. 项目目标 通过倾斜开关…

PyG教程:MessagePassing基类

PyG教程&#xff1a;MessagePassing基类 一、引言二、如何自定义消息传递网络1.构造函数2.propagate函数3.message函数4.aggregate函数5.update函数 三、代码实战1.图数据定义2.实现GNN的消息传递过程3.完整代码4.完整代码的精简版本 四、总结1.MessagePassing各个函数的执行顺…