ES6（2） 解構賦值

2021-10-19 13:30:01 字數 1974 閱讀 2930

目錄

一、什麼是解構賦值？

二、陣列模型的解構（array）

三、物件模型的解構（object）

解構賦值是對賦值運算子的擴充套件。是一種針對陣列或者物件進行模式匹配，然後對其中的變數進行賦值。

1、基本

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


console.log() // 輸出
2、可巢狀

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


console.log() // 輸出
3、可忽略

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


console.log() // 輸出
4、不完全解構

let [a = 1, b] = 


console.log() // 輸出
5、剩餘運算子

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


console.log() // 輸出
6、字串

let [a, b, c] = '你好!'


console.log() // 輸出
7、解構預設值當解構模式有匹配結果，且匹配結果是 undefined 時，會觸發預設值作為返回結果。

let [a = 2] = [undefined]; // a = 2


let [a = 3, b = a] = ;     // a = 3, b = 3


let [a = 3, b = a] = [1];    // a = 1, b = 1


let [a = 3, b = a] = [1, 2]; // a = 1, b = 2
1、基本

let  = ;


// foo = 'aaa'


// bar = 'bbb'


let  = ;


// foo = 'ddd'
2、可巢狀、可忽略

let obj = ] };


let ] } = obj;


// x = 'hello'


// y = 'world'


let obj = ] };


let ] } = obj;


// x = 'hello'
3、不完全解構

let obj = ] };


let , x ] } = obj;


// x = undefined


// y = 'world'
4、剩餘運算子

let  = ;


// a = 10


// b = 20


// rest =
5、解構預設值

let  = ;


// a = 3; b = 5;


let  = ;


// aa = 3; bb = 5;

ES6 （2） 解構賦值

對於解構賦值個人感覺需要理解左查詢與右查詢的區別，然後對解構賦值的理解才會更深一些。解構賦值 對陣列和物件中的值提取，賦值到宣告的變數中。模式匹配 模式相同，或者說樣子一樣 如果不成功，變數值為undefined，等號右邊不是陣列 不是可遍歷，因為模式是陣列 會報錯。允許指定預設值 左右匹配使用的是...

ES6 2 解構賦值（陣列和物件）

1.解構賦值 destructuring es6 允許按照一定模式，從陣列和物件中提取值 變數值的 對變數進行賦值 作用 這被稱為解構。2.陣列的解構賦值 let arr 1,2,3 let a,b,c arr console.log a,b,c 1 2 3let b,c 1,2,3 console...

ES6 解構賦值

陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...