【ECMAScript6】

news2025/2/26 5:21:09

【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要改一下)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

WebUI 部署 Ollama 可视化对话界面

文章目录 一、Node.js 安装1.系统环境查询2.官网下载nodejs 安装包3.安装 Node.js 并配置环境变量4.验证安装是否正确 二、ollama-webui 安装与配置1.代码库下载2.依赖安装3.运行 三、遇到问题与解决 一、Node.js 安装 1.系统环境查询 ubuntu20.04 系统,x86-64架构…

BMS应用软件开发 — 17 上下电控制与诊断开发 (Simulink)

目录 17.1 上下电控制流程 17.1.1 上下电流程 17.1.2 下电过程的电机放电 17.1.3 继电器状态检测 17.2 预充继电器状态判断 17.1 上下电控制流程 17.1.1 上下电流程 高压上电是指动力电池为车辆提供高压,使高压回路导通,为车辆的各个高压部件供电&…

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

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

005:Cesium.viewer 知识详解、示例代码

查看本专栏目录 - 本文是第 005个API内容详解 vue+cesium 示例教程200+目录 文章目录 一、Cesium.Viewer 知识详解1. 主要用途2. 构造函数与参数3. 常用属性(1)`viewer.scene`(2)`viewer.camera`(3)`viewer.entities`(4)`viewer.clock`4. 常用方法(1)`viewer.zoomTo(…

蓝桥杯单片机组第十二届省赛第二批次

前言 第十二届省赛涉及知识点:NE555频率数据读取,NE555频率转换周期,PCF8591同时测量光敏电阻和电位器的电压、按键长短按判断。 本试题涉及模块较少,题目不难,基本上准备充分的都能完整的实现每一个功能,并…

AI客服-接入deepseek大模型到微信(本地部署deepseek集成微信自动收发消息)

1.本地部署 1.1 ollama Ollama软件通过其高度优化的推理引擎和先进的内存管理机制,显著提升了大型语言模型在本地设备上的运行效率。其核心采用了量化技术(Quantization)以降低模型的计算复杂度和存储需求,同时结合张量并行计算&…

华为2025年技术发布会:智能汽车核心技术大爆发

近日,华为在鸿蒙智行尊界技术发布会上发布了多项智能汽车核心技术,涵盖智能驾驶、安全防护、通信系统、座舱交互及电池技术等领域,标志着其从“被动智能”向“自主智能”的战略升级。 以下是核心技术的综合梳理: 六大核心创新 途…

SeaCMS V9海洋影视管理系统报错注入

漏洞背景 SQL 注入攻击是当前网络安全中最常见的一种攻击方式,攻击者可以利用该漏洞访问或操作数据库,造成数据泄露或破坏。通常发生在开发人员未能正确处理用户输入时。 在 SeaCMS V9 中,用户输入(如登录、评论、分页、ID 等&a…

vue3父子组件props传值,defineprops怎么用?(组合式)

目录 1.基础用法 2.使用解构赋值的方式定义props 3.使用toRefs的方式解构props (1).通过ref响应式变量&#xff0c;修改对象本身不会触发响应式 1.基础用法 父组件通过在子组件上绑定子组件中定义的props&#xff08;:props“”&#xff09;传递数据给子组件 <!-- 父组件…

Django-Vue 学习-VUE

主组件中有多个Vue组件 是指在Vue.js框架中&#xff0c;主组件是一个父组件&#xff0c;它包含了多个子组件&#xff08;Vue组件&#xff09;。这种组件嵌套的方式可以用于构建复杂的前端应用程序&#xff0c;通过拆分功能和视图&#xff0c;使代码更加模块化、可复用和易于维…

Ollama部署本地大模型DeepSeek-R1-Distill-Llama-70B

文章目录 一、下模二、转模1. 下载转换工具2. 安装环境依赖3. llama.cpp1. 转换脚本依赖2. llama.cpp安装依赖包3. llama.cpp编译安装4. 格式转换 三、Ollama部署1. 安装启动Ollama2. 添加模型3. 测试运行 一、下模 #模型下载 from modelscope import snapshot_download model…

Zabbix问题记录2--踩坑HttpRequest,header添加无效

背景 在试图尝试通过Zabbix接入DeepSeek API的时候&#xff0c;由于使用了HTTP的方式&#xff0c;所以需要使用Zabbix 自带的HttpRequest库进行请求&#xff0c;产生了下面的问题 问题 curl curl -X POST https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completio…

Redis 集群的三种模式:一主一从、一主多从和多主多从

本文记述了博主在学习 Redis 在大型项目下的使用方式&#xff0c;包括如何设置Redis主从节点&#xff0c;应对突发状况如何处理。在了解了Redis的集群搭建和相关的主从复制以及哨兵模式的知识以后&#xff0c;进而想要了解 Redis 集群如何使用&#xff0c;如何正确使用&#xf…

网络工程知识笔记

1. 什么是网络&#xff1f; 网络是由多个节点&#xff08;如计算机、打印机、路由器等&#xff09;通过物理或逻辑连接组成的系统&#xff0c;用于数据的传输和共享。这些节点可以通过有线&#xff08;如以太网&#xff09;或无线&#xff08;如 Wi-Fi&#xff09;方式进行连接…

初识.git文件泄露

.git 文件泄露 当在一个空目录执行 git init 时&#xff0c;Git 会创建一个 .git 目录。 这个目录包含所有的 Git 存储和操作的对象。 如果想备份或复制一个版本库&#xff0c;只需把这个目录拷贝至另一处就可以了 这是一种常见的安全漏洞&#xff0c;指的是网站的 .git 目录…

政安晨【零基础玩转各类开源AI项目】DeepSeek 多模态大模型Janus-Pro-7B,本地部署!支持图像识别和图像生成

政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff01; 目录 下载项目 创建虚拟环境 安装项目依赖 安装 Gradio&#xff08;UI&#xff09; 运…

(六)趣学设计模式 之 代理模式!

目录 一、啥是代理模式&#xff1f;二、为什么要用代理模式&#xff1f;三、代理模式的实现方式1. 静态代理2. JDK动态代理3. CGLIB动态代理 四、三种代理的对比五、代理模式的优缺点六、代理模式的应用场景七、总结 &#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&a…

力扣LeetCode:1656 设计有序流

题目&#xff1a; 有 n 个 (id, value) 对&#xff0c;其中 id 是 1 到 n 之间的一个整数&#xff0c;value 是一个字符串。不存在 id 相同的两个 (id, value) 对。 设计一个流&#xff0c;以 任意 顺序获取 n 个 (id, value) 对&#xff0c;并在多次调用时 按 id 递增的顺序…

鸿蒙开发深入浅出03(封装通用LazyForEach实现懒加载)

鸿蒙开发深入浅出03&#xff08;封装通用LazyForEach实现懒加载&#xff09; 1、效果展示2、ets/models/BasicDataSource.ets3、ets/models/HomeData.ets4、ets/api/home.ets5、ets/pages/Home.ets6、ets/views/Home/SwiperLayout.ets7、后端代码 1、效果展示 2、ets/models/Ba…

DSP芯片C6678的SRIO及其中断跳转的配置

C6678SRIO读写测试门铃中断跳转测试 SRIO简述代码前言SRIO配置原始代码1.使能电源2.初始化SRIO回环修改 3.SRIO测试 Doorbell门铃中断1.初始化中断函数2.中断向量表建立3.中断向量表的链接 本博客基于创龙“678ZH产品线”的SRIO代码&#xff0c;部分参考于网友们的博客&#xf…