当前位置：首页 > news >正文

ES6：基础使用，积累

news 2025/9/18 15:47:28

一、理解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]; let [a, b, c = 4] = [1, 2];
11		对象模型的结构	let {name, age} = {name: 'Tom', age: 20}; let {name = 'Tom', age = 20} = {name: 'Jack'}; let {name, age, scores: [math, english]} = {name: 'Tom', age: 20, scores: [80, 90]};
12		注意要点
13		常见用法
14	Symbol	概述	ES6 中新增了一种基本数据类型：Symbol。它是一种原始数据类型，用于表示独一无二的值，可以用来作为对象的属性名。
15		基本用法	// 定义一个Symbol值 let s = Symbol(); console.log(s); // 输出：Symbol() // 同一个文本描述的Symbol值是不同的 let s1 = Symbol('foo'); let s2 = Symbol('foo'); console.log(s1 === s2); // 输出：false Symbol内置的 Symbol 值在一些新的语言特性（如 for...of 循环、async/await）中有广泛应用。
16		使用场景	作为属性名 // Symbol 值可以作为对象属性名使用 let obj = {}; let s = Symbol(); obj[s] = 'value'; console.log(obj[s]); // 输出：valu
17		使用场景	定义常量
18		Symbol.for()	Symbol.for()是一个静态方法，可以创建并访问全局共享的symbol。当调用Symbol.for()时，会检查全局symbol注册表中是否已经存在具有给定键（字符串）的symbol。如果存在，则直接返回该symbol。如果不存在，则创建一个具有给定键并添加到全局注册表中的新symbol，然后返回该symbol。 const key1 = Symbol.for('myKey'); const key2 = 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对象	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() // 查找数组中符合条件的元素，返回第一个 2、findIndex() // 查找数组中符合条件的第一个元素的索引 3、fill() // 填充，将一定范围索引的数组元素内容填充为单个指定的值 3、copyWithin // 将一定范围索引的数组元素修改为此数组另一指定范围索引的元素 4、entries // 遍历键值对 5、keys // 遍历键名 6、values // 遍历键值 7、includes // 数组是否包含指定值 8、flat // 嵌套数组转唯一数组 9、flatMap // 先对数组中每个元素进行了的处理，再对数组执行 flat() 方法
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		decorator	方法修饰
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		Promise状态	缺点
4		then方法	特点
5		then方法	注意点
6	Generator	基本用法	函数组成
7			执行机制
8			返回的方法
9			yield表达式
10		使用场景
11	async	async	语法
12		async	返回值
13		await	语法
14		await	返回值
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新特性