es6之解構賦值巧用

ES6 容許按照必定模式，從數組、對象等中提取值，對變量進行賦值，這被稱爲解構賦值。

如何進行解構賦值我這裏就不贅述，本篇文章主要是將解構賦值的巧妙使用之處。

一、交互變量的值

經常使用交互變量兩個方法是引入第三個變量 和 異或（^）。

這裏可使用解構賦值的方式交換變量的值：

let a = 10;
let b = 29;

[a, b] = [b, a]

這樣，最後結果是 a = 29, b = 10 。

二、從函數中返回多個值

能夠返回一個數組或者對象，而後對其進行解構賦值。

// 返回一個數組

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一個對象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

三、函數參數的定義

解構賦值能夠方便地將一組參數與變量名對應起來，有序的可使用數組，無序的可使用對象。

// 參數是一組有序的值，使用數組

function f([a, b, c]){ 
  // ...
}
f([1, 2, 3]);

// 參數是一組無序的值，使用對象

function f({a, b, c}}{ 
  // ... 
}
f({c: 3, b: 2, x:1});

我以爲，第二種使用對象的方式在開發過程當中使用意義很是。

四、函數參數的默認值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

配合上一個內容，在定義函數時能夠很容易的配置默認值並經過可以很容易地指定參數。

五、模塊化開發中模塊按需加載

const { SourceMapConsumer, SourceNode } = require("source-map");

 

若是你們還有更巧的用處，能夠戳我喲