ES6总览

ECMAScript，是由 ECMA 国际标准化组织 制定的一套脚本语言的标准化规范，随着技术的发展，每年都会更新ECMAScript 的标准内容。

• 📅 2011 年发布 ECMAScript5.1，成为 ISO 国际标准，从而推动所有浏览器都支持。
• 📅 2015 年 发布 ECMAScript 6，简称 ES6、ECMAScript 2015。从此以后每年都有更新，如ES2016、ES2017，都泛称为**ES2015+**，或者ES6。

从时间上也能看出来，ES2015 是一次重要更新，标志着现代化浏览器的进步，主流的浏览器基本都已原生支持ES6。只是一些古老的浏览器、老设备，如IE、老的Android机器还是存在兼容性问题。于是出现了Babel（及Polyfill），在编译的时候把ES6语法转码到ES5，从而兼容更多浏览器。

…展开运算符

和剩余参数的语法形式相同，作用比较相似，只是顺序是相反的。剩余参数是合并，将多个参数合并到一个数组中。而扩展运算符是拆分展开，把数组、对象的可遍历成员展开（拷贝）到当前环境。

//剩余参数args，add方法就可以支持无限参数了
function add(...args) {
        let sum = 0;
        args.forEach(v => sum += v);
        return sum;
}
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)); 
//展开为多个参数，展开运算
console.log(...arr);

• 展开为多个参数：console.log(...arr)
• 合并/复制数组：let arr3 =[...arr1, ...arr2]
• 展开为对象属性：可用于合并对象，把对象的属性、方法合并（拷贝）出来。算是一种代码混入，不过只能“混入”自己具备的属性、方法，不包括原型链上的。

  let address = { country: 'china' };
  address.sendExpress = function () { }
  let family = { father: 'sam', mother: 'lisa' }
  //合并对象，复用代码
  let user = { age: 100, ...address, ...family }

Module模块

ES6的module模块，可以把复杂的JS拆分为不同的模块，实现模块化封装。一个模块就是一个独立的文件，一个脚本就是一个模块。模块可以相互引用，但必须通过exprot、import关键字来申明导出的接口、引入的接口。因为一个模块（文件）内部是一个独立的作用域，与外界无关。

• 🔸静态编译：模块的exprot、import都是在编译时执行，会优先执行。属于静态加载，不是运行态的。
• 🔸严格模式：模块始终是严格模式"use strict"，无需申明。
  • 变量必须先申明再使用，没了变量提升。
  • this为undefined，模块的顶级this指向undefined，而不是我们熟悉的全局window对象。
• 🔸模块作用域，模块的作用域只在模块内，外面无法访问。包括一个<script type="module">内部JS代码块也是如此。
  • 只有通过exprot、import申明的才可以外部访问，这有很好的保护作用。
• 🔸延迟执行：模块脚本是延迟的，效果类似 defer ，同其他资源一样并行加载。等HTML解析完成才会（顺序）执行，所以需注意顺序。支持async，异步脚本准备好后会立即执行。

• 在HTML中使用模块，需要 <script **type**="**module**"> 来申明，告诉浏览器这里要被当做模块来对待。包括内联代码、外部引用。

  <script type="module" src="./foo.js"></script>
  <script type="module">
        console.log(1)   //后输出
  </script>
  <script async type="module">
        console.log(2)  //async 先输出
  </script>

  export

  export 申明导出可以给外部访问的接口，可以是任意类型的变量、方法、类，支持任意多个，如export const max = 100;。

• export 的本质是通过接口名与模块内部变量之间，建立了一一对应的关系。

• export 可以在任何位置使用，一般推荐在最后的地方统一导出，比较清晰。注意由于模块是静态编译执行，只能放到顶级位置，不能在块级作用域里面。
• as 重命名
• 导入、导出合并使用，导出另一模块导入的接口，做一个中间商，实现了类似继承的效果。 ```javascript export let userInfo = { name: ‘sam’, age: 100, } let book = { id: ‘001’, price: 100, } function sayHi(name) { console.log(‘Hi!’, name); } export const MAX = 100; //统一导出，as重命名 export { book, sayHi as sayHello }

////// 导入、导出合并使用，把导入的转手导出 /////// export { max, book } from ‘./js/m-user.js’ export * from ‘./js/m-user.js’

<a name="oIVpW"></a>
## import
**import **从一个模块加载（导入）变量、函数、类：`import { max } from './js/m-user.js'`
- {**接收**}：用一个花括号包裹，接收的变量名称必须和导出时一致。
- 可以用as重命名。
- **url**文件：导入的文件url支持相对路径、绝对路径。也可以只是模块文件名，这时需要配置模块查找方式了。？怎么配置？❓
- **Singleton **模式：`import`模块的代码只会执行一次，同一个url文件只会第一次导入时执行代码。后续任何地方`import`都不会执行模块代码了，也就是说，`import`语句是 Singleton 模式的。
- **只读-共享**：模块导入的接口的是只读的，不能修改。当然引用对象的属性值是可以修改的，不建议这么干，**注意**模块是共享的，导出的是一个引用，修改后其他方也会生效。
- `import`具有提升效果，可以先消费，后导入，因为import是编译阶段执行的。
- `*`一次性整体加载模块中所有接口，到一个as指定的变量上，此时没有花括号。建议按需导出，不用`*`，这样有利于构建工具的优化，剔除没用到的代码。
```javascript
<script type="module" src="../js/f2.js"></script>
<script type="module">
        import { MAX } from './js/m-user.js';
    import { book, sayHello as sayHi } from './js/m-user.js';
        //整体加载，*一次全部导入到一个引用上
    import * as uall from './js/m-user.js';
    console.log(MAX, book);
    sayHi();
</script>

export default

import加载的时候必须指定模块中的名字，有一种不需要指定名字的方法——设置默认导出的变量：export **default** MAX;

• 导入时可以随意命名，此时不需要花括号。
• default只能用一次。
• 本质上就是输出一个叫做default的接口，把一个变量赋值给default。so，也可以显示的使用default。 ```javascript //** m-user.js *// //设置默认导出接口 const MAX =1000; export default MAX; //只能用一次 export { sayHi as default }

//** test.html *// //导出默认接口 import M from ‘./js/m-user.js’; import {default as MX} from ‘./js/m-user.js’;

<a name="LNyra"></a>
## import()"函数"
**import() **用于运行时动态加载一个模块，也支持加载非模块的脚本，可以用在任何地方。他是异步的，返回一个`Promise`对象，可以接`then()`，或者用`await`命令。功能类似Node.js 中的`require()`，区别就是`require()`是同步的。
```javascript
<!-- 动态加载不需要设置type="module" -->
<script>
    import('./js/m-user.js').then(m => {
        //获得module，所有导出的接口都在m上
        console.log(m.book)
        m.sayHello("baby");
    });
    async function dosth() {
        let obj = await import('./js/m-user.js');
        let { book } = await import('./js/m-user.js');
        console.log("book:", obj.book, book);
    }
    dosth();
</script>

require 和 import 的区别？

require 是 CommonJS 模块的语法，CommonJS 是Node.js 的模块机制，简称CJS。CommonJS 与ES6 的模块并不兼容，两者的作用类似，但用法还是有些差异的。

//// cm.js ////
function sayHi(name) {
  console.log('Hi!', name);
}
module.exports = {
  MAX: 100,
  sayHi
}
//// main.js ////
const cm = require('./cm.js')

参考资料

• ECMAScript 6 入门—阮一峰
• JavaScript 编程语言—模块