僅做個人學習交流
參考文章:http://es6.ruanyifeng.com
前提:
解構指派分為:數組、對象、字元串、數值和Boolean、函數參數;
解構指派就是将目标對象進行分解之後指派給聲明變量的一個過程;
解構所對應的是數組或者對象,如果不是的話,将會自動将其裝換為對象(數組是特殊的對象)進行結構;
解構的對象必須是具備 iterrator 接口的對象;
解構可以對複雜的嵌套結構進行解構;
解構過程中使用的大括号“{....}”不可以用于行首(會被 JavaScript 解析為塊級元素),需要通過圓括号進行隔離;
數組的解構指派:
1、數組的解構是通過 index 屬性進行的,有序的和聲明變量進行一一指派,聲明變量可以通過預設的(index)進行取值,也可以通過指定位置(屬性)進行擷取(将數組視為對象);
// 正常用法
let [x, , y] = [1, 2, 3];
x // 1
y // 3
// 對象用法
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
2、解構失敗之後将會指派:undefined;
3、變量值嚴格等于 undefined 的時候(直接指派或者解構失敗)會觸發預設值;
4、預設值可以是變量、常量、函數(函數為惰性函數,即:用到就運算,用不到就不運算)等;
對象的解構指派:
1、對象的取值必須通過完整的屬性名進行擷取;
2、繼承自父類的屬性也是可以擷取的;
3、預設值的使用和數組的注意點是一緻的;
4、其他類型的資料都是特殊類型的對象,是以對于其他資料的包裝類型都可以通過其屬性名進行取值;
字元創的解構指派:
1、字元串在被解構的時候會裝換為一個數組,指派的過程就和數組的操作是一緻的了。
數值和Boolean值得解構指派:
1、數值和Boolean值預設的包裝類型都是有tostring方法的,是以會優先轉換為對象進行解構;
2、undefined 和 null 由于無法轉換為包裝類型是以會報錯:TypeError Exception
函數參數的解構指派:
這個是講如何将解構之後的内容指派到函數參數中去。
1、函數中傳值的時候預設将傳遞參數進行解構,并對參數進行指派;
2、參數設定的時候是可以設定預設值的,可以對單獨的參數進行設值也可以對參數整體進行設值;
3、預設值得使用同數組的解構指派相同;
圓括号的使用:
因為圓括号的使用會導緻解析複雜度的升高,是以為了提升性能,在能不使用圓括号的情況下,盡可能的不用。
以下情況不能使用圓括号:
1、聲明語句中(函數的參數也屬于變量的聲明範疇);
2、指派語句中,圓括号會将指派語句進行分割;
總結:圓括号有分割區域的作用,任何可能會破壞原有模型結構的語句中都是不能是引用圓括号的。
可以使用的情況:
1、不改變原有模型結構的情況下,通俗講就是他不會破壞原有的結構:可以是結構整體放在圓括号中或者其他情況;
解構指派能用來做什麼?
1、交換變量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
2、接收函數傳回的值
// 傳回一個數組
function example() {
return [1, 2, 3];}let [a, b, c] = example();
// 傳回一個對象
function example() {
return {
foo: 1,
bar: 2
};}
let { foo, bar } = example();
3、函數參數的指派
// 參數是一組有次序的值
function f([x, y, z]) { ... }f([1, 2, 3]);
// 參數是一組無次序的值
function f({x, y, z}) { ... }f({z: 3, y: 2, x: 1});
4、從 json 資料中取值
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
5、設定函數參數的預設值
6、周遊 Map 類型的資料(同 json 資料的處理)(任何部署了 Iterator 接口的對象,都可以用for...of循環周遊。Map 結構原生支援 Iterator 接口,配合變量的解構指派,擷取鍵名和鍵值就非常友善。)
const 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");