ES6 自 2015 年推出已过了三年, 成熟使用也两年了。比如,const 和 let 定义、箭头函数、模块的导入和导出等,已经出现在我们日常的使用中,可以说并不陌生,但就系统的学习一直没开始。
最近在看《深入理解 ES6》这本书, 结合日常的使用, 系统梳理一下 (想到哪写到哪, 后续一直添加).
1. 块级作用域的出现以及变量定义的改变
块级作用域: 大括号包裹的部分形成的局部作用域.ES6 之前,JavaScript 只有两种作用域 – 全局作用域和局部作用域 (函数作用域), 大括号并非作用域的界定符, 而且具有变量提升的机制.ES6 推出后, 界定了块状作用域,let 和 const 定义也消除了变量提升.
ES6 之前, 变量在程序退出后或者函数执行完销毁变量;ES6 后, 程序执行到块级作用域外即销毁变量.
let 代替 var 用于定义变量, 重复定义时会报错.const 用于定义常量, 且必须初始化, 一旦设定后不可更改, 否则会报错.
书中推荐的最佳实践:默认使用 const 定义,只在需要改变的变量中使用 let 定义。
日常使用的感觉是定义变量变得简洁、高效,不需要担心变量重名和冗余了。
2. 模块的导出与导入
ES6 引入模块是为了解决作用域问题. 之前的脚本形式, 定义的作用域都是全局作用域; 现在的模块形式, 定义的是当前模块的的作用域, 将模块作用域和全局作用域区分出来, 让日益复杂的前端工程变得容易维护.
export 作为导出符, 可以导出变量、函数、类等。导出的方式包括导出声名(export var a=5;)、导出引用(var a=5;export a;)、导出重命名(export a as aaa)、还可以默认导入(export default)
import 作为导入符,可以单个导入(import {a} from ‘/example.js’), 多个导入(import {a,b} from ‘/example.js’)、导入整个模块(不常用)、导入时重命名、默认值导入(import a from‘、example.js’)
默认导入是 ES6 创建者推崇的导入方法, 具有语法纯净、简洁的特点。