解構給預設值 ES6系列（二）解構賦值

2021-10-12 19:16:34 字數 2840 閱讀 1601

之前在我們開發的過程中，難免會碰到這樣的問題：後端傳給我們一串資料，然後我們需要對這個資料進行處理。如果是這樣的乙個資料：

let obj =
然後我們需要用變數去儲存這些資料，那麼我們可能會這麼操作：

let username = obj.username,


userid = obj.userid,


profession = obj.profession,


region = obj.region;
這麼做能取到值，這沒問題，不過我們需要思考乙個問題，現在這個物件裡面只有四個鍵值對。這麼處理起來也不算麻煩，但是如果哪一天物件裡面有100個鍵值對，怎麼辦呢？這種極端的情況不是沒有，當然我麼可以通過一些其他的手段進行規避，這不在今天的討論之列。

所以當我們有很多個鍵值對的時候，這麼去取值就顯得有點笨拙了。所以es6提出來了乙個新的東西，叫解構賦值，就是用來處理這件事情的。那麼有了解構賦值之後，上面的需求我們可以這麼操作：

let obj = //同樣還是這個資料


let  = obj;


console.log(username);//webpilot
可以看到在這段**裡面我們直接在let關鍵字後面用花括號包起來一堆變數，然後直接讓它們等於obj。其實這個操作就是從obj裡面取出前面花括號裡面變數所對應的值，並且對應的賦值給花括號裡面的物件。這就是所謂的解構賦值了。

先宣告變數，然後再解構賦值怎麼操作？

當然在這裡有一種情況比較特殊，剛才我們是在宣告變數的同時給這個變數賦值。那如果我原本就已經宣告好變數了，然後在後面的**中需要讓這個變數等於物件裡面的某一項，用結構賦值的話怎麼做呢？ 來看一下，這其實是乙個小技巧：

let obj = //同樣還是這個資料


let username = '';//這個變數已經提前宣告好了


= obj;//在這裡想要讓變數等於物件中的某一項，那這麼操作是會報錯的。這裡涉及到塊級作用域的問題，username外面的大括號是乙個塊級作用域，所以會出問題


//解決方法


( = obj);//把他們用括號包起來，當做乙個整體就可以了
解構賦值的時候，我想用別的名字怎麼辦？還有一種情況，那就是我結構賦值的時候，不想用物件裡面的名字，覺得它太長了，或者其他什麼原因我想給解構出來的變數換乙個名字，怎麼辦呢？看操作：

let obj = 


//還是上面的資料，現在我想取其中的username的值，但是我覺得username太長了，我想給它換乙個變數名稱解構出來。那麼這時候我們可以這麼操作


let  = obj;


console.log(n);//webpilot
可以注意到在解構賦值的時候是以鍵名對鍵值的方式去寫的變數： 這裡其實就是關鍵。這看著像是乙個物件中的鍵名和鍵值，不過在解構賦值中它所代表的意思是 從obj中取出"username"這個值，並且把這個值賦給新宣告的變數"n".

所以在這裡要注意的是：新宣告的變數是「n」 而不是別的，在後面用的時候也只能用「n」這個變數。

取值的時候，如果沒有取到，希望賦給乙個預設值？

在我們取值的過程當中呢，有些物件中可能沒有這個值，那麼這時候我們得到的就是undefined, 這時候程式就會出現一些問題；那麼在解構賦值中，我們有乙個小方法可以解決這個問題，那就是在取值的時候，先給這個變數乙個預設值。如果取到了，就用物件裡的值，如果沒有取到，則用預設值。看操作：

let obj = 


//還是上面的資料，現在我想取其中的abc的值，但是abc在物件中可能存在可能不存在，這時候我們應該給abc乙個預設值來避免掉一些程式上的問題


let  = obj;  //這一步就是在解構賦值的時候，直接給abc賦予了乙個預設值 123 


console.log(abc);//123  // 現在obj中是沒有abc這個值的，所以得到的就是預設值


let  = obj;


console.log(username);// webpilot
從上面可以看到，物件obj中並沒有abc這個值，如果我們按照之前的方法直接去取值，那麼得到的毫無疑問就是undefined. 所以如果給它乙個預設值，就能避免掉很多問題。而如果我們用同樣的設定預設值的方法去取物件中已經存在的值，那麼這時候得到的值就是物件中的值了。

另外預設值的設定和上面別名的設定是可以同時使用的，也就是說我們可以寫這樣的**：

let  = obj;
以上我們說的都是對物件的解構賦值。

陣列也是可以被解構賦值的，不過在這裡有幾個不同點稍微提一下大家就明白了。

首先是解構賦值的時候，物件用的是 「{}」 而陣列，同理推一下也應該知道要用 「」 中括號，所以陣列在解構賦值的時候是這樣寫的 ：

let arr = ['a','b','c','d','e','f','g'];


let [first,second,third] = arr;


console.log(first,second,third);//a b c
可以看到上面就成功賦值了，不過在這裡還有一點不同：物件的解構賦值是根據鍵名來查詢值的，而陣列的解構賦值是根據下標來查詢值的。這句話的意思是，上述**中 first得到的值永遠是陣列arr中存的第乙個值，而不管這個值是什麼

最後陣列解構賦值的時候也可以用別名，也可以用預設值設定。以上就是es6中的解構賦值啦~

解構給預設值 ES6系列之解構賦值

我們之前談過了es6在變數宣告這一塊的小改動，忘了的同學可以戳藍字複習 前端初學者，也能輕鬆掌握es6 今天我們來 乙個新問題 之前在我們開發的過程中，難免會碰到這樣的情況 後端傳給我們一串資料，然後我們需要對這個資料進行處理。如果是這樣的乙個資料 let obj 然後我們需要用變數去儲存這些資料，...

解構給預設值 解構賦值預設值誤區

問題還原 這是最近 cr 的時候在業務 中發現了乙個問題，先來看一下問題 data 為介面返回的資料 const total 0 data.result const list bizobject.list 其他邏輯，比如把 list 更新到 state 中，等等 a 介面正常的情況 data 中有 ...

ES6學習 函式引數預設值與解構賦值預設值

1.es6的解構 es6中引入了解構賦值的操作，其作用是 將值從陣列array或屬性從物件object提取到不同的變數中 即分為兩種情況 從陣列array中解構，以及從物件object中解構 從陣列中解構 const a,b 1,2 a 1,b 2 當然這些是基本的陣列解構賦值，你還可以用逗號,進行...