之前在我們開發的過程中,難免會碰到這樣的問題:後端傳給我們一串資料,然後我們需要對這個資料進行處理。如果是這樣的乙個資料:
let obj =
然後我們需要用變數去儲存這些資料,那麼我們可能會這麼操作:
這麼做能取到值,這沒問題,不過我們需要思考乙個問題,現在這個物件裡面只有四個鍵值對。這麼處理起來也不算麻煩,但是如果哪一天物件裡面有100個鍵值對,怎麼辦呢?這種極端的情況不是沒有,當然我麼可以通過一些其他的手段進行規避,這不在今天的討論之列。let username = obj.username,
userid = obj.userid,
profession = obj.profession,
region = obj.region;
所以當我們有很多個鍵值對的時候,這麼去取值就顯得有點笨拙了。所以es6提出來了乙個新的東西,叫解構賦值,就是用來處理這件事情的。那麼有了解構賦值之後,上面的需求我們可以這麼操作:
可以看到在這段**裡面我們直接在let關鍵字後面用花括號包起來一堆變數,然後直接讓它們等於obj。其實這個操作就是從obj裡面取出前面花括號裡面變數所對應的值,並且對應的賦值給花括號裡面的物件。這就是所謂的解構賦值了。let obj = //同樣還是這個資料
let = obj;
console.log(username);//webpilot
先宣告變數,然後再解構賦值怎麼操作?
當然在這裡有一種情況比較特殊,剛才我們是在宣告變數的同時給這個變數賦值。那如果我原本就已經宣告好變數了,然後在後面的**中需要讓這個變數等於物件裡面的某一項,用結構賦值的話怎麼做呢? 來看一下,這其實是乙個小技巧:
解構賦值的時候,我想用別的名字怎麼辦?let obj = //同樣還是這個資料
let username = '';//這個變數已經提前宣告好了
= obj;//在這裡想要讓變數等於物件中的某一項,那這麼操作是會報錯的。這裡涉及到塊級作用域的問題,username外面的大括號是乙個塊級作用域,所以會出問題
//解決方法
( = obj);//把他們用括號包起來,當做乙個整體就可以了
還有一種情況,那就是我結構賦值的時候,不想用物件裡面的名字,覺得它太長了,或者其他什麼原因我想給解構出來的變數換乙個名字,怎麼辦呢?看操作:
可以注意到在解構賦值的時候是以鍵名對鍵值的方式去寫的變數:let obj =
//還是上面的資料,現在我想取其中的username的值,但是我覺得username太長了,我想給它換乙個變數名稱解構出來。那麼這時候我們可以這麼操作
let = obj;
console.log(n);//webpilot
這裡其實就是關鍵。這看著像是乙個物件中的鍵名和鍵值,不過在解構賦值中它所代表的意思是 從obj中取出"username"這個值,並且把這個值賦給新宣告的變數"n".
所以在這裡要注意的是:新宣告的變數是「n」 而不是別的,在後面用的時候也只能用「n」這個變數。
取值的時候,如果沒有取到,希望賦給乙個預設值?
在我們取值的過程當中呢,有些物件中可能沒有這個值,那麼這時候我們得到的就是undefined, 這時候程式就會出現一些問題;那麼在解構賦值中,我們有乙個小方法可以解決這個問題,那就是在取值的時候,先給這個變數乙個預設值。如果取到了,就用物件裡的值,如果沒有取到,則用預設值。看操作:
從上面可以看到,物件obj中並沒有abc這個值,如果我們按照之前的方法直接去取值,那麼得到的毫無疑問就是undefined. 所以如果給它乙個預設值,就能避免掉很多問題。而如果我們用同樣的設定預設值的方法去取物件中已經存在的值,那麼這時候得到的值就是物件中的值了。let obj =
//還是上面的資料,現在我想取其中的abc的值,但是abc在物件中可能存在可能不存在,這時候我們應該給abc乙個預設值來避免掉一些程式上的問題
let = obj; //這一步就是在解構賦值的時候,直接給abc賦予了乙個預設值 123
console.log(abc);//123 // 現在obj中是沒有abc這個值的,所以得到的就是預設值
let = obj;
console.log(username);// webpilot
另外預設值的設定和上面別名的設定是可以同時使用的,也就是說我們可以寫這樣的**:
let = obj;
以上我們說的都是對物件的解構賦值。
陣列也是可以被解構賦值的,不過在這裡有幾個不同點稍微提一下大家就明白了。
首先是解構賦值的時候,物件用的是 「{}」 而陣列,同理推一下也應該知道要用 「」 中括號,所以陣列在解構賦值的時候是這樣寫的 :
可以看到上面就成功賦值了,不過在這裡還有一點不同:物件的解構賦值是根據鍵名來查詢值的,而陣列的解構賦值是根據下標來查詢值的。這句話的意思是,上述**中 first得到的值永遠是陣列arr中存的第乙個值,而不管這個值是什麼let arr = ['a','b','c','d','e','f','g'];
let [first,second,third] = arr;
console.log(first,second,third);//a b c
最後陣列解構賦值的時候也可以用別名,也可以用預設值設定。以上就是es6中的解構賦值啦~
ES6 二 解構賦值
從陣列和物件中提取值,對變數進行賦值,這被稱為解構 1 從函式返回多個值 let a,b 1,2 a,b 2,1 a 2 b 1 2 接收從函式返回的多個值 函式只能返回乙個值,想返回多個需要返回乙個物件或陣列,用解構賦值取值非常方便 function exam let a,b,c exam a 1...
es6(二) 解構賦值
es中允許按照一定格式從陣列,物件值提取值,對變數進行賦值,這就是解構 destructuring 1 let a,b,c 1,10,100 2 console.log a,b,c 1 10 1003 等式兩邊 模式 進行匹配,從而進行賦值 4 let i,j k 1,2 3 這種看看就好,知道這樣...
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...