ES6變數解構賦值

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

es6之前我們申明多個變數需要按照下面的方法：

let l a=1;

let b=2;
let c=3;
let d=4;
//或者
let a=1,b=2,c=3,d=4;

現在我們可以更加簡便

let[a,b,c,d]=[1,2,3,4]

這種方法需要連邊結構完全對上，左邊有多餘變數，會給多餘變數賦值undefined，右邊有多餘的值，多餘的自動會被忽略

let[a,[b,c,d],[e,[f,g]]]=[1,[2,3,4],[5,[6,7]]]

console.log(a,b,c,d,e,f,g)
//1 2 3 4 5 6 7 
let[a,b,c,d]=[1,2,3]
console.log(a,b,c,d)
//1 2 3 undefined
let[a,b,c]=[1,2,3,4]
console.log(a,b,c)
//1 2 3

如果等號右邊的物件不是陣列，就會無法解析，報錯

//

下面的全部報錯
let [foo] = 1;
let [foo] = false
;let [foo] =nan;
let [foo] =undefined;
let [foo] = null
;let [foo] = {};

解構賦值允許給變數預設值,如果後面給變數賦值undefined，系統會自動採用預設值

let[a=1,b,c,d]=["abort","bar","cancle","dance"]

console.log(a,b,c,d)
//abort bar cancle dance
let[a=1,b,c,d]=[undefined,"bar","cancle","dance"]
console.log(a,b,c,d)
//1 "bar" "cancle" "dance"
let[a=1,b]=[null,2]
console.log(a,b)
//null 2
let[a=1,b]=[nan,2]
console.log(a,b)
//nan 2
let[a=undefined,b]=[undefined,undefined]
console.log(a,b)
//undefined undefined

預設值可以引用解構賦值的其他變數，但該變數必須已經宣告。

let [x = 1, y = x] = ;     //

x=1; y=1
let [x = 1, y = x] = [2]; //
x=2; y=2
let [x = 1, y = x] = [1, 2]; //
x=1; y=2
let [x = y, y = 1] = ; //
referenceerror

解構賦值還可以用於物件的屬性賦值

let=a//

1b//
2let = ;
foo 
//"aaa"
bar //
"bbb"
let = ;
baz 
//undefined

我們從上面的例子可以看出物件的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變數。真正被賦值的是後者，而不是前者。

如果變數名與屬性名不一致，必須寫成下面這樣。

var  = ;

baz 
//"aaa"
let obj = ;
let =obj;
f //
'hello'
l //
'world'

上面的例子等價於下面,其實就是個左右一一對應的意思

let  = ;

foo//
"aaa"
bar//
"bbb"

與陣列一樣，解構也可以用於巢狀結構的物件。

let obj =

]};let ] } =obj;
x //
"hello"
y //
"world"

一定要看清楚他的左右對應關係

var node =

}};var , loc: } } =node;
line //1
loc //
object 
start //
object

物件解構賦值也可以設定預設值

var  ={};

x //
3var = ;
x //
1y //
5var ={};
y //
3var = ;
y //
5var ={};
msg 
//"something went wrong"

字串也可以解構賦值。這是因為此時，字串被轉換成了乙個類似陣列的物件。

const [a, b, c, d, e] = 'hello';

a //
"h"b //
"e"c //
"l"d //
"l"e //
"o"

類似陣列的物件都有乙個length屬性，因此還可以對這個屬性解構賦值。

let  = 'hello';

len 
//5

let  = 123;

s === number.prototype.tostring //
true
let = true
;s === boolean.prototype.tostring //
true
let = 123; 
//可以換成兩步
let temp = new number(123);
let =temp;
//temp物件因為有tostring屬性，所以解構成功，然後將tostirng變數用新的變數s代替
let = 123 是因為解構失敗，所以是undefined

變數解構賦值的用途

一.交換變數的值

let a=1;

let b=2;
[a,b]=[b,a]
console.log(a,b)
//2 1

二.從函式返回多個值，用來接收返回值

function

f(a,b)
let[x,y,z,p]=f(2,3)
console.log(x,y,z,p)
//5 2.5 6 13
function
f1()}
let =f1()
console.log(a,b)
//1 2

解構賦值可以方便地將一組引數與變數名對應起來。

function

f1([x,y,z])
f1([1,2,3])//
6引數也可以是無序的
function
f2()
f2()//
15

解構賦值對提取json物件中的資料，可以快速提取

let jsondata =;

let =jsondata;
console.log(id, status, number);
//42, "ok", [867, 5309]

es6變數解構賦值

es6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構。解構賦值在實際開發中可以大量減少我們的 量，並且讓我們的程式結構更清晰。陣列的解構賦值 let a,b 1 2 console.log a 1 console.log b 2 上面的 表示，可以從陣列中提取值，按照位置的物件...

es6 變數解構賦值

1.陣列的解構賦值 等號兩邊的模式相同，左邊的變數就會被賦予對應的值 預設值 undefined型別只有乙個值，即undefined。當宣告的變數還未被初始化時，變數的預設值為undefined。null型別也只有乙個值，即null。null用來表示尚未存在的物件，常用來表示函式企圖返回乙個不存在的...

ES6 變數的解構賦值

es6允許 按照一定的模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構。結構賦值在實際開發中可以大量減少我們的 量，並且讓我們的程式結構更清楚。賦值解構已經看了好多遍了，但是每次記不住，今天來寫一篇部落格來加深印象 我覺得陣列的解構賦值的作用就是能夠同時給多個變數進行賦值，不用像以前那樣需要...