es6 快速入門系列解構

其他章節請看：

es6 快速入門系列

我們經常使用陣列或物件儲存資料，然後從中提取出相關資料資訊

以前開發者為了從物件或陣列中提取出特定資料並賦值給變數，編寫了很多重複的**，就像這樣：

function demo1(obj)
demo1()

es6引入新特性：解構。來解決上面的問題，請看下面：

function demo1()
demo1()

可以把解構簡單理解成賦值

更詳細的介紹請看下面補充部分

物件解構

物件解構的語法：在賦值操作符左邊放置乙個物件字面量

宣告變數時使用解構

let obj = 
let = obj
console.log(key1) // value1

不要忘記初始化

// 語法錯誤
var 
// 語法錯誤
let

變數賦值時使用解構

let obj = 
let key1 = '11';
// 一定要用小括號包裹賦值語句。否則js引擎將{}是為**塊，而**塊不允許出現在賦值語句的左側
( = obj)
console.log(key1) // value1

解構時的預設值

let obj = 
let = obj
console.log(key2) // value2
console.log(key3) // undefined 該變數名在obj中不存在，則賦值undefined
console.log(key4) // value4 對應的屬性不存在，使用預設值
console.log(key5) // value5 對應屬性值為undefined，使用預設值

非同名變數賦值

let obj = 
let = obj
console.log(v1) // value1
console.log(v2) // value5

巢狀物件的解構

let obj = 
}let } = obj;
console.log(key1) // value1
console.log(key2) // undefined
console.log(key3) // value3

陣列解構

陣列解構語法：與物件解構語法相比要簡單多了，使用的是陣列字面量

宣告變數時使用解構

let arr = ['value1', 'value2', 'value3', 'value4', 'value5']
let [,,key3,key4,key5] = arr
console.log(key3) // value3 逗號是佔位符
console.log(key5) // value5

不要忘記初始化

// 語法錯誤
let [,,key3,key4,key5]

變數賦值時使用解構

不需要用小括號包裹表示式，這一點與物件解構不同

let arr = ['value1', 'value2']
let key1, key2;
[key1, key2] = arr
console.log(key1) // value1

陣列解構有乙個獨特用法：交換兩個變數的值

let key1 = 'value1';
let key2 = 'value2';
[key1, key2] = [key2, key1];
console.log(key1) // value2
console.log(key2) // value1

解構時的預設值

let arr = ['value1']
let [key1, key2 = 'value2'] = arr
console.log(key2) // value2

巢狀陣列的解構

let arr = ['value1', ['value2', 'value3'], 'value4']
let [key1,[key2],key4] = arr
console.log(key2) // value2
console.log(key4) // value4

不定元素

前面我們介紹了不定引數，而在陣列解構語法中有乙個與之類似的概念：不定元素。在陣列中，可以通過三個點（...）的語法將陣列中的其餘元素賦值給乙個特定的變數，就像這樣：

let arr = ['value1', 'value2', 'value3', 'value4']
let [key1, ...restkeys] = arr
console.log(key1) // value1
console.log(restkeys.length) // 3
console.log(restkeys[0]) // value2

注：與不定引數一樣，不定元素也必須是最後乙個

可以使用不定元素轉殖陣列

let arr = ['value1', 'value2']
let [...copy] = arr
console.log(array.isarray(copy)) // true
console.log(copy[1]) // value2

解構引數

解構引數必須傳值

function demo(key1, )
// 正確
demo('value1', )
// 報錯
demo('value1')

當呼叫demo('value1')時，js引擎實際上做了這些事:

function demo(key1, options) = options
}

如果需要讓解構引數可選，必須為其提供預設值

function demo(key1,  = {})
// 正確
demo('value1')

下面這種寫法，讓解構引數支援可選，並且能提供預設值：

function demo(key1,  = {})
demo('value1') // value2 解構引數支援可選
demo('value1', {}) // value2
demo('value1', ) // value20
demo('value1', ) // value2

其他章節請看：

es6 快速入門系列

ES6系列（二）解構賦值

之前在我們開發的過程中，難免會碰到這樣的問題後端傳給我們一串資料，然後我們需要對這個資料進行處理。如果是這樣的乙個資料 let obj 然後我們需要用變數去儲存這些資料，那麼我們可能會這麼操作 let username obj.username,userid obj.userid,professi...

ES6快速入門

三種語法實現同乙個功能，從而加深對三種語法的運用，最後了解es6的優勢知識點常量作用域箭頭函式預設物件 es5 中常量的寫法 object.defineproperty window,pi2 console.log window.pi2 es6 的常量寫法 const pi 3.1415...

ES6快速入門

引數配置 promise物件 const 宣告的常量不可改變，宣告時必須初始化 const pi 3.1415926 console.log pi 使用const定義的陣列和物件，其值是可變的，但是不能對其進行重新賦值 const a a 0 1 console.log a 0 輸出1 const ...

es6 快速入門 系列 解構

ES6系列（二）解構賦值

ES6快速入門

ES6快速入門

相關推薦

es6 快速入門系列解構