本文主要介紹ES6中的結構賦值

什么是解構賦值？

? ? ? ?解構賦值允許你使用類似數組或對象字面量的語法將數組和對象的屬性賦給各種變量。這種賦值語法極度簡潔，同時還比傳統的屬性訪問方法更為清晰。傳統訪問數組如下：

var first = someArray[0]; var second = someArray[1]; var third = someArray[2];

利用解構賦值如下：

var [first,second,third] = someArray;

數組與迭代器的解構

? ? 一般語法如下：[ variable1, variable2, ..., variableN ] = array;

? ? 將variable1到variableN的變量賦予數組中相應元素項的值。如果你想在賦值的同時聲明變量，可在賦值語句前加入 var、 let 或 const 關鍵字，例如：

var [variable1,variable2,...,variableN] = array; let [variable1,variable2,...,variableN] = array; const [variable1,variable2,...,variableN] = array;

? ? 任意深度的嵌套數組都可以用來解構

var [foo,[[bar],baz]] = [1,[[2],3]]; console.log(foo) //1 console.log(bar) //2 console.log(baz) //3

? ??此外，你可以在對應位留空來跳過被解構數組中的某些元素

var [,,third] = ["foo", "bar", "baz"]; console.log(third); //baz

還可以通過不定參數模式捕獲數組中的所有尾隨元素

var [head, ...tail] = [1, 2, 3, 4]; console.log(tail); // [2, 3, 4]

當訪問空數組或者越界數組時，對其解構與對其索引的行為一致，最終得到undefined

console.log([][0]); // undefined var [missing] = []; console.log(missing); // undefined

迭代器中也可以使用解構賦值

function* fibs() { var a = 0; var b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } var [first, second, third, fourth, fifth, sixth] = fibs(); console.log(first); // 0 console.log(sixth); // 5

對象的解構
?

通過解構對象，你可以把它的每個屬性與不同的變量綁定，首先指定被綁定的屬性，然后緊跟一個要解構的變量。
?

var robotA = { name: "Bender" }; var robotB = { name: "Flexo" }; var { name: nameA } = robotA; var { name: nameB } = robotB; console.log(nameA); // "Bender" console.log(nameB); // "Flexo"

當屬性名與變量名一致時，可以通過一種實用的句法簡寫：
?

var { foo, bar } = { foo: "lorem", bar: "ipsum" }; console.log(foo); // "lorem" console.log(bar); // "ipsum"

與數組解構一樣，你可以隨意嵌套并進一步組合對象解構：
?

var complicatedObj = { arrayProp: [ "Zapp", { second: "Brannigan" } ] }; var { arrayProp: [first, { second }] } = complicatedObj; console.log(first); // "Zapp" console.log(second); // "Brannigan"

當未定義屬性時，得到的值為undefined

var {nothing} = {};console.log(nothing); //VM1140:1 undefined

注意：當解構對象并賦值給變量時，如果已經聲明或者不打算聲明這些變量（無 let const var關鍵字）會有語法錯誤

{ notDefined } = {notDefined:121}; //Syntax Error

因為Javascript語法通知解析引擎將任何以{開始的語句解析為一個塊語句（例如， {console}是一個合法塊語句）。解決方案是將整個表達式用一對小括號包裹：

({ notDefined } = {notDefined:121});

解構值不是對象、數組或迭代器

當對null或者undefined解構時，會得到錯誤類型：var {nullError} =null;

解構其他原始類型，布爾、數值、字符串將得到undefined

因為在使用對象賦值模式時，被解構的值需要被強制轉換為對象，但是null和undefined無法轉換。使用數組賦值模式時，被解構的值一定要包含一個迭代器

默認值

若要解構的屬性未定義時可以提供一個默認值：

解構的實際應用

? ? 函數參數定義

在api的設計過程中，通常做法是為函數設計一個對象作為參數，然后根據不同的實際參數作為對象屬性，這時候可以使用解構來避免使用者記住api參數的順序。

funcion remove Breakpoint(url,line,column){ //... }

? ? 配置對象參數

當我們構造一個提供配置的對象，并且需要這個對象的屬性攜帶默認值時，解構特性就派上用場了。例如Jquery的ajax函數使用一個配置作為它的第二參數，重寫函數定義：

jQuery.ajax = function (url, {async = true,beforeSend = noop,cache = true,complete = noop,crossDomain = false,global = true,// ... 更多配置}) {// ... do stuff };

? ? 與 ES6 迭代器協議協同使用
?

var map = new Map(); map.set(window,"the global"); map.set(document,"the document"); //iterate key and value for(var [key,value] of map){console.log(key+"is"+value); } //iterate key for(var [key] of map){console.log(key) } //iterate value for(var [value] of map){console.log(value) }

多重返回值

function returnMultipleValues(){return ["value1","value2"] }var [foo,bar] = returnMultipleValues();

使用解構導入部分 CommonJS 模塊

我們導入CommonJS 模塊 X 時，很可能在模塊 X 中導出了許多你根本沒打算用的函數。通過解構，你可以顯式定義模塊的一部分來拆分使用，同時還不會污染你的命名空間：

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

?

本系列參考《ES6-In-Depth》

?

?

總結

以上是生活随笔為你收集整理的JavaScript学习之ES6 ES2015学记笔记（五）-解构（destructuring）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。