ES6 變數解構

2022-02-23 18:21:21 字數 1783 閱讀 8505

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

語法:

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

console.log(a, b, c);

//1 2 3

順序: 從陣列中取值, 按照對應位置, 對變數取值, 這種寫法屬於'匹配模式', 只要等號兩邊模式相同, 左邊的變數就會被賦予相對應的值

語法:

let  = ;

console.log(a, b);

//aaa bbb

順序:物件解構變數的取值沒有順序, 變數必須與屬性同名, 才能解構成功

變數與屬性不同名:

let  = ;

console.log(c);

//aaa

機制:先找到同名屬性, 然後再賦值給對應的變數, 真正被賦值的是後者, 而不是前者

變數同名:報錯

//

eg: 變數和屬性同名,解決方法:

let a;

( = );//

使用小括號,降級為乙個表示式

console.log(a); //

3

巢狀:物件解構也可以巢狀,前提兩邊的模式一定要一樣

let obj =]};

let ] } =obj;

console.log(x, y);

//hello world

物件的解構其實是下邊模式的簡化版

//

a和c是模式,b和d是變數

let = ;

console.log(b, d);

//aaa ccc

字串在解構時,會將字串轉換為乙個類陣列

語法:

let [a, b, c, d] = 'hello';

console.log(a, b, c, d);

//h e l l

在字串轉換的類陣列中有乙個屬性叫做length, 可以對這個屬性進行解構賦值

let  = 'hello';

console.log(len);

//5

//

數值與布林解構

let = 123;

console.log(ts);

//分兩步走

//1. 將數值轉為物件

console.dir(new number(2123));

//2. 將物件與物件進行解構,如果數值物件的模式與左邊的模式不對應,回去原型物件中查詢

console.log(ts === number.prototype.tostring); //

true

語法:

function

fun([x, y])

fun([1, 2]);//

3

1) 交換變數值

let x = 1;

let y = 2;

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

console.log(x, y);

//2 1

2) 從函式返回多個值:函式一次只能返回乙個值,想要返回多個值只能將返回值放入陣列或物件返回, 有了解構方法就可以輕鬆的取出這些值

3) 函式傳參

4) 提取json資料:解構對提取json尤其有用

5) 函式引數預設值:es6允許函式的引數設定預設值

ES6 變數解構用法

1 陣列解構,可以設定預設值 use strict let x,y b a 控制台輸出b console.log y 2 物件解構 use strict let 控制台輸出aaa console.log foo 控制台輸出bbb console.log bar 物件的解構與陣列有乙個重要的不同。陣列...

es6變數解構賦值

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

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