本文主要介紹ES6中的結(jié)構(gòu)賦值

什么是解構(gòu)賦值？

? ? ? ?解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z法將數(shù)組和對象的屬性賦給各種變量。這種賦值語法極度簡潔，同時還比傳統(tǒng)的屬性訪問方法更為清晰。傳統(tǒng)訪問數(shù)組如下：

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

利用解構(gòu)賦值如下：

var [first,second,third] = someArray;

數(shù)組與迭代器的解構(gòu)

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

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

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

? ? 任意深度的嵌套數(shù)組都可以用來解構(gòu)

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

? ??此外，你可以在對應位留空來跳過被解構(gòu)數(shù)組中的某些元素

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

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

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

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

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

迭代器中也可以使用解構(gòu)賦值

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

對象的解構(gòu)
?

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

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"

與數(shù)組解構(gòu)一樣，你可以隨意嵌套并進一步組合對象解構(gòu)：
?

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

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

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

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

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

解構(gòu)值不是對象、數(shù)組或迭代器

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

解構(gòu)其他原始類型，布爾、數(shù)值、字符串將得到undefined

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

默認值

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

解構(gòu)的實際應用

? ? 函數(shù)參數(shù)定義

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

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

? ? 配置對象參數(shù)

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

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

? ? 與 ES6 迭代器協(xié)議協(xié)同使用
?

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();

使用解構(gòu)導入部分 CommonJS 模塊

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

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

?

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

?

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。