ES6 提出了两个新的声明变量的命令：let 和 const 用于代替 var，使用 let 来声明可变变量，使用 const 来声明常量。对于全局环境下的常量，变量名可以使用纯大写加下划线的方式命名。let name = 'xiaoming';name = 'Jack';const PI_COUNT = 3.14;{ const lession = 'ES6 Wiki'; console.log(lession);}在选择 let 和 const 时，优先使用 const，尤其是在全局环境，不应该设置变量，只应设置常量。const 比 let 好的几个原因。不会对值产生副作用，也就是值被修改，告诉开发者此变量不能被修改；const 比较符合函数式编程思想，运算不改变值，只是新建值；JavaScript 编译器会对 const 进行优化，所以多使用 const，有利于提高程序的运行效率，也就是说 let 和 const 的本质区别，其实是编译器内部的处理不同。在作用域内声明的变量需要使用，如果下文没有用到就不要声明。// badconst name = 'xiaoming'; // 下文没有使用就不要定义了// goodconst name = 'xiaoming';console.log(name);

本节主要讲解了 ES6 提供了获取可枚举对象上的属性值的方法，这个方法可以很方便地获取对象上的属性值用于遍历。提高代码的简洁性。这里需要注意的是在获取属性值时会对属性为数值类型的键进行排序，所以对应的属性值也会跟着一起被排序，所以得到的结果会有所不同。

上一节 我们学习了 includes() 方法用于查找数组，但在数组中我们希望查找一个符合某个条件的元素，在 ES5 中有 filter 方法可以用于过滤符合条件的元素，但是 filter 返回的是一个数组，其实我们只想得到符合条件的值或者索引。本节将学习 ES6 的 find 和 findIndex 方法，丰富了数组查询的方法。

本节介绍 ES6 的数组的新增方法 Array.of() 该方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。Array.of() 主要是弥补数组构造函数 Array() 的不足。因为参数个数的不同，导致 Array() 的重载，Array.of 不存在由于参数不同而导致的重载，并且基本上可以用来替代 Array() 或 new Array()。

选项类型默认值描述–allowJsbooleanfalse允许编译 JavaScript 文件–allowSyntheticDefaultImportsbooleanfalse允许从没有设置默认导出的模块中默认导入–allowUnreachableCodebooleanfalse不报告执行不到的代码错误–allowUnusedLabelsbooleanfalse不报告未使用的标签错误–alwaysStrictbooleanfalse以严格模式解析并为每个源文件生成 "use strict" 语句--baseUrlstring解析非相对模块名的基准目录–charsetstring“utf8”输入文件的字符集–checkJsbooleanfalse在 .js 文件中报告错误，与 --allowJs 配合使用–declaration -dbooleanfalse生成相应的 .d.ts 文件–declarationDirstring生成声明文件的输出路径–diagnosticsbooleanfalse显示诊断信息–disableSizeLimitbooleanfalse禁用 JavaScript 工程体积大小的限制–emitBOMbooleanfalse在输出文件的开头加入BOM头（UTF-8 Byte Order Mark）–emitDecoratorMetadata[1]booleanfalse给源码里的装饰器声明加上设计类型元数据。查看 issue #2577 了解更多信息。–experimentalDecorators[1]booleanfalse启用实验性的ES装饰器–extendedDiagnosticsbooleanfalse显示详细的诊断信息–forceConsistentCasingInFileNamesbooleanfalse禁止对同一个文件的不一致的引用–help -h打印帮助信息–importHelpersstring从 tslib 导入辅助工具函数（比如 __extends， __rest等）–inlineSourceMapbooleanfalse生成单个 sourcemaps 文件，而不是将每 sourcemaps 生成不同的文件–inlineSourcesbooleanfalse将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性--init初始化 TypeScript 项目并创建一个 tsconfig.json 文件–isolatedModulesbooleanfalse将每个文件作为单独的模块（与 “ts.transpileModule” 类似）–jsxstring“Preserve”在 .tsx 文件里支持 JSX： “React” 或 “Preserve”。–jsxFactorystring“React.createElement”指定生成目标为 react JSX 时，使用的 JSX 工厂函数，比如 React.createElement 或 h–libstring[]编译过程中需要引入的库文件的列表。 可能的值为： ► ES5 ► ES6 ► ES2015 ► ES7 ► ES2016 ► ES2017 ► ES2018 ► ESNext ► ES5 ► ES5 ► ES5 ► ES5 ► ES5 ► ES5 ► DOM ► DOM.Iterable ► WebWorker ► ScriptHost ► ES2015.Core ► ES2015.Collection ► ES2015.Generator ► ES2015.Iterable ► ES2015.Promise ► ES2015.Proxy ► ES2015.Reflect ► ES2015.Symbol ► ES2015.Symbol.WellKnown ► ES2016.Array.Include ► ES2017.object ► ES2017.Intl ► ES2017.SharedMemory ► ES2017.String ► ES2017.TypedArrays ► ES2018.Intl ► ES2018.Promise ► ES2018.RegExp ► ESNext.AsyncIterable ► ESNext.Array ► ESNext.Intl ► ESNext.Symbol 注意：如果 --lib 没有指定默认注入的库的列表。默认注入的库为： ► 针对于 --target ES5：DOM，ES5，ScriptHost ► 针对于 --target ES6：DOM，ES6，DOM.Iterable，ScriptHost–listEmittedFilesbooleanfalse打印出编译后生成文件的名字–listFilesbooleanfalse编译过程中打印文件名–localestring(platform specific)显示错误信息时使用的语言，比如：en-us–mapRootstring为调试器指定指定 sourcemap 文件的路径，而不是使用生成时的路径。当 .map 文件是在运行时指定的，并不同于 js 文件的地址时使用这个标记。指定的路径会嵌入到 sourceMap 里告诉调试器到哪里去找它们–maxNodeModuleJsDepthnumber0node_modules 依赖的最大搜索深度并加载 JavaScript 文件,仅适用于 --allowJs–module -mstringtarget === “ES6” ? “ES6” : “commonjs”指定生成哪个模块系统代码： “None”， “CommonJS”， “AMD”， “System”， “UMD”， "ES6"或 “ES2015”。 ► 只有 "AMD"和 "System"能和 --outFile一起使用。 ► "ES6"和 "ES2015"可使用在目标输出为 "ES5"或更低的情况下。–moduleResolutionstringmodule === “AMD” or “System” or “ES6” ? “Classic” : “Node”决定如何处理模块。或者是 “Node” 对于 Node.js/io.js，或者是 “Classic”（默认)–newLinestring(platform specific)当生成文件时指定行结束符： "crlf"（windows）或 "lf"（unix）–noEmitbooleanfalse不生成输出文件–noEmitHelpersbooleanfalse不在输出文件中生成用户自定义的帮助函数代码，如 __extends–noEmitOnErrorbooleanfalse报错时不生成输出文件–noErrorTruncationbooleanfalse不截短错误消息–noFallthroughCasesInSwitchbooleanfalse报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）--noImplicitAnybooleanfalse在表达式和声明上有隐含的 any 类型时报错–noImplicitReturnsbooleanfalse不是函数的所有返回路径都有返回值时报错–noImplicitThisbooleanfalse当 this 表达式的值为 any 类型的时候，生成一个错误–noImplicitUseStrictbooleanfalse模块输出中不包含 “use strict” 指令–noLibbooleanfalse不包含默认的库文件（ lib.d.ts ）–noResolvebooleanfalse不把 /// <reference``> 或模块导入的文件加到编译文件列表–noStrictGenericChecksbooleanfalse禁用在函数类型里对泛型签名进行严格检查–noUnusedLocalsbooleanfalse若有未使用的局部变量则抛错–noUnusedParametersbooleanfalse若有未使用的参数则抛错--outDirstring重定向输出目录–outFilestring将输出文件合并为一个文件，合并的顺序是根据传入编译器的文件顺序和 ///<reference``> 和 import 的文件顺序决定的–skipDefaultLibCheckbooleanfalse忽略库的默认声明文件的类型检查–skipLibCheckbooleanfalse忽略所有的声明文件（ *.d.ts ）的类型检查--sourceMapbooleanfalse生成相应的 .map 文件–sourceRootstring指定 TypeScript 源文件的路径，以便调试器定位。当 TypeScript 文件的位置是在运行时指定时使用此标记, 路径信息会被加到 sourceMap 里--strictbooleanfalse启用所有严格类型检查选项–strictFunctionTypesbooleanfalse禁用函数参数双向协变检查–strictPropertyInitializationbooleanfalse确保类的非 undefined 属性已经在构造函数里初始化。若要令此选项生效，需要同时启用 --strictNullChecks--strictNullChecksbooleanfalse在严格的 null 检查模式下，null 和 undefined 值不包含在任何类型里，只允许用它们自己和 any 来赋值（有个例外， undefined 可以赋值到 void）–stripInternal[1]booleanfalse不对具有 /** @internal */ JSDoc注解的代码生成代码–suppressExcessPropertyErrors[1]booleanfalse阻止对对象字面量的额外属性检查–suppressImplicitAnyIndexErrorsbooleanfalse阻止 --noImplicitAny 对缺少索引签名的索引对象报错。查看 issue #1232 了解详情。--target <br> -tstring“ES3”指定ECMAScript目标版本 "ES3"（默认）， "ES5"， "ES6"/ "ES2015"， "ES2016"， "ES2017" 或 "ESNext"。 注意： "ESNext" 最新的生成目标列表为 ES proposed features–traceResolutionbooleanfalse生成模块解析日志信息–typesstring[]要包含的类型声明文件名列表–typeRootsstring[]要包含的类型声明文件路径列表--version <br> -v打印编译器版本号–watch -w在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。监视文件和目录的具体实现可以通过环境变量进行配置[1] 这些选项是试验性的

在开发中有时会遇到对多维数组进行拍平处理，数组的拍平就是将一个嵌套多层的数组进行降维操作，也就是对数值进行扁平化。然而在 ES5 是没有方法能处理这样的需求的，大部分都会借助函数库的方式来实现。本节我们要学习的是 ES6 提供的 flat() 方法，对多维数组进行扁平化操作，而且可以对数组中的空项进行移除。

上一节我们学习了使用 let 取代 var 声明变量，但是很多情况下，我们希望我们声明的变量不能被修改。在 ES5 中不能直接声明一个常量，如果想声明一个不可修改的变量需要借助 defineProperty 方法。ES6 为了弥补这方面的缺失，新增了 const 语句用于声明一个常量。本节我们还将学习到 let、 const 、 var 的区别。

所谓类数组对象，就是指可以通过索引属性访问元素，并且对象拥有 length 属性，类数组对象一般是以下这样的结构：var arrLike = { '0': 'apple', '1': 'banana', '2': 'orange', length: 3};在 ES5 中没有对应的方法将类数组转化为数组，但是可以借助 call 和 apply 来实现：var arr = [].slice.call(arrLike);// 或var arr = [].slice.apply(arrLike);有了 ES6 的 Array.from() 就更简单了，对类数组对象直接操作，即可得到数组。var arr = Array.from(arrLike);console.log(arr) // ['apple', 'banana', 'orange']

Webpack 是模块化打包工具，它兼容现在很多模块化加载方式，本节课程也主要使用 Webpack 的方式来学习 ES6 的模块化。Webpack 需要一定的学习成本可以在官网 上学习，这里就不进行介绍了，下面给出 webpack.config.js 的配置如下：let path = require("path");let HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = { entry: "./src/index.js", output: { filename: "bundle.js", }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' // 模版文件 }) ], module: { rules: [ { test: /\.js$/, use: { loader: "babel-loader", }, }, ], },};

这里指的常规方式是指函数声明、函数表达式或 ES6 中的箭头函数。使用 Function 创建的函数，最后一个参数，即函数体内在执行的时候作用域是在全局的。var num = 20;function fn() { var num = 10; var func = new Function('console.log(num)'); console.log(num); func();}fn();// 输出：// 10// 20这个例子在执行后，依次输出了 10 ，20 ，根据结果可以知道 new Function 创建的函数，在执行过程中，上层作用域是顶级的全局作用域，在浏览器下即为 window 。

JavaScript 是 ECMAScript（以下简称 ES） 的实现。ES 的版本非常多，各个浏览器的兼容情况也各不相同，所以一定要了解什么特性是不能在业务中直接使用的。许多公司在开新项目的同时，依然要继续维护老项目，老项目的整套体系又和现在的前端整个开发流程不同，可能缺少编译、polyfill 等来解决兼容性问题的方案。在老项目中，应避免去使用 ES6+ 的特性，用户的环境千变万化，完全不知道会用什么浏览器，这时候就考验开发者的能力了，在使用一些不确定的特性时，可以通过 CAN I USE 查看。一些新的 API 都会有对应的解决方案，如 includes 方法，就可以用 indexOf 代替，或者使用第三方工具库，如 lodash。var string = '123';console.log( string.includes('2'), // 输出：true);console.log( string.indexOf('2') > -1, // 输出：true);即便如此，开发中也难免会忘记，写惯了 ES6，可能一不小心就带了一个箭头函数上线了。这时候就可以通过 ESLint 这样的代码检查工具，来帮助检查，然后配合 Git 的钩子，在 commit 时跑 ESLint，能很大程度上规避掉这个问题。

ES6 很多 API 不能在低版本浏览器自己运行，另外我们在开发源码的时候需要大量地使用模块化，以拆分源码的结构。在学习模块化一节时，我们使用了 Webpack 作用打包工具，由于 Vue3 使用的是 rollup，更加适合框架和库的大包，这里我们也和 Vue3 看齐，rollup 最大的特点是按需打包，也就是我们在源码中使用的才会引入，另外 rollup 打包的结果不会产生而外冗余的代码，可以自己阅读。下面我们来看下 rollup 简单的配置：// rollup.config.jsimport babel from "rollup-plugin-babel";import serve from "rollup-plugin-serve";export default { input: "./src/index.js", output: { format: "umd", // 模块化类型 file: "dist/umd/reactivity.js", name: "VueReactivity", // 打包后的全局变量的名字 sourcemap: true, }, plugins: [ babel({ exclude: "node_modules/**", }), process.env.ENV === "development" ? serve({ open: true, openPage: "/public/index.html", port: 3000, contentBase: "", }) : null, ],};上面的配置内容和 webpack 很相似，是最基础的编译内容，有兴趣的小伙伴可以去了解一下。本节源码 在 ES6-Wiki 仓库的 vue-next 目录下，在这个项目中可以直接启动，在启动前需要在项目根目录中安装依赖。本项目使用的是 yarn workspace 的工作环境，可以在根目录中共享 npm 包。

本节通过 ES5 的字符串拼接中存在各种问题和繁琐性，引入了为什么 ES6 会有字符串模版的概念，总结字符串模版的使用有以下几点：可以对字符串进行拼接和多行字符串的处理；模板字符串中可以包含表达式，也可以进行逻辑运算；带标签的模板字符串可以把模板字符串的内容当作参数传递到函数中，进行复杂的逻辑。

ES6 提供了用于定义静态属性和方法的关键字 static ，静态方法调用时不需要实例化该类，所以就不能通过实例去调用，但可以使用类直接去调用。静态方法通常用于为一个应用程序创建工具函数，下面我们来看一个长方形类，定义一个获取长方形面积的静态方法。class Rectangle { constructor(width, height) { this.width = width; this.height = height; } static getArea(r) { return r.width * r.height; }}const r = new Rectangle(5, 10);console.log(Rectangle.getArea(r)); // 50

ES6 新增了 ... 的语法糖，主要用于展开语法和剩余语法中，本节先来说说展开语法。展开语法顾名思义可以理解为把整体展开成个体，在 ES5 中如果想把一个数组的内容拷贝到另一个数组中，可以使用 for 循环数组的每一项，然后添加到目标数组中去。但是如果使用展开语法就很方便地完成这个操作了。下面我们就来看看展开语法是如何使用的。

开发网页应用的时候，BOM 相关的属性和方法用到的比较多的就是定时器和获取窗口尺寸。window 下还有类似 parseInt、parseFloat 这样的数学相关的方法，但目前 ES6 标准将他们挪动到了 Number 下，也就是说可以通过 Number.parseInt 来调用，放到了本该属于他们的地方，但项目中如果要使用，推荐使用 shim 或者 polyfill，不然部分浏览器可能不支持。

在编程中使用最多的就是函数，在 ES5 中是用 function 关键字来定义函数的，由于历史原因 function 定义的函数存在一些问题，如 this 的指向、函数参数 arguments 等。ES6 规定了可以使用 “箭头” => 来定义一个函数，语法更加简洁。它没有自己的 this、arguments、super 或 new.target，箭头函数表达式更适用于那些本来需要匿名函数的地方，但它不能用作构造函数。

由于历史原因，在 JavaScript 创建之初，市面上的编码方式还是很混乱的，JavaScript 在创建之初，使用的是 1990 年公布的 UCS-2 的编码方法，使用 2 个字节表示 1 个字符，那时 UTF-8、UTF-16、UTF-32 还没有完全确定。现在的 JavaScript 主要使用的是 UTF-16 来存储的。但针对于纷繁复杂的网页字符是不能完全地覆盖的，在早期使用浏览器时，经常会在浏览器中选择字符串编码方式。那么有没有一种编码可以涵盖世界上的所有字符呢？答案是有的 ——Unicode。它是一个字符集，它的定义很简单，用一个码点 (code point) 映射一个字符。码点值的范围是从 U+0000 到 U+10FFFF，可以表示超过 110 万个符号。所以后来的 ECMAScript 一直致力于解决历史遗留的问题和统一浏览器的编码方式。这时 ES6 出来了，对 Unicode 进行了加强，也修复了 ES5 中的问题。在 模版字符串 的小节中已经学习了关于字符串模板字符串的内容，本节我们继续学习 ES6 中字符串其他的扩展。

export default 命令用来导出模块中默认变量或方法，上面我们也提到了使用 export 导出的是一个对象不能导出一个值类型。// a.jsexport default 'imooc';// main.jsimport name from './a.js'console.log(name); // imoocexport default 命令声明的函数可以是匿名的。export default function () { console.log('imooc');}// 等价function fn() { console.log('imooc');}export default fn;也可以是一个类：// a.jsexport default class { constructor() { console.log('imooc') } // ...}// main.jsimport A from './a';const a = new A();console.log(a)开可以导出的是一个对象：const obj = { name: 'imooc', getLession: function() { console.log('ES6 imooc'); }}export default obj;

在编程中遇到数学问题时一般会借助 Math 这个 JavaScript 的内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象，它主要用于 Number 类型。与其他全局对象不同的是，Math 不是一个构造器。Math 的所有属性与方法都是静态的。比如：圆周率的写法是 Math.PI，调用正余弦函数的写法是 Math.sin(x)，x 是要传入的参数。Math 的常量是使用 JavaScript 中的全精度浮点数来定义的。本节我们主要学习，ES6 对 Math 对象的扩展。

Babel 是一个 JavaScript 编译器。Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。Babel 由 Node.js 驱动，可以把 ES6+ 的代码编译成 ES5、ES3 的代码。配合插件和工具，Babel 还能处理一些非规范的语法，处理 JSX、TypeScript 等。使用 Babel，可以让开发者在开发环境享受新特性带来的优质的编码体验，又能让代码在生产环境兼容大部分浏览器或其他宿主环境，如 Node.js。

本节我们主要通过延续上一节的案例，用 async 函数给出了最优的解决方案，从而完善了整个异步演变的过程，让我们更加清晰地理解为什么会有 Promise？为什么会有生成器？为什么会有 async/await？由浅入深层层递进地讲解了 ES6 以后对异步任务处理的演变。然后我们主要学习了 async 函数的基本使用和错误处理的捕获。最后，我们讲解了如果不滥用 async 函数的案例，让我们在以后写程序的过程中更加得心应手。

JavaScript 中对象是非常重要的数据结构，ES6 对对象进行了极大的扩展，使用上也更加简洁。前面我们学习了 扩展语法 和 剩余参数 是对象扩展的其中的一部分，本节和后面几节会对 Object 的扩展进行系统的介绍。后面我们还会学到新的数据结构 Set 和 Map 也是对对象的扩展，另外，还有 Proxy 和 Reflect 也是对象的重大升级。本节主要学习以下几点简洁的属性表达属性名表达式方法的 name 属性可选链操作符

本节通过数组和字面量的拷贝引入了 ES6 的展开语法的优势，又说到了在函数传参时的应用，可以总结以下几点：可以把 ... 加数组或字面量当作数组或字面量中的一项，任意放入数组或字面量中不同的位置；可以通过展开语法对数组和字面量进行浅拷贝；在函数传参数直接把数组中的项进行展开就可以达到传递多个参数的目的。