学习笔记之-----ES6

什么是ECMAscript

ECMAscript的组成：javascript+dom+bom
ECMA欧洲计算机制造商协会制定了ECMAscript标准，ECMA-262
ECMAscript是ECMA组织制定的ECMA-262标准化下的一个脚本语言
TC39（ECMAscript发展委员会）在维护ECMA-262的标准，由各大浏览器产商组织而成的。

ES6简介

● ES6， 全称 ECMAScript 6.0 ，是一个泛指，含义是 JavaScript 的下一个版本标准，2015.06 发版。
● ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
● ES6是ECMAScript的升级版本，也就是说JavaScript的核心部分进行了升级，在ES6中不包含DOM和BOM操作。
● 我们在学习ES6课程内容中，包含了ES7/8/9/10/11的内容

ECMAScript的版本

第一版本 97年 基本语法
…
第五版本 09年 我们之前学习的JS语法
第六版本 15年 做出重大改变，加入新的语法特性
第七版本 16年 Array.includes() /Array.find()…Async/Await
第八版本 17年 Object.values()，Object.entries()…
第九版本 18年 for await of/命名捕获组
第十版本 19年 Array.flat()/Array.flatMap()/Object.fromEntries()…
第十一版本 20年

ES6做了哪些改变

● 语法方面
○ let
○ ()=>{}
○ …
● 功能方面
○ 数组扩展
○ 对象扩展
○ …
● 扩展方面
○ set/map
○ symbol
○ promise
○ …

环境对ES6的支持

浏览器对ES2015的支持情况
● Chrome：51 版起便可以支持 97% 的 ES6 新特性。
● Firefox：53 版起便可以支持 97% 的 ES6 新特性。
● Safari：10 版起便可以支持 99% 的 ES6 新特性。
● IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）
服务器对ES2015的支持情况
● Node.js：6.5 版起便可以支持 97% 的 ES6 新特性。（6.0 支持 92%）

模块化开发

将一些特定功能的方法组合实现一个模块。
● 维护性较高
○ 当你引入很多个JS文件的时候，很有可能会不清楚这些JS文件之间的依赖关系，从而导致加载顺序出错。使用模块化开发之后就能避免这个问题。
● 相互独立
○ JS本身是没有命名空间的，为了减少命名冲突，经常使用对象或者闭包来减少命名冲突。对象只能减少命名冲突的概率，闭包的过多使用会造成内存泄漏。模块化开发之后，在模块内任何形式的命名都不会和其他模块的命名产生冲突，有效的解决了命名冲突的问题。
● 代码复用
○ 当我们想要实现某个功能的时候，如果某个模块正好有这个功能，我们就可以直接引用该模块，不必再写多余的代码，这样可以提高代码整体的效率，减少重复冗余的代码。

node对模块化的支持

● node实现了CommonJS模块化
● node v13.2.0之前
○ 在package.json中配置：

{   
"type": "module",   
    "scripts": {     
        "start": "node --experimental-modules index.js"   
    }
}

● node v13.2.0之后
○ 只需要在package.json中配置：

{
"type": "module"
}

ES6之前的模块化（CommonJS、AMD、CMD）

● CommonJS
○ 它通过 require 来引入模块，通过 module.exports 定义模块的输出接口。这种模块加载方案是服务器端的解决方案（同步），node完成了对它的支持
● AMD
○ 采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行。require.js 实现了 AMD 规范。
○ 对浏览器端的异步加载尤其适用,是一个浏览器端模块化开发的规范。
● CMD
○ 和 AMD 方案都是为了解决异步模块加载的问题，sea.js 实现了 CMD 规范。
区别：
AMD是依赖前置，在定义模块的时候就要声明其依赖的模块。
CMD是就近依赖，只有在用到某个模块的时候再去require

ES6与CommonJS的区别

● CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
● CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取方法。这种加载称为“运行时加载”，
ES6模块化在代码编译阶段从fs模块加载需要的方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。

浏览器端对ES6模块化的支持

//1.在script标签中使用
<script type="module">
//模块的导入及使用
</script>  
//2.文件引入的方式
<script type="module" src="index.js"></script><!-- 入口文件 -->  

模块导出（export）

● 分别导出
● 统一导出
● 默认导出（export default）

模块导入（import）

● 通用导入
● 关于别名
● 解构导入
● 默认导入（export default）

CommonJS的模块化

// CommonJS模块 
 let { stat, exists, readfile } = require('fs');
 // 等同于如下代码块
 let _fs = require('fs'); 
 let stat = _fs.stat;
 let exists = _fs.exists; 
 let readfile = _fs.readfile; 

//模块导出（a.js）
module.exports = {
  firstName: 'Michael',
  lastName: 'vicky'
};
//模块导入(b.js)
const { firstName, lastName } = require('./testExports');
console.log(firstName, lastName);