《深入理解ES6》學習筆記二
5. 解構:使資料訪問更便捷
- 為何使用解構功能
- 簡化區域性變數的賦值
- 為物件和陣列都添加了解構功能
- 使用var、let或const解構宣告變數,
- 需提供初始化程式
- 不能指定為null或undefined
- 以下語句將丟擲語法錯誤
//語法錯誤!
var {type, name};
let {type, name};
const {type, name};
物件解構
let code = {
type: "Identifier" ,
name: "foo"
};
//原賦值方法
let type = node.type;
name = node.name;
//新賦值方法
let {type, name} = node;
//同時設定預設值方法
let {type, name, value = true} = node;
//為非同名區域性變數賦值(localType和localName)
let { type: localType, name: localName } = node;
- 定義變數之後需要修改值
let code = {
type: "Identifier" ,
name: "foo"
};
type = node.type;
name = node.name;
//賦值方法
({type, name} = node);
- 巢狀物件解構(非同名)
let code = {
type: "Identifier",
name: "foo"
loc: {
start : {
line: 1,
column: 1
}
}
};
//提取node.loc.start,賦予物件localStart
let {loc: {start: localStart} } = node;
陣列解構
- 使用的是陣列字面量
- 解構操作全部在陣列內完成
let colors = [ "red", "green", "blue" ];
//可直接省略元素
let [ firstColor, secondColor ] = colors;
let [ , , thirdColor ] = colors
//使用預設值
let [ firstColor, secondColor, thirdColor, fourthColor = "black" ] = colors;
//不定元素
let [ firstColor, ...restColors ] = colors;
//克隆陣列
let [ ...cloneColors ] = colors;
//交換陣列
let a = 1;
b = 2;
[ a, b ] = [ b, a ];
- 混合解構
- 物件與陣列同時賦值
- 賦值經驗:
- 大括號內為物件,中括號內為陣列
- 最內層冒號為不同變數名賦值,外層為巢狀物件
6.Symbol和Symbol屬性(書中介紹較雜,此處轉symbol總結)
1、ES6引入了一種新的原始資料型別Symbol,表示獨一無二的值。它是JavaScript語言的第七種資料型別,前六種是:Undefined、Null、布林值(Boolean)、字串(String)、數值(Number)、物件(Object)。
2、Symbol值通過Symbol函式生成。這就是說,物件的屬性名現在可以有兩種型別,一種是原來就有的字串,另一種就是新增的Symbol型別。凡是屬性名屬於Symbol型別,就都是獨一無二的,可以保證不會與其他屬性名產生衝突。
3、注意,Symbol函式前不能使用new命令,否則會報錯。這是因為生成的Symbol是一個原始型別的值,不是物件。也就是說,由於Symbol值不是物件,所以不能新增屬性。基本上,它是一種類似於字串的資料型別。
Symbol函式可以接受一個字串作為引數,表示對Symbol例項的描述,主要是為了在控制檯顯示,或者轉為字串時,比較容易區分。
4、由於每一個Symbol值都是不相等的,這意味著Symbol值可以作為識別符號,用於物件的屬性名,就能保證不會出現同名的屬性。這對於一個物件由多個模組構成的情況非常有用,能防止某一個鍵被不小心改寫或覆蓋。Symbol值作為物件屬性名時,不能用點運算子。在物件的內部,使用Symbol值定義屬性時,Symbol值必須放在方括號之中。
5、Symbol例項:消除魔術字串
魔術字串指的是,在程式碼之中多次出現、與程式碼形成強耦合的某一個具體的字串或者數值。風格良好的程式碼,應該儘量消除魔術字串,該由含義清晰的變數代替。
function getArea(shape, options) {
var area = 0;
switch (shape) {
case 'Triangle': // 魔術字串
area = .5 * options.width * options.height;
break;
/* ... more code ... */
}
return area;
}
getArea('Triangle', { width: 100, height: 100 }); // 魔術字串
上面程式碼中,字串“Triangle”就是一個魔術字串。它多次出現,與程式碼形成“強耦合”,不利於將來的修改和維護。
常用的消除魔術字串的方法,就是把它寫成一個變數。
var shapeType = {
triangle: 'Triangle'
};
function getArea(shape, options) {
var area = 0;
switch (shape) {
case shapeType.triangle:
area = .5 * options.width * options.height;
break;
}
return area;
}
getArea(shapeType.triangle, { width: 100, height: 100 });
上面程式碼中,我們把“Triangle”寫成shapeType物件的triangle屬性,這樣就消除了強耦合。
如果仔細分析,可以發現shapeType.triangle等於哪個值並不重要,只要確保不會跟其他shapeType屬性的值衝突即可。因此,這裡就很適合改用Symbol值。
const shapeType = {
triangle: Symbol()
};
上面程式碼中,除了將shapeType.triangle的值設為一個Symbol,其他地方都不用修改。
6、有一個Object.getOwnPropertySymbols方法,可以獲取指定物件的所有 Symbol 屬性名。
Object.getOwnPropertySymbols方法返回一個數組,成員是當前物件的所有用作屬性名的 Symbol 值。
另一個新的API,Reflect.ownKeys方法可以返回所有型別的鍵名,包括常規鍵名和 Symbol 鍵名。
7、有時,我們希望重新使用同一個Symbol值,Symbol.for方法可以做到這一點。它接受一個字串作為引數,然後搜尋有沒有以該引數作為名稱的Symbol值。如果有,就返回這個Symbol值,否則就新建並返回一個以該字串為名稱的Symbol值。
Symbol.keyFor方法返回一個已登記的 Symbol 型別值的key。
摘自 https://www.cnblogs.com/zczhangcui/p/6435652.html
7.Set集合與Map集合
- ECMAScript6中的Set型別
- 是一種有序列表
- 含有相互獨立的非重複值,插入重複值時直接忽略
- 可以快速訪問其中的資料
- 支援has(key), delete(key), clear(), foreach()方法
- ECMAScript6中的Map型別
- 儲存鍵值對的有序列表
- 鍵名和對應的值支援所有的資料型別
- 鍵名等價性通過 Object.is()方法實現
- 支援has(key), delete(key), clear(), foreach()方法
11. Promise與非同步程式設計
- 回撥函式的侷限性
- 並行執行兩個非同步操作,當兩個操作都結束時通知你
- 同時進行兩個非同步操作,支取優先完成的操作結果
- 在這些情況下,需要跟蹤多個回撥函式並清理這些操作
let promise = readFile("example.txt");
promise.then(function(contents){
//完成
console.log(contents);
},function(err){
//拒絕
console.error(err.message);
});
//catch()方法,相當於只傳入拒絕處理程式的then()方法
promise.catch(function(err){
//拒絕
console.error(err.message);
});
- 建立Promise
- 使用Promise建構函式可以建立新的Promise
- 建構函式只接受一個引數:包含初始化Promise程式碼的執行器函式
- 執行器接受兩個引數
- 成功完成時呼叫的resolve()函式
- 失敗時呼叫的reject()函式
- 執行器接受兩個引數
- 呼叫resolve()後會觸發一個非同步操作
- 傳入then()和catch()方法的函式會被新增到任務佇列中並非同步執行
let promise = new Promise(function (resolve, reject){
console.log("Promise");
resolve();
})
promise.then(function() {
console.log("Resolved");
})
console.log("Hi!");
//輸出
Promise
Hi!
Resolved