ES6 學習筆記
1.let命令
1)let和var的區別:let聲明的變量只有所在的代碼塊有效。
2)沒有變量的提升,一定要聲明後使用。使用let命令聲明變量之前,該變量都是不可用的。形成“暫時性死區”。
3)typeof 不再是一個百分之百安全的操作。
2.塊級作用域
1)es5和es6比較:es5 只有全局作用域和函數作用域,沒有塊級作用域。
2)let實際上為javascript新增了塊級作用域
3)es6 允許塊級作用域的任意嵌套。
4)es5規定函數只能在頂層作用域和函數作用域之中聲明,不能在塊級作用域聲明,嚴格模式下會報錯。為ES5和es6環境避免報錯,應不要在塊級作用域裏聲明函數。
3.const命令
1)const
聲明一個只讀的常量。一旦聲明,常量的值就不能改變。const一旦聲明變量,就必須立即初始化,不能留到以後賦值。
2)其他特性和let類似
3)對於復合類型的變量,變量名不指向數據,而是指向數據所在的地址。const
命令只是保證變量名指向的地址不變,並不保證該地址的數據不變,所以將一個對象聲明為常量必須非常小心。
const foo = {}; foo.prop = 123; foo.prop // 123 foo = {}; //常量foo儲存的是一個地址,這個地址指向一個對象。不可變的只是這個地址,即不能把foo指向另一個地址,但對象本身是可變的,所以依然可以為其添加新屬性。
ES5只有兩種聲明變量的方法:var
命令和function
命令。ES6除了添加let
和const
命令,後面章節還會提到,另外兩種聲明變量的方法:import
命令和class
命令。所以,ES6一共有6種聲明變量的方法。
4.頂層對象的屬性
頂層對象,在瀏覽器環境指的是window
對象,在Node指的是global
對象。 ES6規定,為了保持兼容性,var
命令和function
命令聲明的全局變量,依舊是頂層對象的屬性;另一方面規定,let
命令、const
命令、class
命令聲明的全局變量,不屬於頂層對象的屬性。也就是說,從ES6開始,全局變量將逐步與頂層對象的屬性脫鉤。
var a = 1;// 如果在Node的REPL環境,可以寫成global.a // 或者采用通用方法,寫成this.a window.a // 1 let b = 1; window.b // undefined
5.解構賦值
1.數組得解構賦值
1)“模式匹配”為變量賦值;var [a, b, c] = [1, 2, 3];
2) 不完全解構,即等號左邊的模式,只匹配一部分的等號右邊的數組。
let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4
3)解構賦值不僅適用於var命令,也適用於let和const命令,對於Set結構,也可以使用數組的解構賦值。只要某種數據結構具有Iterator接口,都可以采用數組形式的解構賦值。
2.對象的解構賦值
1)對象的解構與數組有一個重要的不同。數組的元素是按次序排列的,變量的取值由它的位置決定;而對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。
var { bar, foo } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" var { baz } = { foo: "aaa", bar: "bbb" }; baz // undefined
2)變量名與屬性名不一致,必須寫成下面這樣。這實際上說明,對象的解構賦值是下面形式的簡寫。也就是說,對象的解構賦值的內部機制,是先找到同名屬性,然後再賦給對應的變量。真正被賦值的是後者,而不是前者。
//對象的解構賦值的內部機制,是先找到同名屬性,然後再賦給對應的變量。<br>var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }; var { foo: baz } = { foo: ‘aaa‘, bar: ‘bbb‘ }; baz // "aaa" let obj = { first: ‘hello‘, last: ‘world‘ }; let { first: f, last: l } = obj; f // ‘hello‘ l // ‘world‘
3)和數組一樣,解構也可以用於嵌套結構的對象
var obj = { p: [ ‘Hello‘, { y: ‘World‘ } ] }; var { p: [x, { y }] } = obj; x // "Hello" y // "World" //這時p是模式,不是變量,因此不會被賦值 var node = { loc: { start: { line: 1, column: 5 } } }; var { loc: { start: { line }} } = node; line // 1 loc // error: loc is undefined start // error: start is undefined let obj = {}; let arr = []; ({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true }); obj // {prop:123} arr // [true]
4)數組本質是特殊的對象,因此可以對數組進行對象屬性的解構
var arr = [1, 2, 3]; var {0 : first, [arr.length - 1] : last} = arr; first // 1 last // 3
3.字符串的解構賦值
1)字符串也可以解構賦值。這是因為此時,字符串被轉換成了一個類似數組的對象。
2)類似數組的對象都有一個length
屬性,因此還可以對這個屬性解構賦值。
const [a, b, c, d, e] = ‘hello‘; a // "h" b // "e" c // "l" d // "l" e // "o" let {length : len} = ‘hello‘; len // 5
4.數值和布爾值的解構賦值
解構賦值的規則是,只要等號右邊的值不是對象,就先將其轉為對象。由於undefined
和null
無法轉為對象,所以對它們進行解構賦值,都會報錯。
let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true let { prop: x } = undefined; // TypeError let { prop: y } = null; // TypeError
5.變量得解構賦值用途
1)交換變量的值。
[x,y]=[y,x];
2)從函數返回多個值
3)函數參數的定義,解構賦值可以方便地將一組參數與變量名對應起來。
// 參數是一組有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 參數是一組無次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});
4)提取json數據,解構賦值對提取json對象中的數據,尤其有用。
var jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309] //可以快速提取json中的數據的值。
5)函數參數的默認值
???????????? jQuery.ajax = function (url, { async = true, beforeSend = function () {}, cache = true, complete = function () {}, crossDomain = false, global = true, // ... more config }) { // ... do stuff };
6)遍歷map結構
任何部署了Iterator接口的對象,都可以用for...of
循環遍歷。Map結構原生支持Iterator接口,配合變量的解構賦值,獲取鍵名和鍵值就非常方便。
var map = new Map(); map.set(‘first‘, ‘hello‘); map.set(‘second‘, ‘world‘); for (let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is world // 獲取鍵名 for (let [key] of map) { // ... } // 獲取鍵值 for (let [,value] of map) { // ... }
7)輸入模塊的指定方法
加載模塊時,往往需要指定輸入那些方法。解構賦值使得輸入語句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");
ES6 學習筆記