前端开发必备——ES6

var 与 let/const

• var

1、允许在同一个作用域中重复声明
2、无法限制修改
3、没有块级作用域
4、非函数中声明变量挂载在window下
5、变量提升（访问在声明之前）

• let、const

1、不允许在同一个作用域中重复声明
2、let任意修改，const声明变量除了对象和数组，其他类型不能修改
3、存在块级作用域
4、声明变量不在window下
5、变量不提升

let、const 弥补 var 的缺陷，用于取代 var

解构赋值

针对数据类型：数组 与 对象

作用：编写代码更加精简

// 数组
let [a, b, c] = [1, 2, 3];
let [head, ...tail] = [1, 2, 3, 4];
tail //[2,3,4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

// 对象
let {name, age} = {
    name: '小米',
    age: 18,
    idcard: '440803200001121234'
}

变量重名的解决方案（数组没有变量重名问题）

let {name: go, age} = {
    name: '小米',
    age: 18,
    idcard: '440803200001121234'
}
console.log(go) // '小米'

默认值

// 数组
let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1] = [null]; // x为null

// 对象
var {x = 3} = {};
x // 3

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

注意：ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

模板字符串

作用：
1、空格 和 换行 都会保留下来，换句话说就是可以定义 多行字符串
2、嵌入变量或表达式（函数调用、算术运算）
3、模板字符串的变量之中，又嵌入了另一个模板字符串

let greeting = `\`Yo\` World!`;

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`  // 1 + 2 = 3

加载模块

加载模块 分为 静态模块加载 和 动态模块加载

在ES6之前，使用<script>标签加载脚本

<script src="path/to/myModule.js">                 // 同步加载
<script src="path/to/myModule.js" defer></script>  // 异步加载（渲染完再按页面出现顺序执行）
<script src="path/to/myModule.js" async></script>  // 异步加载（下载完就执行）

*注意：如果有多个defer脚本，会按照它们在页面出现的顺序执行，而多个async脚本是不能保证执行顺序的。
async加载的脚本是一种不依赖DOM操作和相对独立的脚本

在ES6之后，出现ES模块化规范，提供静态模块加载

• import 导入命令

特点：
1、import命令是“编译时加载”或者静态加载
2、具有提升效果，会提升到整个模块的头部，首先执行
3、多次重复执行同一句import语句（加载同一个模块），模块只会执行一次，而不会执行多次
4、import命令是 Singleton 模式。

语法：
import { foo, bar } from 'my_module';
import { foo as newName, bar } from 'my_module';  // 解决重名

• export 导出命令

• ES模块化 与 CommonJS模块化 区别

1、ES模块化是“编译时加载”，CommonJS模块化是“运行时加载”
2、CommonJS 模块就是对象，ES6 模块不是对象
3、ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高
4、export命令可以出现在模块的任何位置，只要处于模块顶层就可以；

• HTML 如何加载 ES 模块

<script src="../src/js/xxx.js" type="module" />
<script type="module">
    import tool from './src/js/xxx.js'
</script>

上面加载ES模块的方式，虽然可行，但在实际生产中，不会使用这种方式，因为 浏览器兼容性问题。加上 使用这种方式无法加载NPM安装的包。
现实生产环境中，一般是使用 babel 工具把 ES6模块 转成 ES5代码