5個 JS 解構有趣的用途

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

---

爲了保證的可讀性，本文采用意譯而非直譯。

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」。

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。