ES6語法 解構賦值

2021-08-15 04:16:14 字數 1571 閱讀 3042

按照一定的模式,從陣列和物件中提取值,對變數進行賦值,就被稱為解構。

目的是為了提高效率,使用起來更加方便。

以下的各個說明,我會模擬著es5去解釋,希望能幫到小夥伴們。

陣列解構

正常解構:

es5:

var arr = [1,2,3];

var a = arr[2];

console.log(a);//3

es6:

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

console.log(c);//3

巢狀陣列解構:
es5:

var arr = [1,2,[3,4],5];

var a = arr[2][0];

console.log(a);//3

es6:

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

console.log(c,d);//3,4

空缺變數
es5:

var arr = [1,2,,5];

console.log(arr[2]);//undefined

es6:

let[a,b,,e] = [1,2,[3,4],5];

console.log(e);//5

多餘變數
es5:

var arr = [1,2,3];

console.log(arr[3]);//undefined

es6:

let[a,b,,e] = [1,2,[3,4]];

console.log(e);//undefined

預設值
有預設值,且沒有值的,取預設值;有值的取自身的值,不取預設值

let[a,b,c,d='44'] = [1,2,3];

console.log(d);//44

let[a,b,c,d='44'] = [1,2,3,5];

console.log(d);//5

物件解構
es5:

let obj = new

object();

obj.name = "張三";

obj.age = "22";

console.log(obj.name);//張三

es6:

let obj = new

object();

obj.name = "張三";

obj.age = "22";

let = obj;

console.log(name,age);//張三 22

字串解構
es5:

var res = "晚上好";

console.log(res[2]);//好

let[a,b,c] = "晚上好";

console.log(b);//上

函式引數解構
function

show

()let obj =

show(obj);

ES6新語法 解構賦值

物件解構賦值 很重要 物件解構賦值 獲取元素中屬性的值,然後賦值給變數 宣告乙個物件 let obj es5中 let name1 obj.name let age1 obj.age let gender1 obj.gender let score1 obj.score console.log na...

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...