ES6學習記錄 解構賦值

2021-08-21 04:04:41 字數 1653 閱讀 3483

es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構

let


[head,..


.tail]=[


1,2,


3,4]


;head// 1


tail// [2, 3, 4]


let[x, y,..


.z]=


['a'];


x// "a"


y// undefined


z//

如果解構不成功，變數的值就等於undefined。

另一種情況是不完全解構，即等號左邊的模式，只匹配一部分的等號右邊的陣列。這種情況下，解構依然可以成功。

let


[x, y]=[


1,2,


3];
如果等號的右邊不是陣列（或者嚴格地說，不是可遍歷的結構，參見《iterator》一章），那麼將會報錯。

解構賦值允許指定預設值。

let


[foo =


true]=


;foo// true


let[x, y =


'b']=[


'a']


;// x='a', y='b'


let[x, y =


'b']=[


'a', undefined]


;// x='a', y='b'
物件的解構與陣列有乙個重要的不同。陣列的元素是按次序排列的，變數的取值由它的位置決定；而物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值。

let=;


foo// "aaa"


bar// "bbb"


let=


;baz// undefined
變數的解構賦值用途很多。

（1）交換變數的值

let x =1;


let y =2;


[x, y]


=[y, x]


;
（2）從函式返回多個值

（4）提取 json 資料

解構賦值對提取 json 物件中的資料，尤其有用。

let jsondata =


;let


= jsondata;


console.


log(


id, status, number)


;
（5）函式引數的預設值

jquery.ajax =


function


(url,


,  cache =


true


,  complete =


function()


,  crossdomain =


false


,  global =


true


,// ... more config}=


);
指定引數的預設值，就避免了在函式體內部再寫var foo = config.foo || 'default foo';這樣的語句。

ES6學習記錄 解構賦值

結構賦值 example let a,b,c 1,2,3 注意 1 左右格式必須保持一致 用途 1 後台返回的json格式資料拆分批量賦值到變數 2 用於互動變數位置 如 let a 1 let b 2 a,b b,a 3 函式返回值解構 function getpos let getpos con...

ES6學習 解構賦值

解構賦值是對賦值運算子的擴充套件，是一種針對陣列或物件進行模式匹配，對其中變數進行賦值。解構源 解構賦值表示式的右邊部分 解構的目標 解構賦值表示式的左邊部分 注意 左右兩邊，結構格式要保持一致 陣列 let arr 1 2,3 let a,b,c arr console.log a,b,c 1 2...

ES6 學習 解構賦值

一 陣列解構 陣列解構，解構出來的值跟陣列下標是一一對應的，如果左邊變數多於右邊陣列，則左邊後面部分變數值為undefined，如果右邊陣列元素個數多於左邊解構變數個數，則左邊變數全都有值，且一一對應 1.簡單解構 let arr 1,2,5 let a b c arr a 1,b 2,c 5 2....