ES6之 解構賦值

2021-08-06 03:45:51 字數 3514 閱讀 1983

es6允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構賦值(destructuring)也可以簡稱:解構

下面用**進一步解釋一下什麼叫解構賦值

1.關於給變數賦值,傳統的變數賦值是這樣的:

var arr = [1,2,3];//把陣列的值分別賦給下面的變數;

var a = arr[0];

var b = arr[1];

var c = arr[2];

console.log(a);//a的值為1

console.log(b);//b的值為2

console.log(c);//c的值為3

2.關於結構賦值是這樣的(以陣列為例):
var [a,b,c] = [1,2,3];//把陣列的值分別賦給下面的變數;

console.log(a);//a的值為1

console.log(b);//b的值為2

console.log(c);//c的值為3

優點:**簡短了很多,可讀性也很強

陣列的用法除了上面的簡單用法以外,還有一下幾種情況需要注意:

1.結構賦值可以巢狀
var [ a,b,[ c1,c2 ] ] = [ 1,2,[ 3.1,3.2 ] ];

console.log(c1);//結果:c1的值為3.1

console.log(c2);//結果:c2的值為3.2

2.不完全結構賦值
var [a,b,c] = [1,2];

console.log(a);//結果:a的值為1

console.log(b);//結果:b的值為2

3.賦值不成功,變數的值為undefined
var [a,b,c] = [1,2];

console.log(a);//結果:a的值為1

console.log(b);//結果:b的值為2

console.log(c);//結果:c的值為undefined

4.允許設定預設值
var [a,b,c=3] = [1,2];

console.log(a);//結果:a的值為1

console.log(b);//結果:b的值為2

console.log(c);//結果:c的值為3

var [a,b,c=3] =[1,2,4];

console.log(a);//結果:a的值為1

console.log(b);//結果:b的值為2

console.log(c);//結果:c的值為4

5.屬性調換影響結果
把右側的陣列屬性b和屬性c的位置進行了調換,但這會影響賦值的結果,變數b和變數c的值會改變,b為3,c為2。這就告訴我們陣列的解構賦值會受到屬性的排列次序影響

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

console.log(a);//結果:a的值為1

console.log(b);//結果:b的值為3

console.log(c);//結果:c的值為2

物件的解構賦值跟陣列的解構賦值很類似,我們來看一段小**:

var  = ;

console.

log(a);//結果:a的值為1

console.

log(b);//結果:b的值為2

console.

log(c);//結果:c的值為3

var  = ;

console.

log(a);//結果:a的值為1

console.

log(b);//結果:b的值為2

console.

log(c);//結果:c的值為3

var  = ;

console.log(a);//結果:a的值為undefined

var  = ;

console.

log(a);//結果:a的值為2

1.物件結構賦值也可以巢狀
var } = };

console.

log(b);//結果:b的值為1

2.可以指定預設值
var  = ;

console.

log(b);//結果:b的值為預設值2

除了物件和陣列可以解構賦值外,字串也可以結構賦值,此時字串被轉換成乙個類似陣列的物件,看看下面的例子:

var [a,b,c] = "王永傑";

console.log(a);//王

console.log(b);//永

console.log(c);//傑

1.交換變數的值
傳統做法最常用的是引入第三個變數來臨時存放,如下:

var x =

1;var y =

2;var z = x;//第三個變數臨時存放x的值

x = y; //把y的值賦給x;

y = z; //把z的值賦值給y;

console.

log(x); //結果:x為2

console.

log(y); //結果:y為1

解構賦值,想交換兩個變數的值就簡單多了。看下面的**:

var x = 1;

var y = 2;

[x,y] = [y,x];

2.提取函式返回的多個值
函式只能返回乙個值,我們可以將多個值裝在乙個陣列或者物件中,再用解構賦值快速提取其中的值。

function

demo()}

var = demo();

console.log(name);//結果:張三

console.log(age);//結果:21

3.定義函式引數
function demo()

demo();

4.函式引數預設值

function

demo

(a)else

console.log(name);

}

function

demo

()demo({});

ES6之解構賦值

1.es6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構 let a,b,c 1,2 3 2.如果等號的右邊不是陣列 或者嚴格地說,不是可遍歷的結構,參見 iterator 一章 那麼將會報錯。如下例 let foo 1 let foo false let foo nan l...

ES6之解構賦值

es6允許按照一定模式從陣列和物件中提取值,對變數進行賦值 稱為解構賦值 const aaa 張三 李四 王二 麻子 let zhang,li,wang,ma aaa console.log zhang 張三 console.log li 李四 console.log wang 王二 console...

ES6 之解構賦值

按照一定的模式,將陣列或物件中的資料提取出來,賦值給變數,這個過程叫做解構賦值 1 賦值 將陣列或物件中的資料提取出來,賦值給變數let arr 1 2,3 4,5 let 變數名 值 let a arr 0 let b arr 1 console.log a,b 2 解構 按照一定的模式 陣列模式...