JS解構幾個有趣的用途

2021-09-26 14:31:53 字數 1569 閱讀 6334

1、交換變數

通常交換兩個變數的方法都需要乙個額外的臨時變數，如下：

let a = 1;


let b = 2;


let temp;


temp = a;


a = b;


b = temp;


console.log(a);      //2


console.log(b);      //1
temp是乙個臨時變數，它先儲存a的值。然後把b值賦給a，然後將temp值賦給b。

如果使用解構的方式，就不需要temp變數。

let a = 1;


let b = 2;


[a,b] = [b,a];


console.log(a);    //2


console.log(b);    //1
[a,b] = [b,a]是解構賦值，右邊，建立了乙個陣列[b,a]，即[2,1]。這個陣列2被賦值了給a，1被賦值給b。

雖然這種方式也建立了臨時陣列，但這種方式給看起來至少更簡潔，使用解構還可以交換兩個以上的變數。

let a = 1;


let b = 2;


let c = 3;


let d = 4;


[a,b,c,d] = [d,c,b,a];


console.log(a);


console.log(b);


console.log(c);


console.log(d);
2、訪問陣列中元素

有種場景，我們可能希望有乙個空陣列。並且希望訪問陣列的第乙個、第二個或第n個項，但是如果該項不存在，則使用指定預設值。

通常會使用陣列的length屬性來判斷。

const colors = ;


let firstcolor = 'white';


if(colors.length > 0) 


console.log(firstcolor);
使用解構：

const colors = ;


const [firstcolor = 'white'] = colors;


console.log(firstcolor);    //white
const [firstcolor = 'white'] = colors解構將colors陣列的第乙個元素賦值給firstcolor變數。如果陣列在索引0處沒有任何元素，則分配」white「預設值。

當然，如果我們只想訪問第二個元素：

const colors = ;


const [, secondcolor = 'black'] = colors;


console.log(secondcolor);
需要注意的是：解構左側的逗號：它表示忽略第乙個元素，secondcolor使用colors陣列中索引為1的元素進行賦值。

解構賦值的用途

變數的解構賦值用途很多。1 交換變數的值 let x 1 let y 2 x,y y,x 上面 交換變數x和y的值，這樣的寫法不僅簡潔，而且易讀，語義非常清晰。2 從函式返回多個值 函式只能返回乙個值，如果要返回多個值，只能將它們放在陣列或物件裡返回。有了解構賦值，取出這些值就非常方便。返回乙個陣列...

ES6 解構賦值的幾個用途 回顧

let x 1 let y 2 console.log x x,y y x 1 y 2 結構賦值 x,y y,x console.log x x,y y x 2 y 1function example let a,b,c example console.log a a,b b,c c a 1 b 2...

變數的解構賦值用途

1.交換變數的值 let x 1 let y 2 x,y y,x 2.從函式返回多個值 函式只能返回乙個值，如果要返回多個值，只能將他們放在陣列或物件裡返回。有了解構賦值，取出這些值就非常方便。返回乙個陣列 function example let a,b,c example 返回乙個物件 func...