解構賦值的用法

2021-09-26 13:39:58 字數 3401 閱讀 8342

1. 交換變數

通常交換兩個變數的方法需要乙個額外的臨時變數,來看看例子

let a = 1;


let b = 2;


let temp;


temp = a;


a = b;


b = temp;


a; // => 2


b; // => 1
temp是乙個臨時變數，它先儲存a的值。然後把b的值賦值給a，接著將temp值賦給 b。

如果使用解構的方式會更簡單。

let a = 1;


let b = 2;


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


a; // => 2


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

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

let zero = 2;


let one = 1;


let two = 0;


[zero, one, two] = [two, one, zero];


zero; // => 0


one; // => 1


two; // => 2
2. 訪問陣列中元素

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

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

const colors = ;


let firstcolor = 'white';


if (colors.length > 0) 


firstcolor; // => 'white'
使用陣列解構，可以更簡潔的實現同樣的效果：

const colors = ;


const [firstcolor = 'white'] = colors;


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

當然還可以更靈活，如果只想訪問第二個元素，可以這麼做。

const colors = ;


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


secondcolor; // => 'black'
注意解構左側的逗號：它表示忽略第乙個元素,secondcolor使用colors陣列中索引為1的元素進行賦值。

3、不可變操作

當我開始使用react和redux時，被迫編寫了一些遵守不可變性的**。雖然一開始有些困難，但後來我看到了它的好處:更容易處理單向資料流。

不變性要求不能改變原始物件。幸運的是，解構可以以不可變的方式輕鬆實現某些操作。

const numbers = [1, 2, 3];


const [, ...foonumbers] = numbers;


foonumbers; // => [2, 3]


numbers; // => [1, 2, 3]
解構 [, … foonumbers] = numbers建立乙個新的陣列foonumbers，foonumbers 包含 numbers 元素，除了第乙個元素。

numbers 陣列沒有發生變化，保持操作不變性。

以同樣不可變的方式，可以從物件中刪除屬性，接著試著從物件big中刪除foo屬性：

const big = ;


const = big;


small; // => 


big; // =>
解構 iterables

在前面幾個例子中，對陣列使用了解構，但是咱們可以對任何實現可迭代協議( iterable protocol)的物件進行解構。

許多原生基本型別和物件都是可迭代的: array, string, typed arrays, set 和 map。

如果不想侷限於基本型別，通過實現可迭代協議，可以定製解構邏輯。

movies包含乙個movie物件列表。在解構movies時，將title作為字串獲取是非常棒的。讓咱們實現乙個自定義迭代器。

const movies = , 


],[symbol.iterator]() ;


}return ;}};


}};const [firstmovietitle] = movies;


console.log(firstmovietitle); // => 'heat'
movies物件通過定義symbol.iterator方法來實現可迭代協議，迭代器迭代title。

遵循iterable協議允許將movies物件分解為title，具體方法是讀取第乙個movies的title:const [firstmovietitle] = movies。

5.解構動態屬性

根據經驗，通過屬性對物件進行解構比陣列解構更常見。

物件的解構看起來很更簡單：

const movie = ;


const = movie;


title; // => 'heat'
const = movie建立乙個變數title，並將屬性movie.title的值賦給它。

到物件解構時，我有點驚訝於咱們不必靜態地知道屬性名，可以使用動態屬性名稱來解構物件。

為了了解動態解構如何工作的，編寫乙個greet函式：

function greet(obj, nameprop)  = obj;


return `hello, $!`;


}greet(, 'name'); // => 'hello, batman!'


greet(, 'name'); // => 'hello, unknown!'
使用2個引數呼叫greet() 函式：物件和屬性名稱。

在greet()內部，解構賦值const = obj使用方括號的形式 [nameprop]讀取動態屬性名稱，name變數接收動態屬性值。

更好的做法是，如果屬性不存在，可以指定預設值「unknown」。

**部署後可能存在的bug沒法實時知道，事後為了解決這些bug，花了大量的時間進行log 除錯，這邊順便給大家推薦乙個好用的bug監控工具 fundebug。

解構賦值 陣列的解構賦值

什麼是解構賦值？es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構 destructuring 我的理解是 允許宣告一種模式 陣列 物件等 裡面包含乙個或多個變數，再分別對這些變數遍歷 按照對應位置 賦值。以前，為變數賦值，只能直接指定值。let a 1 let b 2 通...

ES6變數解構賦值的用法

一 陣列賦值 從陣列中提取值，按照對應位置，對變數賦值 1.完全解構 變數與值數目相等 let arr 1,2,3 let a,b,c arr console.log a,b,c 1 2 3 2.不完全解構 變數的數目小於值的數目 let arr 1,2,3,4 let a,b,c arr cons...

陣列的解構賦值

es6允許按照一定的模式，從陣列和物件中提取值，對變數進行賦值，這被稱之為解構 destructuring 以前為變數賦值，只能直接指定值 var a 1 var b 2 var c 3 es6允許寫成這樣 var a,b,c 1,2,3 本質上，這種寫法屬於 模式匹配 只要等號兩邊的模式相同，左邊...