ES6的理解
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’)