聊聊es6的解構

2022-09-19 00:33:08 字數 706 閱讀 2654

很多人會把解構跟es5的 || 相提並論,其實還是有一點區別的。

在解構中,乙個重要的原則是,預設值生效的條件只有undefined。

而使用es5的 || ,由於js會把某些值都轉換成false,所以都會返回預設值。

在js中,會轉換成false的值包括:false, 0, null, undefined, nan, ''

下面以陣列解構的例子來說明,物件解構同理:

// 1.通常情況,x=2

const arr=[2]

let [x]=arr

// 2.有預設值的情況

const arr=[2]

//es5

let x=arr[0] || 1 // x=2

//es6

let [x=1]=arr // x=2

// 3.預設值為undefined的情況

const arr=

//es5

let x=arr[0] || 1 // x=1

//es6

let [x=1]=arr // x=1

// 4.預設值為false的情況

const arr=[0] // 其他值類同

//es5

let x=arr[0] || 1 // x=1

//es6

let [x=1]=arr // x=0

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...

ES6解構賦值

一 基本用法 解構 destructuring 按照一定的模式,從陣列或者物件中提取值,對變數進行賦值。let par1,par2,par3 1,2 console.log par1,par2,par3 1 2 不完全解構時par3對值為undefined 解構賦值允許指定變數對預設值。let pa...

es6解構賦值

coding changes the world accumulating makes yourself 主要從三個方面講述 陣列式的解構賦值 物件式的解構賦值 函式中的解構賦值 preface 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...