ES6解構賦值

2021-10-25 04:56:23 字數 3975 閱讀 8164

首先是陣列的解構賦值

1.這是等號左右型別一樣的情況下 陣列的元素是按次序排列的,變數的取值由它的位置決定 如下:

let [,,b] = [1,2,45]

console.log(b) // 45

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

console.log(a,c) // 1 3

let [d] =

console.log(d) // undefined

let [e,f] = [1]

console.log(e,f) // 1 undefined

let arr = [1,[2,3],4]

let [a,b,c] =arr;

console.log(a,b,c) // 1 [2,3] 4

2.等號左右型別不一樣的情況下

let [g] = 1

let [g] =0

let [g] =false

let [g] =undefiend // undefined is not defined

let [g] = nan

let [g] =null

let [g] = {}

console.log(g)// 1 0 false nan null {} is not iterable 1是不可迭代的 就是它轉為物件後或者本身沒有iterable介面所以解構時後報錯

3.等號左右一樣但是左右引數個數不一樣的情況下 右邊多了就不用管 左邊多了 多出的值就是undefined 當然左邊也可以設定預設的值 這樣當右邊對應的沒有值時(或者為undefined)也不至於成為undefined 它內部使用嚴格的=== 來判斷是否有值 來決定是否使用預設值

let [a='nihao',b] = [,'wanghongting']// console.log(a,b) // nihao wanghongting

let [a,b='wht'] = ['nihao',undefined] // console.log(a,b) // nihao wht

let [a,b='wht'] = ['nihao','undefined'] ;console.log(a,b) // nihao undefined 需要注意的是上面的和下面的不一樣的原因是 上面告訴我們右邊第二個資料是undeined型別的 說明沒有定義 而這個是字元『undefined』

let [a,b='wht',c,d,e] = ['nihao',null,number,boolean,string] ;console.log(a,b,c,d,e) // nihao null ƒ number() ƒ boolean() ƒ string() 如果是number string boolean 就會報錯 說它們undefined因為 陣列中除了數值,其它基本型別要加引號 就是字元

function fn()

let [a = fn()] = [1];

console.log(a) // 1 因為右邊對應的有值 所以不用使用預設值 fn就不用執行 如果右邊裡面對應的是undefined 那就會執行fn()

let [a = fn()] = [undefined]

console.log(a) // nihao undefined 因為這個函式並沒有返回值

預設值可以引用解構複製的其他變數,但是該變數必須已經宣告過了

let [x=2,y=x] = ; console.log(x,y) // 2 2 

let [x=2,y=x] = [10]; console.log(x,y) // 10 10 之所以等於10是因為解構賦值右邊有定義的值

let [x = 1,y = x] = [10,11]; console.log(x,y) // 10 11 說明賦值比預設值優先順序高 如果右邊有對應的就按對應的 如果沒有就預設值

let [x=y,y=1] = [1,2]; console.log(x,y) // 1,2 不報錯 是因為右邊賦值給它了 不需要應用其他變數了用不到預設值

let [x=y,y=1] = ; console.log(x,y) // 報錯 cannot access 'y' before initialization 初始化之前找不到y 也就是上面說的可以引用其他變數 但必須先宣告

let [x=y,y=1] = [1]; console.log(x,y) // 1 1

let [x=y,y=1] = [,2]; console.log(x,y) // 報錯 cannot access 'y' before initialization

5.set 這種資料結構 也可以用陣列的解構賦值

let [a,b,c] = new set(['a1','b11','c1'])

console.log(a,b,c) //a1 b11 c1

物件的解構賦值

物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值 當然下面也有解決辦法 在下面3中有提到

let  = 

// 20 'wht' // 不像陣列的解構賦值次序要一一對應 物件不用的 只要等號左右有同名屬性就可以取到右邊的值

let = // 等號左右屬性名不相同 取不到值 屬於解構失敗 就是undefined

// undefined

可以很方便的將現有物件的方法賦值到某個變數

let  = math ; // 12 等同於 

math.abs(-12)

let = console

log('nihao') // 列印的是nihao

warn('jinggao') // 列印的是⚠️警告

變數名與屬性名不一致 可以這樣做到解構賦值 等於重新賦值

let  = 

console.log(nv) // 女

let obj =

let = obj

// 報錯 named is not defined

console.log(names,likes) // 列印的結果是 王婷 eat 也就是說解構賦值完畢 左邊的屬

性又把取到的值賦值給了新的變數 雖然named匹配到了 但是被賦值的是變數names

物件的巢狀解構賦值

let obj = ]

} //let ]} = obj;console.log(x,name) // 此時不能列印p 因為它已經賦值給後面的變數了 列印的結果 hello 王琪

let ]} = obj; console.log(p,name,x) // ['hello',] '王琪' 'hello' 第二個p是乙個模式 類似上面的賦值給變數的角色

let node =

}} let , loc: } } = node

console.log(loc, start, line, column) // column: 2line: 1__proto__: object 1 2

let obj = {};

let arr = ;

( = ) // 用()抱起來是避免發生語法的錯誤

console.log(obj, arr) // [0]

5 物件的預設賦值

let  = {} // console.log(x) // 2

let = // console.log(x,5) //1 5

let =

console.log(y)

// 預設值生效的條件是 物件的屬性值嚴格等於undefined

var = {} //和var = // 沒有定義就是等於undfined

3var = ;// console.log(x) // null

var = ; // 列印台是空

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 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...