哎,我真的是太難了,今天就被這個解構賦值(也能夠叫作析構,貌似析構是在c++中的,因此我這裏叫作解構賦值吧)弄的我很煩,原本覺得很容易的,結果仍是弄了很久。。。就總結一下解構吧!vue
1.解構的基本使用c++
什麼叫作解構呢?其實就是相似正則表達式的這麼一個東西,就是用一個有規則的表達式去匹配一個對象,這個表達式中恰好有一些屬性,只要是匹配到了的東西都會自動賦值給這些屬性,而後這個屬性咱們就能夠隨便使用了,因此通用的寫法應該是下面這個樣子的(這裏是對象類型的解構,對於數組類型的解構比較容易,很少說,本身查一下資料就ok了):es6
//方式一,左邊的表達式和右邊的屬性一 一對應,左邊的順序能夠隨意 let [屬性2,屬性1,屬性3]={屬性1:x,屬性2:xx,屬性3:xxx} //方式二,咱們想換一下屬性名,那麼左邊的表達式就須要用冒號將匹配到的值再賦值給冒號後面的變量,最後再返回給咱們使用 let [屬性2:attr2,屬性1:attr1,屬性3:attr3]={屬性1:x,屬性2:xx,屬性3:xxx}
舉個例子:正則表達式
let {newName:nm,oldName:om}={oldName: '小王', newName: '老王'} console.log(nm);//老王 console.log(om);//小王
很舒服的是左邊還能夠設置默認值,匹配獲得就用匹配到的值,沒有匹配到就使用默認的值:vuex
let {newName:nm='小李',oldName:om}={oldName: '小王'} console.log(nm);//小李 console.log(om);//小王
可是什麼叫作沒有匹配到呢?好比下面這個例子,右邊根本就沒有newName這個屬性,這叫作沒有匹配到,若是右邊的newName爲undefined也表示沒有匹配到;可是:若是newName的值是null,這是匹配到了!!數組
let {newName:nm='小李',oldName:om,midName:mn='中間人'}={oldName: '小王', newName: null,midName:undefined} console.log(nm);//null,匹配到了右邊的null,因而就用匹配到的值null console.log(om);//小王 console.log(mn);//中間人,右邊爲undefined,沒有匹配到,使用默認值:‘中間人’
下面咱們再來一個比較複雜的,隨便找的一個例子,咱們能夠看到:左邊第一個冒號前面的root匹配到對象立馬就賦值給了後面的{ leaf: { left } },而後這個對象的leaf屬性匹配到的東西賦值給{leaf},最後也就是至關於{leaf} = {leaf:5,right:5},就是最簡單的解構了。異步
let tree = { root: { leaf: { left: 5, right: 5 } } } let { root: { leaf: { left } } } = tree;
// console.log(root); //這一行註釋放開的話報錯,提示root is not defined // console.log(leaf);//這一行註釋放開的話報錯,提示leaf is not defined console.log(left);//5 這是能夠取到值的,匹配成功
2.複雜一點的解構函數
上面我說的是用一個表達式去匹配一個對象,那麼問題來了,這個對象中能夠有些什麼形式呢?在1中咱們的對象都是那種簡單的對象{xx:'xx',xx2:'xxx'},那麼這個對象可不能夠是一個函數返回的對象呢?this
舉個例子,咱們發現這樣也是能夠的;spa
function getPerson(na,num) { return { name: 'jack'+na, age: 19+num } } let { name, age } = getPerson('123',1); console.log(name);//jack123 console.log(age);//20
我又在想,既然相似let { name, age } = getPerson('123',1) 這種方式調用函數能夠,那麼繼續變形一下,將getPerson(xxx)中的形參作一個變形,注意,我要變形了!w(°o°)w
function getPerson({na,num}) { return { name: 'jack' + na, age: 19 + num } } //注意,這裏咱們調用函數傳遞的是一個對象,上面函數形參接收的也要是一個對象 let { name, age } = getPerson({na:'123',num:1}); console.log(name);//jack123 console.log(age);//20
發現仍是能夠,因而我又繼續變形:
function getPerson(obj){ return obj.commit("123",1); } //傳遞的對象更加複雜了 let obj = { commit:(na, num)=>{ return { name: 'jack' + na, age: 19 + num } } } //調用函數的參數仍是一個對象,只不過更加複雜了,對象裏面有一個commit屬性,對應着一個函數 let { name, age } = getPerson(obj); console.log(name);//jack123 console.log(age);//20
竟然還能夠,而後我又默默地作了一次變形:
//注意這裏形參,是一個{commit}對象 function getPerson({commit}){ return commit("123",1); } //這裏是實參,裏面有一個commit屬性,和上面的形參對應 let obj = { commit:(na, num)=>{ return { name: 'jack' + na, age: 19 + num } } } //在調用的函數的時候,傳入實參obj,形參那裏的{commit}就能夠拿到對應的commit函數了 //這就是es6的解構,或者叫作析構 let { name, age } = getPerson(obj); console.log(name);//jack123 console.log(age);//20
是否是有種日了狗同樣的感受,明明一個簡單的東西爲何要弄的這麼複雜呢?還有那個你爲何要在實參那裏面還定義一個commit函數呢?簡直坑爹!!
然而用過vuex的人應該對這個commit很熟悉纔對,相似下面代碼所示,mutations就不貼出來了,怎麼樣,如今是否是以爲那個({commit},num)這種東西就親切多了;
// 定義 actions ,要執行的動做,如流程的判斷、異步請求 const actions ={ // {commit,state}外面還能自定義參數num,這個參數咱們隨便定義 increment({commit},num){ //提交一個名爲 increment 的變化,名字可自定義,能夠認爲是類型名,與下方 mutations 中的 increment 對應 //簡單的作個判斷,若是自定義參會素是奇數,啥也不幹 if(num%2 == 1) return; //是偶數的話,commit 提交變化,修改數據的惟一方式就是顯式的提交 mutations commit('increment') } }
順便說一下,這裏有個自定義參數的話,咱們要傳遞參數的話,能夠這樣:
methods:{
//用這種三個點的寫法也是es6中的,好像是叫作展開運算符,能夠了解一下,用這種方式的話就可使得mapActions這種東西和其餘的方法例如incr函數,均可以放在methods裏面 ...mapActions([ //該 increment 來自 store.js 中導出的 actions 和 mutations 中的 increment 'increment' ]),
//incr這是自定義的一個點擊事件函數 incr(){ //這裏傳遞自定義參數1,隨便定義 this.$store.dispatch('increment',1) } }
3.小小的總結
仍是那句話,我真的是太難了!媽耶,每次想學一點vue的時候,看到一些沒見過的用法的時候,我就很頭痛,其實若是真的要用的話,vuex很容易用,其實就是定義那三個東西,寫法基本都是固定死的,而後在咱們本身的組件中dispatcher調用就ok了,不過我我的習慣仍是喜歡將一個不是很懂,或者是雲裏霧裏的知識點給弄清楚前因後果;
說實話,一直沒怎麼看es6的解構賦值,或者說是隻是看了數組的解構,哈哈哈,就相似這種let [a, b, c] = [1,2,3],哈哈,最基本的用法,今天才無聊好好的看了一下,確定還有不少用法每看到,下次有時間再說吧!
還有在看這個解構賦值的時候,冒出一個想法,相似這種寫法 let sum=(a,b)=>{return a+b};這是否是也能夠看做是一種特殊的解構賦值呢?只不過因爲返回的只有一個,因此就直接返回給sum,嘿嘿(^.^),到此結束