ES6 3 變數的解構賦值

2022-09-08 00:33:36 字數 3460 閱讀 6465

陣列的解構賦值其實是=左右進行「模式匹配」。

❗️❗️❗️=右側是具體的數值,不是變數!,=左側的是變數!如果右側是變數形式,需要先計算出具體的數值!!

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

a=1;b=2;c=3let [a, ...tail] = [1,2,3,4,5]; //

a = 1, tail = [2,3,4,5]let [a,b,c] = [1]; //

a=1 b=undefined c=undefined

=有側不能是非陣列,非陣列會自動轉為包裝物件。{}不行,因為物件不含iterator介面。但是set可以,set有iterator介面。

let [a,b,c] = new set([1,2,3]) //

a=1, b= 2, c= 3

只要資料結構有iterator介面就可以使用陣列結構。用generator函式生成的iterator物件也可以解構。

function*fibs() 

};const a =fibs();

a.next();

// // a=1,b=1

a.next();//

// a=1,b=2

a.next();//

// a=2,b=3

a.next();//

// a=3,b=5

a.next();//

a.next();//

let [first,second,third,four,five,six] =fibs();

console.log(first,second,third,four,five,six)

//0,1,1,2,3,5

陣列解構允許設定預設值,=右側的值為undefined時,左側使用預設值

let [a=5,b=6, c=7] = [undefined,null

,];//

a = 5, b=null, c=7

物件解構的=右側要求必須是物件,null或者undefined不能被解構,會報錯!

物件的解構賦值其實本質上也是「模式匹配」。

let  =

因為物件可以簡寫,其實應該是下面的形式

let  = ;

解構賦值的變數其實是:後面的變數名,:前端的值相當於匹配的模式

let  = 

//h='hello' w = 'world'

對於物件的擴充套件運算子(es2018)用於物件解構賦值

let  = 

//x = 1 y=2 z=

// ⚠️對於解構賦值來說,擴充套件運算子位於=左側的時候只能用於最後乙個元算,對於變數擴充套件來說...是剩餘元素運算子。同理,作為函式引數的時候是引數物件的解構賦值,也只能用於最後乙個引數

對於巢狀解構,普通屬性可以在左側變數宣告中解構;但是擴充套件運算子...解構,不能用於巢狀解構。

let obj =

}}const , web: }} =obj;

//web= }

//js =

//nodejs = 'node'

//reactjs = 'react'

普通解構可以取到繼承的原型物件上的屬性;但是擴充套件運算子解構取不到原型物件上的屬性。

let obj1 = ;

let obj2 =object.create(obj1);

obj2.x = 5;

let =obj2;

//其中a是正常解構,可以取到原型物件上的屬性;y是擴充套件解構,只能解構自身的屬性

//a = 1, y =

物件解構允許設定預設值

let  = 

//y=5, z=6, m=8

⚠️1)先宣告,再解構的情況

let x;

( = {}) //

必須有小括號,否則js引擎將作為**塊處理

//x = undefined

2)陣列是特殊物件,允許對陣列進行物件解構賦值

const arr = [1,4,2,3];

let =arr;

console.log(first,last,length)

//1,3,4

對字串使用解構賦值時,js引擎將字串轉為類陣列物件string(),類陣列都有length屬性

let str = 'hello';

let [a,b,c,d,e] = str;//

陣列解構 'h' 'e' 'l' 'l' 'o'

let = str; //

物件解構 5

數值和布林值進行賦值操作時,右側的數值和布林值會自動轉為包裝物件number(),boolean()

let  = 124;

//s === number.prototype.tostring

函式引數的解構賦值類似陣列,物件的解構賦值

[[1, 2], [3, 4]].map(([a, b]) => a + b);

對於引數的物件解構,注意預設值的賦值位置

function move1( = {}) 

function move2( = )

console.log(move1());

//[0,0]

console.log(move2()); //

[0,0]

console.log(move1({}));//

[0,0]

console.log(move2({}));//

[undefined,undefined]

console.log(move1()); //

[3,0]

console.log(move2()); //

[3,undefined]

避免使用小括號。(

學習 ES6 3 語言特性 變數的解構賦值

es6 可以按照一定模式從物件和陣列中提取對應值,並賦值給指定的變數 1,陣列 let items 1,2,3 let i,j,k items console.log i i console.log j j console.log k k i 1,j 2,k 3 let l,m items cons...

Es6(3) 箭頭函式

什麼是箭頭函式 var materials hydrogen helium lithium beryllium materials.map function material 8,6,7,9 materials.map material 8,6,7,9 materials.map material ...

es6 3 正則擴充套件

在 es5 中正則使用,要麼是兩個引數,要麼是乙個正規表示式引數 es6 中允許使用兩個引數,但是後邊引數的修飾符會覆蓋前邊的正則修飾符,可通過 es6 新增加的 flags 屬性來獲取正則物件修飾符 g 和 y 都是全域性匹配 g 修飾符是從上一次匹配的位置繼續尋找,直到找到匹配的位置開始,不強調...