讀取物件屬性和存取陣列項目是常見的操作。銷毀分配使這些操作變得更加輕鬆和簡潔。在本文中，除了基本用法之外，我還將介紹JavaScript中5種有趣的解構用法。
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。
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」。
6.結論
如果想要存取物件屬性和陣列項，那麼析構非常有用。
除基本用法外，陣列析構還可以方便地交換變數、存取陣列項目、執行一些不可變的操作。
JavaScript提供了更大的可能性，因為您可以使用迭代器定義自訂析構邏輯。
原文網址：https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/
更多程式相關知識，請造訪：程式學習！ ！
以上是5種JavaScript中解構（Destructuring）的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
