ES6的解構賦值

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

1.陣列的解構賦值

//可以從陣列中提取值，按照對應位置對變數賦值
let [a,b,c]=[1,2,3]
console.log(a);//1
console.log(b);//2
console.log(c);//3

//本質上這種寫法屬於『模式匹配『，只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值

//巢狀陣列進行解構
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
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];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

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

//如果等號的右邊不是陣列，或者說不是可遍歷的結構，那麼將會報錯

let [a] = 1;
let [b] = false;
let [c] = nan;
let [d] = undefined;
let [e] = null;
let [f] = {};

//上面的語句都會報錯：uncaught typeerror: 1 is not iterable

2.預設值

解構賦值允許指定預設值

let [x,y='b'] = ['a'];
console.log(y); //b
let [x,y = 'b'] = ['a',undefined];
console.log(y); //b ,陣列成員為undefined時，預設值仍會生效(因為在es6內部使用嚴格相等運算子『===『，判斷乙個位置是否有值，所以當乙個陣列成員嚴格等於undefined,預設值才會生效)
let [x,y = 'b'] = ['a',null];
console.log(y); //null,如果乙個陣列成員是null,預設值就不會生效，因為null不嚴格等於undefined

3.物件的解構賦值

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

//1. 變數名與屬性名一致的情況下
let  = 
console.log(foo); //aaa
console.log(bar); //bbb
//變數名與屬性名不一致的情況下，必須這樣寫
let  = ;
console.log(name); //zhangsan
console.log(age);  //33

實際上物件的解構賦值是以這樣的形式簡寫的

let  =

也就是說，物件的解構賦值的內部機制，是先找到同名屬性，然後再賦值給對應的變數，真正被賦值的是後者，而不是前者，第乙個foo/bar 是匹配的模式，對應的foo/bar屬性值才是變數，真正被賦值的是屬性值（也就是第二個foo/bar), 如果不能理解再看下面這個例子

const node = 
}} let ,grand : }} = node;
console.log(father); // 
console.log(column); // 5
// grand、fahter、column 分別對這三個屬性解構賦值，grand、father是模式，只有column 是變數

4.字串的解構賦值

const [a,b,c,d,e] = 'hello';
console.log(a); //h
console.log(b); //e
console.log(c); //l
console.log(d); //l
console.log(e); //o
let  = 'yahooa';
console.log(len); //5,類似陣列的物件都有乙個length屬性，還可以對這個屬性解構賦值

5.數值和布林值的解構賦值

解構賦值時，如果等號右邊是數值和布林值，則會先轉為物件，但是等號右邊為undefined 和 null時無法轉為物件，所以對他們進行解構賦值時，都會報錯

let  = undefined;
console.log(x); //報錯：uncaught typeerror: cannot destructure property `prop` of 'undefined' or 'null'

6.函式引數的解構賦值

函式的引數也可以使用解構引數

function move( = )
console.log(move()); //[3,4]
console.log(move()); //[3,0]
console.log(move({})); //[0,0]
console.log(move()); //[0,0]
//move()的引數是乙個物件，通過對這個物件進行解構，得到變數x、y的值，如果解構失敗，x和y 等於預設值
function move2( = )
console.log(move2()); //[6,8]
console.log(move2({})); //[undefined,undefined]
console.log(move2()); //[1,2]
//move2() 是為函式move的引數指定預設值，而不是為變數x和y指定預設值，所以與前一種寫法的結果不太一樣，undefined 就會觸發函式的預設值

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

ES6的解構賦值

ES6 解構賦值

ES6解構賦值

es6解構賦值

相關推薦