前端學習必備之ES6解構指派的常見用法

1.解構指派可以輕松擷取對象或者數組中的資料

var jsonData = {
  data: "111",
  data2: ["test","test2"],
　　
};

           

json中的資料就被輕松擷取；

2.解構複制可以交換變量

var a=1,b=2,c=3,d=4; 
[a,b,c,d]=[d,c,b,a];
console.log(a,b,c,d);

           

結果： a=4，b=3，c=2，d=1

指派的過程需要保證兩邊的資料格式比對

[a,b,c,d]=[d,c,b,];

d的值将為underfinded

3.對象的解構指派

let {obj, obj2 } = { obj: "666", obj2: "888" };
console.log(obj,obj2)           

結果，666，888

數組解構

讓我們一起先來看數組解構的基本用法：

let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3
let [d, [e], f] = [1, [2], 3] // 嵌套數組解構 d=1, e=2, f=3
let [g, ...h] = [1, 2, 3] // 數組拆分 g=1, h=[2, 3]
let [i,,j] = [1, 2, 3] // 不連續解構 i=1, j=3
let [k,l] = [1, 2, 3] // 不完全解構 k=1, l=2           

對象解構

接下來再讓我們一起看看對象解構的基本用法：

let {a, b} = {a: 'aaaa', b: 'bbbb'} // a='aaaa' b='bbbb'
let obj = {d: 'aaaa', e: {f: 'bbbb'}}
let {d, e:{f}} = obj // 嵌套解構 d='aaaa' f='bbbb'
let g;
(g = {g: 'aaaa'}) // 以聲明變量解構 g='aaaa'
let [h, i, j, k] = 'nice' // 字元串解構 h='n' i='i' j='c' k='e'           

使用場景

1.變量指派

我們先來看最基本的使用場景：變量指派，先來看我們在平時開發中是怎麼使用es5對變量指派的：

var data = {userName: 'aaaa', password: 123456}
var userName = data.userName
var password = data.password
console.log(userName)
console.log(password)
var data1 = ['aaaa', 123456]
var userName1 = data1[0]
var password1 = data1[1]
console.log(userName1)
console.log(password1)           

上面兩個例子是最簡單的例子，用傳統es5變量指派，然後調用，這麼寫的問題就是顯得代碼啰嗦，明明一行可以搞定的事情非要用三行代碼，來看看解構指派是怎麼幹的：

const {userName, password} = {userName: 'aaaa', password: 123456}
console.log(userName)
console.log(password)
const [userName1, password1] = ['aaaa', 123456]
console.log(userName1)
console.log(password1)           

相對于es5的文法是不是更加簡單明了，在資料量越大用解構指派的優勢越明顯

2.函數參數的定義

一般我們在定義函數的時候，如果函數有多個參數時，在es5文法中函數調用時參數必須一一對應，否則就會出現指派錯誤的情況，來看一個例子：

function personInfo(name, age, address, gender) {
  console.log(name, age, address, gender)
}
personInfo('william', 18, 'changsha', 'man')           

 上面這個例子在對使用者資訊的時候需要傳遞四個參數，且需要一一對應，這樣就會極易出現參數順序傳錯的情況，進而導緻bug，接下來來看es6解構指派是怎麼解決這個問題的：

function personInfo({name, age, address, gender}) {
  console.log(name, age, address, gender)
}
personInfo({gender: 'man', address: 'changsha', name: 'william', age: 18})           

這麼寫我們隻需要知道要傳什麼參數就行來，不需要知道參數的順序也沒問題

3.交換變量的值

在es5中我們需要交換兩個變量的值需要借助臨時變量的幫助，來看一個例子：

var a=1, b=2, c
c = a
a = b
b = c
console.log(a, b)           

來看es6怎麼實作：

let a=1, b=2;
[b, a] = [a, b]
console.log(a, b)           

是不是比es5的寫法更加友善呢？

4.函數的預設參數

在日常開發中，經常會有這種情況：函數的參數需要預設值，如果沒有預設值在使用的時候就會報錯，來看es5中是怎麼做的：

function saveInfo(name, age, address, gender) {
  name = name || 'william'
  age = age || 18
  address = address || 'changsha'
  gender = gender || 'man'
  console.log(name, age, address, gender)
}
saveInfo()           

在函數離 main先對參數做一個預設值指派，然後再使用避免使用的過程中報錯，再來看es6中的使用的方法：

function saveInfo({name= 'william', age= 18, address= 'changsha', gender= 'man'} = {}) {
  console.log(name, age, address, gender)
}
saveInfo()           

在函數定義的時候就定義了預設參數，這樣就免了後面給參數指派預設值的過程，是不是看起來簡單多了

5.提取 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]
           

6.周遊 Map 結構

任何部署了 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");