深入理解ES6之《解構》

wuyumin 發布于2019-08-29 13:12 / 1089人閱讀

摘要：對象解構如果使用解析聲明變量，則必須提供初始化程序也就是等號右側的值以下語句有語法錯誤解構賦值表達式也就是右側的表達式如果為或會導致程序拋出錯誤，因為任何嘗試讀取或的屬性的行為都會觸發運行時錯誤上面代碼是聲明變量同時賦值相應的屬性值那如果已

對象解構

如果使用var、let、const解析聲明變量，則必須提供初始化程序（也就是等號右側的值）
以下語句有語法錯誤

var { type, name };
let { type, name }
const { type, name }

解構賦值表達式（也就是右側的表達式）如果為null或undefined會導致程序拋出錯誤，因為任何嘗試讀取null或undefined的屬性的行為都會觸發運行時錯誤

let node = {
  type: "Identifier",
  name: "angela"
}
let { type, name } = node

上面代碼是聲明type、name變量同時賦值node相應的屬性值
那如果已經存在type、name，重新賦值使用解構的話則需要在表達式兩側加小括號

let node = {
  type: "Identifier",
  name: "angela"
},
  type = "demo",
  name = 1;
//添加小括號可以將塊語句轉化為一個表達式，從而實現整個解構賦值的過程
({ type, name } = node)

在任何使用值的地方你都可以使用解構賦值表達式

let node = {
  type: "Identifier",
  name: "angela"
},
  type = "demo",
  name = 1;
function outputInfo(value) {
  console.log(value === node)
}
outputInfo({ type, name } = node)//true

解構還可以使用默認值

let node = {
  type: "Identifier",
  name: "angela"
}
let { type, name, value = true } = node

為非同名局部變量賦值

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

解構嵌套對象，很可能會無意中創建一個無效表達式，比方說下面的loc后的大括號則不需要，更好的做法是定義一個默認值

let { loc: { } } = node

數組解構

let colors = ["red", "green", "blue"]
let [, , thirdColor] = colors

可以像如上所示只取數組第三個元素，忽略前兩個

let colors = ["red", "green", "blue"],
  firstColor = "black",
  secondColor = "purple";
[firstColor, secondColor] = colors

對變量重新賦值利用解構時，數組解構不再需要左右兩側加小括號了
可能數組解構用的最多的莫過于交換值吧

let a = 1,
  b = 2;
[a, b] = [b, a]

同樣數組解構中也可以添加默認值
數組解構中有一個不定元素的概念，可以通過...語法將數組中的其余元素賦值給一個特定的變量

let colors = ["red", "green", "blue"];
let [firstColor, ...restColors] = colors//restColors包含兩個元素green和blue

concat方法的設計初衷是連接兩個數組，如果調用時不傳遞參數就會返回當前函數的副本

let colors = ["red", "green", "blue"];
let cloneColors = colors.concat() //["red", "green", "blue"]

上述代碼用ES6中不定元素也可以實現該目標

let colors = ["red", "green", "blue"];
let [...cloneColors] = colors //["red", "green", "blue"]

需要注意的是在被解構的數組中，不定元素必須為最后一個條目，在后面繼續添加逗號會導致語法錯誤
解構參數

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

}
setCookie("type", "js", { secure: true, expires: 6000 })

想的最全面的就是既使用解構又使用默認值

const setCookieDefaults = {
  secure: false,
  path: "/",
  domain: "example.com",
  expires: new Date(Date.now() + 360000000)

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

云服務器 GPU云服務器深入理解webrtc之aec 深入理解系列深入理解linux 深入理解webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112444.html

深入理解ES6之《解構》

摘要：對象解構如果使用解析聲明變量，則必須提供初始化程序也就是等號右側的值以下語句有語法錯誤解構賦值表達式也就是右側的表達式如果為或會導致程序拋出錯誤，因為任何嘗試讀取或的屬性的行為都會觸發運行時錯誤上面代碼是聲明變量同時賦值相應的屬性值那如果已對象解構如果使用var、let、const解析聲明變量，則必須提供初始化程序（也就是等號右側的值）以下語句有語法錯誤 var { type, n...

DTeam 2019-08-21 12:02 評論0 收藏0
《深入理解ES6》筆記——解構：使數據訪問更便捷（5）

摘要：解構，一種黑魔法解構是從對象中提取出更小元素的過程。賦值是對解構出來的元素進行重新賦值。總結本章講解了對象解構賦值和數組解構賦值，以及對象和數組混合情況下的解構賦值操作，最后一個知識點是解構函數的參數。解構，一種黑魔法解構是從對象中提取出更小元素的過程。賦值是對解構出來的元素進行重新賦值。下面的代碼你可能無法在瀏覽器上實時測試，推薦在babel官網在線測試代碼：在線測試ES6代碼...

Drinkey 2019-08-20 18:06 評論0 收藏0
深入理解ES6筆記（五）解構：使訪問數據更便捷

摘要：當冒號右側存在花括號時，表示目標被嵌套在對象的更深一層中。在對象的嵌套解構中同樣能為本地變量使用不同的名稱提取數組解構結構賦值基本忽略一些選項重新賦值默認值數組解構賦值同樣允許在數組任意位置指定默認值。主要知識點：對象解構、數組解構、混合解構以及參數解構showImg(https://segmentfault.com/img/bVbfWgH?w=1020&h=585); 《深入理解...

_DangJin 2019-08-26 12:19 評論0 收藏0