文章目錄

• 1. 數組解構賦值
• 2. 對象解構賦值
• 3. 字符串解構賦值

在 ES6 中新增了變量賦值的方式：解構賦值。允許按照一定模式，從數組和對象中提取值，對變量進行賦值。如果對這個概念不了解，我們可以快速展示一個小示例一睹風采：

let arr = [1, 2, 3] let a = arr[0] let b = arr[1] let c = arr[2]

ES6 中就可以用解構賦值這樣寫：

let [a, b, c] = [1, 2, 3]

1. 數組解構賦值

• 賦值元素可以是任意可遍歷的對象
  賦值的元素不僅是數組，它可以是任意可遍歷的對象

let [a, b, c] = "abc" // ["a", "b", "c"] let [one, two, three] = new Set([1, 2, 3])

• 左邊的變量
  被賦值的變量還可以是對象的屬性，不局限于單純的變量。

let user = {} [user.firstName, user.secondName] = 'Kobe Bryant'.split(' ')console.log(user.firstName, user.secondName) // Kobe Bryant

• 循環體
  解構賦值在循環體中的應用，可以配合 entries 使用。

let user = {name: 'John',age: 30 }// loop over keys-and-values for (let [key, value] of Object.entries(user)) {console.log(`${key}:${value}`) // name:John, then age:30 } let user = new Map() user.set('name', 'John') user.set('age', '30')for (let [key, value] of user.entries()) {console.log(`${key}:${value}`) // name:John, then age:30 }

• 可以跳過賦值元素
  如果想忽略數組的某個元素對變量進行賦值，可以使用逗號來處理。

// second element is not needed let [name, , title] = ['John', 'Jim', 'Sun', 'Moon']console.log( title ) // Sun

• rest 參數

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]console.log(name1) // Julius console.log(name2) // Caesar// Note that type of `rest` is Array. console.log(rest[0]) // Consul console.log(rest[1]) // of the Roman Republic console.log(rest.length) // 2

• 默認值
  如果數組的內容少于變量的個數，并不會報錯，沒有分配到內容的變量會是 undefined。

let [firstName, surname] = []console.log(firstName) // undefined console.log(surname) // undefined

當然你也可以給變量賦予默認值，防止 undefined 的情況出現：

// default values let [name = "Guest", surname = "Anonymous"] = ["Julius"]console.log(name) // Julius (from array) console.log(surname) // Anonymous (default used)

2. 對象解構賦值

• 基本用法

let options = {title: "Menu",width: 100,height: 200 }let {title, width, height} = options // let {title: title, width: width, height: height} = options 上面是簡寫console.log(title) // Menu console.log(width) // 100 console.log(height) // 200

在這個結構賦值的過程中，左側的“模板”結構要與右側的 Object 一致，但是屬性的順序無需一致。

• 默認值

let options = {title: "Menu" }let {width = 100, height = 200, title} = optionsconsole.log(title) // Menu console.log(width) // 100 console.log(height) // 200

• rest 運算符

let options = {title: "Menu",height: 200,width: 100 }let {title, ...rest} = options// now title="Menu", rest={height: 200, width: 100} console.log(rest.height) // 200 console.log(rest.width) // 100

3. 字符串解構賦值

字符串可以當做是數組的解構:

let str = 'hello' let [a, b, c, d, e] = str console.log(a, b, c, d, e) 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的【ES6(2015)】解构赋值Desctructuring的全部內容，希望文章能夠幫你解決所遇到的問題。

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