ES6:基础使用,积累
一、理解ES6
ES6是ECMAScript 6.0的简称,也被称为ES2015。它是ECMAScript的第六个版本,是JavaScript标准的下一个重大更新。ES6于2015年6月发布,新增了许多新的语言特性和API,包括箭头函数、let和const关键字、模板字符串、解构赋值、展开运算符、类、模块化等等。ES6的新增特性让JavaScript语言更加强大和灵活,同时也让开发者编写代码更加的简便和高效。因此,学习和掌握ES6对于提高JavaScript编程能力和开发效率是非常重要的。
二、理解ECMAScript
JavaScript 是大家所了解的语言名称,但是这个语言名称是商标( Oracle 公司注册的商标)。因此,JavaScript 的正式名称是 ECMAScript 。1996年11月,JavaScript 的创造者网景公司将 JS 提交给国际化标准组织 ECMA(European computer manufactures association,欧洲计算机制造联合会),希望这种语言能够成为国际标准,随后 ECMA 发布了规定浏览器脚本语言的标准,即 ECMAScript。这也有利于这门语言的开放和中立。
三、浏览器可以直接使用ES6语法吗?
大部分现代浏览器已经支持ES6语法,但是一些旧版本的浏览器可能不支持或只支持部分ES6语法特性。为了确保兼容性,您可以使用Babel等工具将ES6代码转换为ES5代码,以便在旧版本的浏览器上运行。
四、ES6环境搭建,步骤
1、安装 Node.js:ES6 是在 Node.js 环境下运行的,因此需要先安装 Node.js。可以从官网下载对应平台的 Node.js 安装包进行安装。
2、安装 Babel:Babel 可以将 ES6 的代码转换成浏览器或者 Node.js 理解的代码,因此需要安装 Babel。可以使用以下命令进行安装:
npm install --save-dev @babel/core @babel/cli @babel/preset-env
3、 创建 Babel 配置文件:在项目的根目录下创建一个名为 .babelrc 的文件,并添加以下内容:
{"presets": ["@babel/preset-env"]
}
4、创建项目目录结构:创建一个名为 src 的文件夹,在其中添加一个名为 index.js 的文件,用于存放 ES6 代码。
5、编写 ES6 代码:在 index.js 文件中编写 ES6 代码。
6、使用 Babel 转换代码:在命令行中使用以下命令将 ES6 代码转换为浏览器或者 Node.js 可以理解的代码:
npx babel src --out-dir dist
其中,src 表示源代码目录,dist 表示编译后的代码目录。
在浏览器或者 Node.js 中运行编译后的代码:将编译后的代码复制到浏览器或者 Node.js 中运行即可。
ES6 教程 | 菜鸟教程
webpack打包转换es6_Webpack 杂篇_Airbnb爱彼迎的博客-CSDN博客
五、声明与表达式
| 序号 | 声明表达式 | ||
| 1 | let 与 const | let命令 | 基本用法 |
| 2 | 代码块内有效 | ||
| 3 | 不能重复声明 | ||
| 4 | 迭代计数使用 | ||
| 5 | 无变量提升 | ||
| 6 | const命令 | 基本用法 | |
| 7 | 暂时性死区 | ||
| 8 | 注意要点 | ||
| 9 | 解构赋值 | 概述 | ES6 的解构赋值是一种快速方便地从数组或对象中提取数据并赋值给变量的语法。它可以让我们将复杂数据结构拆解成简单的变量。 |
| 10 | 数组模型的结构 | let [a, b, c] = [1, 2, 3]; | |
| 11 | 对象模型的结构 | let {name, age} = {name: 'Tom', age: 20};
| |
| 12 | 注意要点 | ||
| 13 | 常见用法 | ||
| 14 | Symbol | 概述 | ES6 中新增了一种基本数据类型:Symbol。它是一种原始数据类型,用于表示独一无二的值,可以用来作为对象的属性名。 |
| 15 | 基本用法 | // 定义一个Symbol值 // 同一个文本描述的Symbol值是不同的
Symbol内置的 Symbol 值在一些新的语言特性(如 for...of 循环、async/await)中有广泛应用。 | |
| 16 | 使用场景 | 作为属性名 // Symbol 值可以作为对象属性名使用 let obj = {}; | |
| 17 | 定义常量 | ||
| 18 | Symbol.for() | Symbol.for()是一个静态方法,可以创建并访问全局共享的symbol。当调用Symbol.for()时,会检查全局symbol注册表中是否已经存在具有给定键(字符串)的symbol。如果存在,则直接返回该symbol。如果不存在,则创建一个具有给定键并添加到全局注册表中的新symbol,然后返回该symbol。 const key1 = Symbol.for('myKey'); console.log(key1 === key2); // true 在这个例子中,我们使用相同的键('myKey')两次调用Symbol.for()。第一次调用创建了一个新的具有该键的symbol,并将其添加到全局注册表中,而第二次调用则直接返回之前创建的同一个symbol。因此,key1和key2相等,console.log语句的输出为true。 当需要创建全局共享的symbol或在代码的不同部分访问已经创建的symbol时,Symbol.for()会非常有用。 | |
| 19 | Symbol.keyFor() | ES6 的 Symbol.keyFor() 方法返回一个已注册的 Symbol 类型值的字符串键。它接受一个Symbol类型值作为参数,并在全局 Symbol 注册表中搜索该值,如果找到则返回该 Symbol 对应的键值(即字符串),否则返回 undefined。这个方法与 Symbol.for() 相反,该方法是通过已知符号返回符号的键,而 Symbol.for() 则是通过键返回符号。使用 Symbol.keyFor() 方法可以方便的找到一个 Symbol 对应的键,这在代码维护和调试时非常有用。 | |
| 20 | Symbol.iterator() | 用来表示一个对象是否可迭代 | |
| 21 | Symbol.asyncIterator() | 用来表示一个对象是否可异步迭代 | |
六、内置对象
| 序号 | 内置对象 | |||
| 1 | 新增 | Map与Set | Map对象 | Map中的Key |
| 2 | Map迭代 | |||
| 3 | Map对象的操作 | |||
| 4 | Set对象 | 类型转换 | ||
| 5 | Set对象的作用 | |||
| 6 | Map与Set对象属性与方法 | |||
| 7 | Proxy与Reflect | 概述 | ||
| 8 | 基本用法 | Proxy | ||
| 9 | Reflect | |||
| 10 | 组合使用 | |||
| 11 | 使用场景拓展 | |||
| 12 | 拓展 | 字符串 | 拓展的方法 | 子串的识别 |
| 13 | 字符串重复 | |||
| 14 | 字符串补全 | |||
| 15 | 模板字符串 | 基本用法 | ||
| 16 | 注意要点 | |||
| 17 | 标签模板 | |||
| 18 | 数值 | 数值的表示 | ||
| 19 | 常量 | |||
| 20 | 方法 | |||
| 21 | Math对象的拓展 | |||
| 22 | 对象 | 对象字面量 | ||
| 23 | 对象的拓展运算符 | |||
| 24 | 对象的新方法 | assign | ||
| 25 | is | |||
| 26 | 数组 | 数组的创建 | 1、Array.of() // 将参数中所有值作为元素形成数组 2、Array.from() // 将类数组对象或可迭代对象转化为数组 3、转换map 4、转化set 5、转换字符串 | |
| 27 | 拓展的方法 | 1、find() // 查找数组中符合条件的元素,返回第一个 | ||
| 28 | 数组缓冲区 | 1、数组缓冲区是内存中的一段地址 2、定型数组的基础 3、实际字节数在创建时确定,之后只可修改其中的数据,不可修改大小 4、可以通过构造函数创建数组缓冲区 | ||
| 29 | 定型数组 | 1、数组缓冲区的特定类型的视图 2、可以强制使用特定的数据类型,而不是使用通用的 DataView 对象来操作数组缓冲区 | ||
| 30 | 拓展运算符 | let arr = [1, 2] arr1 = [...arr] console.log(arr1) // [1, 2] | ||
七、运算符与语句
| 序号 | 运算符与语句 | ||
| 1 | 函数 | 函数参数的拓展 | 默认参数 |
| 2 | 不定参数 | ||
| 3 | 箭头函数 | 基本用法 | |
| 4 | 注意要点 | ||
| 5 | 适合使用的场景 | ||
| 6 | 不适合使用的场景 | ||
| 7 | 迭代器 | iterator | 迭代过程 |
| 8 | 可迭代的数据结构 | ||
| 9 | 普通对象不可迭代 | ||
| 10 | for ... of 循环 | 迭代常规数据类型 | |
| 11 | 可迭代的数据结构 | ||
| 12 | let、const、和var用于for ... of | ||
| 13 | class类 | 概述 | |
| 14 | 基本用法 | 类定义 | |
| 15 | 类的主体 | ||
| 16 | 类的实例化 | ||
| 17 | decorator | 类装饰 | |
| 18 | 方法修饰 | ||
| 19 | 封装与继承 | get/setter | |
| 20 | extends | ||
| 21 | super | ||
| 22 | 注意要点 | ||
| 23 | 模块 | 概述 | |
| 24 | 特点 | ||
| 25 | export 与 import | 基本用法 | |
| 26 | as的用法 | ||
| 27 | import 命令的特点 | ||
| 28 | export default命令 | ||
| 29 | 复合使用 | ||
八、异步编程
| 异步编程 | |||
| 1 | Promise ES6:promise简单学习_snow@li的博客-CSDN博客 | 概述 | |
| 2 | Promise状态 | 特点 | |
| 3 | 缺点 | ||
| 4 | then方法 | 特点 | |
| 5 | 注意点 | ||
| 6 | Generator | 基本用法 | 函数组成 |
| 7 | 执行机制 | ||
| 8 | 返回的方法 | ||
| 9 | yield表达式 | ||
| 10 | 使用场景 | ||
| 11 | async | async | 语法 |
| 12 | 返回值 | ||
| 13 | await | 语法 | |
| 14 | 返回值 | ||
| 15 | 错误处理 | ||
| 16 | 注意要点 | ||
| 17 | 实例 | ||
九、实践
十、过程记录
十一、欢迎交流指正,关注我,一起学习
十二参考链接
ES6:flat()_es6 flat_snow@li的博客-CSDN博客
ES6:promise简单学习_snow@li的博客-CSDN博客
百度安全验证
https://www.cnblogs.com/anding/p/16890716.html
Object.assign详解_guxin_duyin的博客-CSDN博客
1.1 ES6 教程 | 菜鸟教程 (runoob.com)
JS数组reduce()方法详解及高级技巧 - 简书
es6新特性有哪些-常见问题-PHP中文网
一文告诉你es6新特性有哪些 - 动力节点
ES 6 新特性汇总(一图全览) - 知乎
最全的—— ES6有哪些新特性?_admin_zlj的博客-CSDN博客_es6新特性
相关文章:
ES6:基础使用,积累
一、理解ES6 ES6是ECMAScript 6.0的简称,也被称为ES2015。它是ECMAScript的第六个版本,是JavaScript标准的下一个重大更新。ES6于2015年6月发布,新增了许多新的语言特性和API,包括箭头函数、let和const关键字、模板字符串、解构赋…...
Android端上传文件到Spring Boot后端
准备 确定好服务器端文件保存的位置确定好请求参数名(前后端要保持一致的喔)如果手机是通过usb连接到电脑的,需要执行一下: adb reverse tcp:8080 tcp:8080 AndroidManifest.xml的<application/>节点中加上: android:usesC…...
使用GGML和LangChain在CPU上运行量化的llama2
Meta AI 在本周二发布了最新一代开源大模型 Llama 2。对比于今年 2 月发布的 Llama 1,训练所用的 token 翻了一倍,已经达到了 2 万亿,对于使用大模型最重要的上下文长度限制,Llama 2 也翻了一倍。 在本文,我们将紧跟趋…...
微服务基础理论
微服务简介 微服务Microservices之父,马丁.福勒,对微服务大概的概述如下: 就目前而言,对于微服务业界并没有一个统一的、标准的定义(While there is no precise definition of this architectural style ) 。但通在其…...
《向量数据库指南》:向量数据库Pinecone管理数据教程
目录 连接到索引 指定索引端点 调用whoami以检索您的项目名称。 描述索引统计信息 获取向量 更新向量 完整更新 ℹ️注意 部分更新 ⚠️注意 ℹ️注意 删除向量...
以深度为基础的Scikit-learn: 高级特性与最佳实践
Scikit-learn是一个广受欢迎的Python库,它用于解决许多机器学习的问题。在本篇文章中,我们将进一步探索Scikit-learn的高级特性和最佳实践。 一、管道机制 Scikit-learn的Pipeline类是一种方便的工具,它允许你将多个步骤(如数据…...
Autosar MCAL-S32K324Dio配置-基于EB
文章目录 DioPost Build Variant UsedConfig VariantDioConfigDioPortDioChannelDioChannelGroupDioConfigDio Development Error DetectSIUL2 IP Dio Development Error DetectDio Version Info ApiDio Reverse Port BitsDio Flip Channel ApiDio Rea...
【Spring Boot】单元测试
单元测试 单元测试在日常项目开发中必不可少,Spring Boot提供了完善的单元测试框架和工具用于测试开发的应用。接下来介绍Spring Boot为单元测试提供了哪些支持,以及如何在Spring Boot项目中进行单元测试。 1.Spring Boot集成单元测试 单元测试主要用…...
Flink CEP (一)原理及概念
目录 1.Flink CEP 原理 2.Flink API开发 2.1 模式 pattern 2.2 模式 pattern属性 2.3 模式间的关系 1.Flink CEP 原理 Flink CEP内部是用NFA(非确定有限自动机)来实现的,由点和边组成的一个状态图,以一个初始状态作为起点&am…...
vue3+taro+Nutui 开发小程序(二)
上一篇我们初始化了小程序项目,这一篇我们来整理一下框架 首先可以看到我的项目整理框架是这样的: components:这里存放封装的组件 custom-tab-bar:这里存放自己封装的自定义tabbar interface:这里放置了Ts的一些基本泛型,不用…...
Transformer 模型实用介绍:BERT
动动发财的小手,点个赞吧! 在 NLP 中,Transformer 模型架构是一场革命,极大地增强了理解和生成文本信息的能力。 在本教程[1]中,我们将深入研究 BERT(一种著名的基于 Transformer 的模型)&#…...
Spring详解(学习总结)
目录 一、Spring概述 (一)、Spring是什么? (二)、Spring框架发展历程 (三)、Spring框架的优势 (四)、Spring的体系结构 二、程序耦合与解耦合 (一&…...
【JavaEE】Spring中注解的方式去获取Bean对象
【JavaEE】Spring的开发要点总结(3) 文章目录 【JavaEE】Spring的开发要点总结(3)1. 属性注入1.1 Autowired注解1.2 依赖查找 VS 依赖注入1.3 配合Qualifier 筛选Bean对象1.4 属性注入的优缺点 2. Setter注入2.1 Autowired注解2.2…...
【基于CentOS 7 的iscsi服务】
目录 一、概述 1.简述 2.作用 3. iscsi 4.相关名称 二、使用步骤 - 构建iscsi服务 1.使用targetcli工具进入到iscsi服务器端管理界面 2.实现步骤 2.1 服务器端 2.2 客户端 2.2.1 安装软件 2.2.2 在认证文件中生成iqn编号 2.2.3 开启客户端服务 2.2.4 查找可用的i…...
解决安装依赖时报错:npm ERR! code ERESOLVE
系列文章目录 文章目录 系列文章目录前言一、错误原因二、解决方法三、注意事项总结 前言 在使用 npm 安装项目依赖时,有时会遇到错误信息 “npm ERR! code ERESOLVE”,该错误通常发生在依赖版本冲突或者依赖解析问题时。本文将详细介绍出现这个错误的原…...
98、简述Kafka的rebalance机制
简述Kafka的rebalance机制 consumer group中的消费者与topic下的partion重新匹配的过程 何时会产生rebalance: consumer group中的成员个数发生变化consumer 消费超时group订阅的topic个数发生变化group订阅的topic的分区数发生变化 coordinator: 通常是partition的leader节…...
【人工智能】监督学习、分类问题、决策树、信息增益
文章目录 Decision Trees 决策树建立决策树分类模型的流程如何建立决策树?决策树学习表达能力决策树学习信息论在决策树学习中的应用特征选择准则一:信息增益举例结论不足回到餐厅的例子从12个例子中学到的决策树:Decision Trees 决策树 什么是决策树 —— 基本概念 非叶节…...
Pytorch迁移学习使用Resnet50进行模型训练预测猫狗二分类
目录 1.ResNet残差网络 1.1 ResNet定义 1.2 ResNet 几种网络配置 1.3 ResNet50网络结构 1.3.1 前几层卷积和池化 1.3.2 残差块:构建深度残差网络 1.3.3 ResNet主体:堆叠多个残差块 1.4 迁移学习猫狗二分类实战 1.4.1 迁移学习 1.4.2 模型训练 1.…...
HTML与XHTML的不同和各自特点
HTML和XHTML都是用于创建Web页面的标记语言。HTML是一种被广泛使用的标记语言,而XHTML是HTML的严格规范化版本。在本文中,我们将探讨HTML与XHTML之间的不同之处,以及它们各自的特点。 HTML与XHTML的不同之处 HTML和XHTML之间最大的不同在于它…...
微服务如何治理
微服务远程调用可能有如下问题: 注册中心宕机; 服务提供者B有节点宕机; 服务消费者A和注册中心之间的网络不通; 服务提供者B和注册中心之间的网络不通; 服务消费者A和服务提供者B之间的网络不通; 服务提供者…...
多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言:多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时,基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套:跨云网络构建数据…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程,并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令,把数据流转换成Message,状态转变流程是:State::Created 》 St…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行! sudo su - 1. CentOS 系统: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)
本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...
Kafka主题运维全指南:从基础配置到故障处理
#作者:张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1:主题删除失败。常见错误2:__consumer_offsets占用太多的磁盘。 主题日常管理 …...
