成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

深入理解ES6之《解構(gòu)》

wuyumin / 1100人閱讀

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

對象解構(gòu)

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

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

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

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

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

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

在任何使用值的地方你都可以使用解構(gòu)賦值表達式

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

解構(gòu)還可以使用默認值

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

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

let { loc: { } } = node
數(shù)組解構(gòu) 
let colors = ["red", "green", "blue"]
let [, , thirdColor] = colors

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

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

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

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

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

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

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

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

上述代碼用ES6中不定元素也可以實現(xiàn)該目標

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

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

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

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

想的最全面的就是既使用解構(gòu)又使用默認值

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 }) {
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112444.html

相關(guān)文章

  • 深入理解ES6之《解構(gòu)》

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

    DTeam 評論0 收藏0

  • 《深入理解ES6》筆記——解構(gòu)：使數(shù)據(jù)訪問更便捷（5）

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

    Drinkey 評論0 收藏0

  • 深入理解ES6筆記（五）解構(gòu)：使訪問數(shù)據(jù)更便捷

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

    _DangJin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<