【ECMAScript6】

【ECMAScript6】

  • 01. ES6介绍
  • 02. let和const命令
  • 03. 模板字符串
  • 04. 函数之默认值、剩余参数
  • 05. 函数之扩展运算符、箭头函数
  • 06. 箭头函数this指向和注意事项
  • 07. 解构赋值
  • 08. 扩展的对象的功能(简写)
  • 09. Symbol类型
  • 10. Set集合数据类型
  • 11. Map数据类型
  • 12. 数组的扩展方法一
  • 13. 数组的扩展方法二
  • 14. 迭代器Interator的用法
  • 15. 生成器Generator的用法
  • 16. Generator的应用
  • 17. Promise的基本使用
  • 18. 使用Promise封装ajax
  • 19. Promise对象的其他方法
  • 20. async的用法
  • 21. class类的用法
  • 22. 类的继承
  • 23. ES6的模块化实现

01. ES6介绍

ES6新特性
在这里插入图片描述

ES5内部提供的变量提升、内置对象的一些方法、数组、对象不是那么灵活,模块化实现没有那么完善

ps:变量提升(Variable Hoisting)是 JavaScript 中的一种行为,指的是在代码执行之前,JavaScript 引擎会将变量和函数的声明提升到其所在作用域的顶部,意味着可以在声明变量或函数之前使用它们,而不会导致错误

ES5中造一个使用的是构造函数
ES6中用class(类似Java)

在前端中还有一门后端语言Node. js。
Node.js中就使用大量的一些ES6的语法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

针对于10%的ES6的新特性对各大浏览器不支持,甚至90%里面可能针对于某些浏览器也是不支持的。那么我们需要前端的某些工具来对它进行一个转移。

在这里插入图片描述
在这里插入图片描述

02. let和const命令

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

03. 模板字符串

在这里插入图片描述

04. 函数之默认值、剩余参数

一、带参数默认值的函数
在这里插入图片描述

二、默认的表达式也可以是一个函数在这里插入图片描述

三、不具名参数的一个函数
在这里插入图片描述
ES6的写法:
在这里插入图片描述
在这里插入图片描述

05. 函数之扩展运算符、箭头函数

一、扩展运算符
在这里插入图片描述

二、箭头函数
在这里插入图片描述
在这里插入图片描述
实现闭包:
在这里插入图片描述

06. 箭头函数this指向和注意事项

一、this指向
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、注意事项
在这里插入图片描述
在这里插入图片描述

07. 解构赋值

在这里插入图片描述

解构赋值的做法是:
在这里插入图片描述
还可以使用剩余运算符
在这里插入图片描述
在这里插入图片描述
还可以使用默认值
在这里插入图片描述

接下来,我们来对数组解构:
在这里插入图片描述
还可以嵌套使用(不过要结构对应):
在这里插入图片描述

08. 扩展的对象的功能(简写)

简写:
在这里插入图片描述

用之于取值器和设置器
在这里插入图片描述

属性表达式:
在这里插入图片描述
在这里插入图片描述

09. Symbol类型

在这里插入图片描述

10. Set集合数据类型

集合:
在这里插入图片描述
方法:
在这里插入图片描述
遍历集合没有什么意义:
在这里插入图片描述
将集合转换为数组:
在这里插入图片描述
在这里插入图片描述

11. Map数据类型

在这里插入图片描述
在这里插入图片描述
其他用法与set类似

12. 数组的扩展方法一

一、from()
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、of()
在这里插入图片描述

三、within()
在这里插入图片描述

四、find()、findIndex()
在这里插入图片描述

13. 数组的扩展方法二

五、遍历器的一些方法
在这里插入图片描述

六、includes()
在这里插入图片描述

14. 迭代器Interator的用法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

15. 生成器Generator的用法

在这里插入图片描述

具体实现:
(不使用next的时候,函数的不会走的,它只是生成了一个生成器函数)
在这里插入图片描述

传参:
在这里插入图片描述
应用:
在这里插入图片描述
实操:
在这里插入图片描述

16. Generator的应用

为异步编程提供便利,进行部署ajax操作,让异步代码同步化。
在这里插入图片描述
所以,我们使用Generator去解决异步编程回调地狱问题。
在这里插入图片描述

这个过程实现了异步代码同步化:
走next,先执行request请求,alert显示;
再走请求函数里的next,走打印部分。
实现了主函数的同步化,即按顺序执行,
而不会先执行同步代码,然后执行异步代码。
在这里插入图片描述

再举一个例子:
在这里插入图片描述
在这里插入图片描述
但是执行结果却是如下:
在这里插入图片描述
更改如下:
在这里插入图片描述

17. Promise的基本使用

在ES6中,对于异步编程提供了三种方法:
①Generator生成器
②Promise
③Async/Await组合

异步编程传统的解决方案基本上都是使用回调函数和事件,所以显得当前的Promise更加地合理和强大。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我们先来打印一下Promise:
在这里插入图片描述
在这里插入图片描述
then里面接收回调函数:在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

18. 使用Promise封装ajax

本节目标是自己通过Promise对象来封装自己的一个API库
在这里插入图片描述
在这里插入图片描述
相当于
在这里插入图片描述
在这里插入图片描述

19. Promise对象的其他方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

20. async的用法

一、用法:
在这里插入图片描述

二、错误:
在这里插入图片描述

三、应用:
在这里插入图片描述
在这里插入图片描述

21. class类的用法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

22. 类的继承

在这里插入图片描述

23. ES6的模块化实现

一直以来,js都是没有模块系统的,无法将一个大程序拆分成我们互相依赖的一些小小的文件以进行相互依赖的。

导出:
在这里插入图片描述
引入
在这里插入图片描述

(插件Live Server)和鼠标右键点击Open with Live Server,要用服务器运行起来,会传入一个ip地址(端口号),要不然静态文件访问是访问不到的。

多个导出引入:
导出:
在这里插入图片描述
引入:
在这里插入图片描述

导出的多种写法:
在这里插入图片描述

(注意script要改一下)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于 sklearn 的均值偏移聚类算法的应用

基于 sklearn 的均值偏移聚类算法的应用 在机器学习和数据挖掘中,聚类算法是一类非常重要的无监督学习方法。它的目的是将数据集中的数据点划分为若干个类,使得同一类的样本点彼此相似,而不同类的样本点相互之间差异较大。均值偏移聚类&…

浅谈HTTP及HTTPS协议

1.什么是HTTP? HTTP全称是超文本传输协议,是一种基于TCP协议的应用非常广泛的应用层协议。 1.1常见应用场景 一.浏览器与服务器之间的交互。 二.手机和服务器之间通信。 三。多个服务器之间的通信。 2.HTTP请求详解 2.1请求报文格式 我们首先看一下…

故障诊断 | Matlab实现基于DBO-BP-Bagging多特征分类预测/故障诊断

故障诊断 | Matlab实现基于DBO-BP-Bagging多特征分类预测/故障诊断 目录 故障诊断 | Matlab实现基于DBO-BP-Bagging多特征分类预测/故障诊断分类效果基本介绍模型描述DBO-BP-Bagging蜣螂算法优化多特征分类预测一、引言1.1、研究背景和意义1.2、研究现状1.3、研究目的与方法 二…

使用Open WebUI下载的模型文件(Model)默认存放在哪里?

🏡作者主页:点击! 🤖Ollama部署LLM专栏:点击! ⏰️创作时间:2025年2月21日21点21分 🀄️文章质量:95分 文章目录 使用CMD安装存放位置 默认存放路径 Open WebUI下…

第48天:Web开发-JavaEE应用依赖项Log4j日志Shiro验证FastJson数据XStream格式

#知识点 1、安全开发-JavaEE-第三方依赖开发安全 2、安全开发-JavaEE-数据转换&FastJson&XStream 3、安全开发-JavaEE-Shiro身份验证&Log4j日志处理 一、Log4j 一个基于Java的日志记录工具,当前被广泛应用于业务系统开发,开发者可以利用该工…

计算机毕业设计SpringBoot+Vue.js中小型医院网站(源码+文档+PPT+讲解)

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…

在 compare-form.vue 中添加 compareDate 隐藏字段,并在提交时自动填入当前时间

在 compare-form.vue 中添加 compareDate 隐藏字段,并在提交时自动填入当前时间。 提交表单时存入的对象是FakeRegistration,这个对象里面有compareDate字段,刚好表格查询的对象也是FakeRegistration,所以表格展示的时间就是刚才…

ARM Cortex-M处理器中的MSP和PSP

在ARM Cortex-M系列处理器中,MSP(主堆栈指针)和PSP(进程堆栈指针)是两种不同的堆栈指针,主要用于实现堆栈隔离和提升系统可靠性。以下是它们的核心区别和应用场景: 1. 基本定义 MSP(…

STM32——HAL库开发笔记24(定时器5—超声波测距)(参考来源:b站铁头山羊)

一、原理 本次实验采用HC-SR04超声波传感器,结构及功能如下图 超声波传感器可以用来测距。距离 声速(340m/s) *传播时间 / 2。 这个传感器有四个引脚,其中VCC接电源正极,GND接电源负极 , Trig : 用来启动测量 &…

LCC并行光模块、PLCC并行光模块和POB并行光模块的区别

一、封装结构与材料差异 PLCC(Plastic Leaded Chip Carrier) 封装材料:采用塑料材质,引脚数量较多(20-84个),引脚分布在四周12散热设计:通常通过PCB基板嵌装铜散热片提升散热性能8…

WIFI的SSID超长,隐藏,重复 (2.4G和5G差异)

目录 1、2.4G和5G的频率范围‌ 2、2.4G和5G的差异‌: 3、隐藏ssid显示为\x00 4、 重复的ssid名称 扩展 前言 最近处理wifi设备时发现,小小一个ssid就有超多的问题。 不是中文转义就是超长,现在还发现空字符的,原来时对方路由隐藏了…

FS800DTU联动OneNET平台数据可视化View

目录 1 前言 2 环境搭建 2.1 硬件准备 2.2 软件环境 2.3 硬件连接 3 注册OneNET云平台并建立物模型 3.1 参数获取 3.2 连接OneNET 3.3上报数据 4 数据可视化View 4.1 用户信息获取 4.2 启用数据可视化View 4.3 创建项目 4.4 编辑项目 4.5 新增数据源 4.6 数据过滤器配置 4.6 项…

Linux时间日期类指令

1、data指令 基本语法: date : 显示当前时间date %Y : 显示当前年份date %m : 显示当前月份date %d : 显示当前哪一天date “%Y-%m-%d %H:%M:%S" : 显示年月日时分秒date -s 字符串时间 : 设置系统时…

Elasticsearch:使用经过训练的 ML 模型理解稀疏向量嵌入

作者:来自 Elastic Dai Sugimori 了解稀疏向量嵌入,理解它们的作用/含义,以及如何使用它们实现语义搜索。 Elasticsearch 提供语义搜索功能,允许用户使用自然语言进行查询并检索相关信息。为此,目标文档和查询必须首先…

MagicArticulate: 超48K海量数据革新3D动画,自回归Transformer驱动关节智能生成!

论文链接:https://arxiv.org/pdf/2502.12135 Git链接:https://chaoyuesong.github.io/MagicArticulate/ 亮点直击 首个大规模关节化基准数据集,包含超过33,000个具有高质量关节标注的模型; 一种新颖的两阶段框架,有效…

【洛谷入门赛】B4019 皆与生物有缘

题意 两个老师会对你进行打分,我们要做的是把两个老师每题给的分全加起来,然后 2 \div 2 2 再向上取整,输出这个值即可。 思路 首先,我们要输入。 根据我们总结的题意,我们还需要把所有分数加起来。 因为我们尽…

如何选择更安全的无人自助管理私人影院物联网框架?

对于无人自助管理的私人电影院来说,安全是至关重要的,在物联网层面上,更要确保其相关安全措施,才能更好地安全运转。选择更安全的无人自助管理私人影院物联网框架时,可以从以下几个关键方面进行评估: 1. 安…

基本网络安全的实现

基本网络安全的实现 一 :AAA AAA 是Authentication,Authorization and Accounting(认证、授权和计费)的简 称,它提供了一个用来对认证、授权和计费这三种安全功能进行配置的一致性框架, 它是对网络安全…

【大模型】Ubuntu下 fastgpt 的部署和使用

前言 本次安装的版本为 fastgpt:v4.8.8-fix2。 最新版本fastgpt:v4.8.20-fix2 问答时报错,本着跑通先使用起来,就没有死磕下去,后面bug解了再进行记录。   github连接:https://github.com/labring/FastGPT fastgpt 安装说明&…

python--泰坦尼克号人员存活模型训练+预测

1.先到Kaggle平台下载关于泰坦尼克号的数据。 泰坦尼克号数据集:这是Kaggle上的经典数据集,用于预测乘客是否幸存。 地址:Titanic - Machine Learning from Disaster | Kaggle 包含以下文件: train.csv:训练集&#…