5個實用JS解構用法

1. 交換變量

通常交換兩個變量的方法需要一個額外的臨時變量,來看看例子：

let a = 1; let b = 2; let temp; temp = a; a = b; b = temp; a; // => 2 b; // => 1 

temp是一個臨時變量，它先保存a的值。然后把b的值賦值給a，接着將temp值賦給 b。

如果使用解構的方式會更簡單，不需要什么鬼的 temp 變量。

let a = 1; let b = 2; [a, b] = [b, a]; a; // => 2 b; // => 1 

[a，b] = [b，a]是解構賦值，右邊，創建了一個數組[b, a]，即[2,1]。這個數組2被賦值了給a，1被賦值給了b。

雖然這種方式也創建了臨時數組，但這種方式給看起來至少更簡潔，使用解構咱們還可以交換2個以上的變量。

let zero = 2; let one = 1; let two = 0; [zero, one, two] = [two, one, zero]; zero; // => 0 one; // => 1 two; // => 2

 

2. 訪問數組中元素

有種場景，咱們可能有一個為空的項數組。並且希望訪問數組的第一個、第二個或第n個項，但如果該項不存在，則使用指定默認值。

通常會使用數組的length屬性來判斷

const colors = [];

let firstColor = 'white'; if (colors.length > 0) { firstColor = colors[0]; } firstColor; // => 'white' 

使用數組解構，可以更簡潔的實現同樣的效果：

const colors = [];

const [firstColor = 'white'] = colors; firstColor; // => 'white' 

const [firstColor = 'white'] = colors 解構將colors數組的第一個元素賦給firstColor變量。如果數組在索引0處沒有任何元素，則分配“white”默認值。

當然還可以更靈活，如果只想訪問第二個元素，可以這么做。

const colors = []; const [, secondColor = 'black'] = colors; secondColor; // => 'black' 

注意解構左側的逗號：它表示忽略第一個元素,secondColor使用colors數組中索引為1的元素進行賦值。

 

3.不可變操作

當我開始使用react和Redux時，被迫編寫了一些遵守不可變性的代碼。雖然一開始有些困難，但后來我看到了它的好處:更容易處理單向數據流。

不變性要求不能改變原始對象。幸運的是，解構可以以不可變的方式輕松實現某些操作。

const numbers = [1, 2, 3]; const [, ...fooNumbers] = numbers; fooNumbers; // => [2, 3] numbers; // => [1, 2, 3] 

解構 [, ... fooNumbers] = numbers創建一個新的數組fooNumbers，fooNumbers 包含 numbers 元素，除了第一個元素。

numbers 數組沒有發生變化，保持操作不變性。

以同樣不可變的方式，可以從對象中刪除屬性，接着試着從對象big中刪除foo屬性：

const big = { foo: 'value Foo', bar: 'value Bar' }; const { foo, ...small } = big; small; // => { bar: 'value Bar' } big; // => { foo: 'value Foo', bar: 'value Bar' }

 

4.解構 iterables

在前面幾個例子中，對數組使用了解構，但是咱們可以對任何實現可迭代協議( iterable protocol)的對象進行解構。

許多原生基本類型和對象都是可迭代的: array, string, typed arrays, set 和 map。

如果不想局限於基本類型，通過實現可迭代協議，可以定制解構邏輯。

movies包含一個movie對象列表。在解構movies時，將title作為字符串獲取是非常棒的。讓咱們實現一個自定義迭代器。

const movies = { list: [ { title: 'Heat' }, { title: 'Interstellar' } ], [Symbol.iterator]() { let index = 0; return { next: () => { if (index < this.list.length) { const value = this.list[index++].title; return { value, done: false }; } return { done: true }; } }; } }; const [firstMovieTitle] = movies; console.log(firstMovieTitle); // => 'Heat' 

movies對象通過定義Symbol.iterator方法來實現可迭代協議，迭代器迭代title。

遵循iterable協議允許將movies對象分解為title，具體方法是讀取第一個movies的title:const [firstMovieTitle] = movies。

廣州設計公司https://www.houdianzi.com 我的007辦公資源網站https://www.wode007.com

5.解構動態屬性

根據經驗，通過屬性對對象進行解構比數組解構更常見。

對象的解構看起來很更簡單：

const movie = { title: 'Heat' }; const { title } = movie; title; // => 'Heat' 

const {title} = movie創建一個變量title，並將屬性movie.title的值賦給它。

到對象解構時，我有點驚訝於咱們不必靜態地知道屬性名，可以使用動態屬性名稱來解構對象。

為了了解動態解構如何工作的，編寫一個greet函數：

function greet(obj, nameProp) { const { [nameProp]: name = 'Unknown' } = obj; return `Hello, ${name}!`; } greet({ name: 'Batman' }, 'name'); // => 'Hello, Batman!' greet({ }, 'name'); // => 'Hello, Unknown!' 

使用2個參數調用greet() 函數：對象和屬性名稱。

在greet()內部，解構賦值const {[nameProp]：name ='Unknown'} = obj使用方括號的形式 [nameProp]讀取動態屬性名稱，name變量接收動態屬性值。

更好的做法是，如果屬性不存在，可以指定默認值“Unknown”。