JavaScript解構賦值的用途
JavaScript解構賦值是ES2015新增,具體可以參閱以下五篇文章:
(1).JavaScript陣列解構賦值一章節。
(2).JavaScript物件解構賦值一章節。
(3).JavaScript函式引數解構賦值一章節。
(4).JavaScript字串解構賦值一章節。
(5).JavaScript解構賦值小括號的應用一章節。
下面分享幾個常見的解構賦值的使用:
(1).交換變數的值:
[JavaScript] 純文字檢視 複製程式碼執行程式碼let address = "青島市南區"; let webName = "螞蟻部落"; [address, webName] = [webName, address]; console.log(address); console.log(webName);
上面程式碼可以將兩個變數的值交換。
(2).函式一次返回多個值:
[JavaScript] 純文字檢視 複製程式碼執行程式碼let func =()=> [1, 2, 3]; let [a, b, c] = func(); console.log(a); console.log(b); console.log(c);
函式返回一個陣列,然後通過陣列解構賦值分別給三個變數賦值。
箭頭函式可以參閱箭頭函式介紹一章節。
上面是陣列的解構賦值,下面再來看一個物件解構賦值程式碼:
[JavaScript] 純文字檢視 複製程式碼執行程式碼let funcObj =()=>{ return {age: 5,url:"www.softwhy.com"} } let {age, url} = funcObj(); console.log(age); console.log(url);
函式返回一個物件直接量,然後進行物件解構賦值操作。
(3).方便提取json格式資料值:
[JavaScript] 純文字檢視 複製程式碼執行程式碼let jsonData = { id: 8, status: "ok", data: [55, 88] }; let { id, status, data} = jsonData; console.log(id) console.log(status) console.log(data)
很方便的從json結構物件中提取資料,其實這個就是物件解構賦值。
(4).給函式設定預設值:
這裡不舉例子了,具體參閱ES2015 函式新增特性一章節。
相關文章
- JavaScript 物件解構賦值JavaScript物件賦值
- JavaScript 字串解構賦值JavaScript字串賦值
- ES6 -- 變數的解構賦值的用途變數賦值
- JavaScript陣列解構賦值JavaScript陣列賦值
- JavaScript函式引數解構賦值JavaScript函式賦值
- JavaScript 解構賦值小括號的應用JavaScript賦值
- 解構賦值賦值
- JS解構賦值JS賦值
- 變數的解構賦值變數賦值
- Javascript 解構賦值,將屬性/值從物件/陣列中取出,賦值給其他變數JavaScript賦值物件陣列變數
- ES6學習-4 解構賦值(1)陣列的解構賦值賦值陣列
- es6-解構賦值賦值
- ES6 解構賦值賦值
- ES6解構賦值賦值
- ES6中的解構賦值賦值
- JavaScript 連等賦值JavaScript賦值
- let-const-解構賦值-字串賦值字串
- ES6之解構賦值賦值
- ES6 解構賦值+改名賦值
- ES6 - 變數的解構賦值解析變數賦值
- ECMAScript 6入門 - 變數的解構賦值變數賦值
- ES6之變數的解構賦值變數賦值
- ES6-解構賦值及原理賦值
- ES6學習解構賦值賦值
- 深入ES6 三 變數的解構賦值變數賦值
- ES6 - let與const,解構賦值賦值
- 解構賦值還有這麼多玩法?賦值
- JavaScript 等號 = 賦值運算子JavaScript賦值
- ES6入門之變數的解構賦值變數賦值
- 【ES6基礎】解構賦值(destructuring assignment)賦值Struct
- 基礎知識梳理~ES6 解構賦值賦值
- JavaScript 中物件解構時指定預設值JavaScript物件
- ES6標準入門之變數的解構賦值變數賦值
- ES6學習筆記(五)【解構賦值,Iterator】筆記賦值
- ES6:變數的結構賦值變數賦值
- php之普通變數賦值、物件賦值、引用賦值的區別PHP變數賦值物件
- Javascript學習筆記——4.11 賦值表示式JavaScript筆記賦值
- 【系統學習ES6】第二節:解構賦值賦值