解構賦值的作用

解構賦值允許你使用類似數組或對象字面量的語法將數組和對象的屬性賦給各種變量。

對象的解構

在賦值語句的左側使用了對象字面量，即key

let node = {type: "Identifier",name: "foo" }; let { type, name } = node; console.log(type); // "Identifier" console.log(name); // "foo"

對象的解構賦值

let node = {type: "Identifier",name: "foo"}, type = "Literal", name = 5; // 使用解構來分配不同的值 必須用圓括號包裹解構賦值語句 ({ type, name } = node); console.log(type); // "Identifier" console.log(name); // "foo"

注意：對象的解構賦值若沒有沒var/let/const聲明則要使用小括號括起來，因為JavaScript語法通知解析引擎將任何以{開始的語句解析為一個塊語句（例如，{console}是一個合法塊語句）。而數組的解構賦值就不需要用小括號括起來。

默認值

在對象中沒有找到同名屬性，那么該變量會被賦值為 undefined

let node = {type: "Identifier",name: "foo" }; let { type, name, value } = node; console.log(type); // "Identifier" console.log(name); // "foo" console.log(value); // undefined

可以選擇性地定義一個默認值，以便在指定屬性不存在時使用該值

let node = {type: "Identifier",name: "foo" }; let { type, name, value = true } = node; console.log(type); // "Identifier" console.log(name); // "foo" console.log(value); // true

賦值給不同的本地變量名

let node = {type: "Identifier" }; let { type: localType, name: localName="bar" } = node; console.log(localType); // "Identifier" console.log(localName); // "bar"

每當有一個==冒號==在解構模式中出現，就意味著冒號左邊的標識符代表需要檢查的位置，而冒號右側則是賦值的目標

對象嵌套的解構

let node = {type: "Identifier",name: "foo",loc: {start: {line: 1,column: 1}} }; let {loc: {start}} = node; console.log(start) // {line: 1, column: 1}

數組的解構

數組的解構和對象的解構很相似

let colors = [ "red", "green", "blue" ]; let [ color1, color2 ] = colors; console.log(color1); // "red" console.log(color2); // "green"

也可以在解構模式中忽略一些項，并且只給需要獲取的項提供變量名

let colors = [ "red", "green", "blue" ]; let [ , , color3 ] = colors; console.log(color3); // "blue"

color3之前的逗號，是為數組前面的項提供占位符。使用這種方法，你就可以輕易從數組任意位置取出值，而無須給其他項提供變量名。

數組的解構賦值

let colors = [ "red", "green", "blue" ],color1 = "black",color2 = "purple";[ color1, color2 ] = colors;console.log(color1); // "red" console.log(color2); // "green"

注意：這里的解構賦值沒有使用小括號，而對象的解構賦值有時是需要的。

默認值

let colors = [ "red" ]; let [ firstColor, secondColor = "green" ] = colors; console.log(firstColor); // "red" console.log(secondColor); // "green

數組嵌套的解構賦值

let colors = [ "red", [ "green", "lightgreen" ], "blue" ]; let [ color1, [ color2 ] ] = colors; console.log(color1); // "red" console.log(color2); // "green let colors = [ "red", [ "green", "lightgreen" ], "blue" ]; let [ color1, color2] = colors; console.log(color1); // "red" console.log(color2); // ["green", "lightgreen"]

注意以上兩個例子的區別

剩余項的解構賦值

let colors = [ "red", "green", "blue" ]; let [ firstColor, ...restColors ] = colors; console.log(firstColor); // "red" console.log(restColors); // ["green", "blue"] console.log(restColors[0]); // "green"

混合解構賦值

let node = {type: "Identifier",name: "foo",loc: {start: {line: 1,column: 1},end: {line: 1,column: 4}},range: [0, 3]}; let {loc:{start},range: arr } = node; console.log(start); // {line: 1, column: 1} console.log(arr); // [0, 3]

參數解構

當 JS 的函數接收大量可選參數時，一個常用模式是創建一個 options 對象，如下代碼：

// options 上的屬性表示附加參數 function setCookie(name, value, options) {options = options || {};let secure = options.secure,path = options.path,domain = options.domain,expires = options.expires;// 設置 cookie 的代碼 } // 第三個參數映射到 options setCookie("type", "js", {secure: true,expires: 60000 });

這樣寫有一個很不太友善的地方，就是無法僅通過查看函數定義就判斷出函數所期望的輸入，你必須閱讀函數體的代碼。
無法僅通過查看函數定義就判斷出函數所期望的輸入，你必須閱讀函數體的代碼。如下代碼：

function setCookie(name, value, { secure, path, domain, expires }) {// 設置 cookie 的代碼 } setCookie("type", "js", {secure: true,expires: 60000 });

解構的參數是必須的

如果你使用解構的參數定義了一個函數，并且在調用該函數時沒有給該結構參數賦值，那么程序會報錯。為了解決這個問題，通常在函數聲明時給給該解構參數賦值空對象。就像下面的代碼。

function setCookie(name, value, { secure, path, domain, expires } = {}) {// ... }

參數解構的默認值

function setCookie(name, value, {secure = false,path = "/",domain = "example.com",expires = new Date(Date.now() + 360000000)} = {}) {// ...}

此代碼中參數解構給每個屬性都提供了默認值，所以你可以避免檢查指定屬性是否已被傳入（以便在未傳入時使用正確的值）。而整個解構的參數同樣有一個默認值，即一個空對象，令該參數成為可選參數。

轉載于:https://www.cnblogs.com/renzhiwei2017/p/7344437.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的解构的全部內容，希望文章能夠幫你解決所遇到的問題。

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