5個 JS 解構有趣的用途
摘要：玩轉ES6解構指派。
- 原文：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
變量。如果數組在索引
處沒有任何元素，則配置設定“
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
”。
代碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。原文：https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/
關于Fundebug
Fundebug專注于JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了20億+錯誤事件，付費客戶有陽光保險、核桃程式設計、荔枝FM、掌門1對1、微脈、青團社等衆多品牌企業。歡迎大家免費試用！
![c++排序函數對二維數組排序_數組排序[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)