前端開發常用es6知識總結
專案開發中一些常用的es6知識,主要是為以後分享小程式開發、node+koa專案開發以及vueSSR(vue服務端渲染)做個前置鋪墊。
專案開發常用es6介紹(點選檢視詳細)
- 4、async await語法
-
4、模組化 module export和import (正在更新...)
-
5、解構賦值、字串模板 (正在更新...)
-
……
let const
es6新增了let和const命令,用法類似於var。對於三者的異同見下表格:
宣告 | 重複宣告 | 變數提升 | |
---|---|---|---|
var | 變數 | 可以 | 存在 |
let | 變數 | 不可以 | 不存在 |
const | 常量 | 不可以 | 不存在 |
對於var不過多解釋,let用於宣告變數const用於宣告常量。常量即是不可改變的量,一旦宣告,常量的值就不能改變。所以使用const,就必須立即初始化,不能留到以後賦值(當然如果只宣告不賦值的話瀏覽器也會報錯)。
let和const在相同的作用域內是不能重複宣告的,如下示例:
// 報錯,重複宣告 function func() { let a = 10; let a = 1; } function func(arg) { let arg; // 報錯,函式傳參實際上也是定義了一個變數arg { let arg; // 不報錯,因為函式引數和let宣告的變數不在同一個作用域(程式碼塊)內 let aaa; } console.log(aaa) // aaa is not defined } //第二個示例說明了let宣告的變數只在它所在的程式碼塊有效,const同樣如此
var命令會發生”變數提升“現象,即變數可以在宣告之前使用。而let和const所宣告的變數常量一定要在聲明後使用,否則報錯。
// var 的情況 console.log(foo); // 輸出undefined var foo = 2; // let 的情況 console.log(bar); // 報錯ReferenceError let bar = 2; //const同樣如此
塊級作用域
塊級作用域即是將程式碼寫在{}裡,是一個語句且沒有返回值。
function f1() { let n = 5; if (true) { let n = 10; } console.log(n); // 5 } //如果將let都改成var會列印10,這表示es6塊級作用域外層程式碼塊不受內層程式碼塊的影響
補充
const實際上保證的並不是變數的值不得改動,而是變數指向的那個記憶體地址所儲存的資料不得改動。如果不太明白這句話的具體意思就一起來補一補js的基礎知識了:資料型別。
這裡就做個簡要介紹,大神可以略過。
js資料型別可以分類基本資料型別(Number、String 、Boolean、Null和Undefined)和引用資料型別(Object 、Array)。
當我們定義一個變數的時候,系統會給這個變數分配一塊記憶體。如果該變數是基本資料型別那麼定義的資料就會儲存在該記憶體中。但是!!注意這個但是!!!如果該變數是引用資料型別,那麼該記憶體中儲存的就不是定義的資料了,而是一個指標,這個指標指向另一個地址,資料就儲存在這個指標所指向的地址裡。
所以,對於引用型別資料而言,const只能保證記憶體中存放的指標不發生變化,不關心這個指標指向的地址裡面的資料有沒有變化。
const a = 1; const a = 2; // 報錯 const arr = [1, 2, 3]; arr[0] = 9; arr // [9,2,3]
基本資料型別和引用資料型別區別的程式碼示例:
const a = 1; const b = 1; a == b // true 基本資料型別只做值的比較 //--------------------------- const arr1 = [1, 2, 3]; const arr2 = [1, 2, 3]; arr1 == arr2 //false 雖然值是一樣的,但是在定義的時候分配的記憶體中的指標不一樣,引用型資料不僅比較值也會比較指標,指標即地址 //--------------------------- const arr3 = [1, 2, 3]; let arr4; arr4 = arr3; arr4[0] = 999; arr3 //[999,2,3] 賦值的時候將arr3的指標和值都賦給了arr4,所以arr3和arr4共用一個指標,指向同一個地址,所以……