ES6解析賦值的應用

DoubleDimos發表於2018-02-07
賦值

ES6的新特性：解析賦值

解析賦值是es6引入的新特性，解析賦值擁有很強的靈活性。用的最多的莫過於

import { Component, createElement } from "react";
複製程式碼

類似的語句。 解析賦值通常會在兩個地方使用，一是對陣列的解析賦值，二是物件的解析賦值。會寫python的朋友一定不會對以下程式碼感覺熟悉

    [a, b] = [b, a]
複製程式碼

JavaScript利用解析賦值也能實現同樣的效果，程式碼完全一樣。 本文注重對陣列的解析賦值進行講述，對於物件的解析賦值，和import語法一致，不做過多講。 首先，看下面一個例子

    [a, b] = [1, 2, 3]; //a = 1, b = 2;
    [a, ...b] = [1, 2, 3];// a = 1, b = [2, 3];
    [a, b] = [1, 2]; //a = 1,  b = 2;
    [a, ...b] = [1, 2]; //a = 1, b =[2]
    [a, b] = [1]; //a = 1, b = undefined
    [a, ...b] = [1]; // a = 1, b = [];
    [a, b] = []; //a = b =undefined;
    [a, ...b] = []; // a = undefined, b = []
複製程式碼

上面幾行程式碼基本上就能說明js的解析賦值的特性了，...b操作符意思是把剩下的封裝成一個陣列賦值給b。因此你可以看見，...b都是一個陣列，哪怕它是空的。但是a就不一樣，因為當右邊陣列是空的時候，a是無法獲得值的，因此a在解析失敗的時候，會是undefined。注意[a, b] = []這行程式碼，這就很好理解為什麼兩個都是undefined了。

它能做什麼？

解析賦值是很強大的一個特性，這裡列舉兩個例子拋磚引玉。

example 1，交換兩個變數

let a = 100, b = 200;
[a, b] = [b, a];
複製程式碼

由於JavaScript是動態語言，因此，a b可以是任何型別的,不單單是數字。

example 2： 快速排序

這個例子可謂是解析賦值的最經典的例子，以前我們實現快速排序，要麼是直接利用Array.prototype.sort，要麼就是自己封裝一個快速排序的函式。藉助解析賦值特性，我們可以更加精簡的實現快速排序。話不多說，直接上程式碼

    const qsort = ([m, ...xs]) => m == undefined ? [] : [
        ...qsort(xs.filter(a => a <= m)),
        m,
        ...qsort(xs.filter(a => a > m))
    ];
    
    qsort([5, 6, 9, 8, 7, 4, 3, 1, 2]); // [1, 2, 3, 4, 5, 6, 7, 8, 9];
複製程式碼

這個例子預設是從小到大的排序，如果要從大到小，只需要修改其中的比較條件即可。怎麼樣，很簡潔吧？ 這個例子用到了其他的新特性，比如箭頭函式.箭頭函式本身比較簡單，為了內容的完整性，做一個簡單的介紹。

  • 箭頭函式和以前的function() {}匿名函式其實很相似，兩者的區別在於：
  1. 箭頭函式書寫起來更簡便，不用自己寫return。比如let fn = xs => xs.filter(a => a < 10)，這段程式碼中，xs為一個陣列，它的功能是返回xs中小於10的數字。只需要這樣呼叫即可fn([1, 2, 3, 10, 11, 12])。預設情況下，如果函式程式碼不用{}包圍，那麼直接返回函式本體執行後的值，比如這段程式碼直接返回xs.filter(a => a < 10)的執行效果，filter裡面的函式也是一個解釋原因。引數只有一個的時候，可以省略掉括號，比如上面的xs和a。
  2. 箭頭函式預設的作域（也就是函式本體裡面的this變數）是當前箭頭函式所宣告的地方的作用域變數。並且call和apply對匿名函式是沒有作用的（第一引數沒用，後面的引數有效）。

寫在最後

es6的新特性在chrome firefox nodejs中支援已經比較完善了，但是還是有部分瀏覽器無法執行，比如騰訊自家的某某瀏覽器核心和微軟的某某瀏覽器，因此你需要使用babel進行轉碼。詳細的操作在這裡不給出。另外我推薦各位前端開發人員，儘可能地使用es6的新特性來進行編碼，新的技術應該得到更多的應用。比如Promise async/await fetch之類的全新的特性，這些特性將帶給你不一樣的體驗。

相關文章