哎，我真的是太難了，今天就被這個解構賦值（也可以叫做析構，貌似析構是在c++中的，所以我這里叫做解構賦值吧）弄的我很煩，本來以為很容易的，結果還是弄了好久。。。就總結一下解構吧！
1.解構的基本使用
什么叫做解構呢？其實就是類似正則表達式的這么一個東西，就是用一個有規則的表達式去匹配一個對象，這個表達式中剛好有一些屬性，只要是匹配到了的東西都會自動賦值給這些屬性，然后這個屬性我們就可以隨便使用了，所以通用的寫法應該是下面這個樣子的(這里是對象類型的解構，對於數組類型的解構比較容易，不多說，自己查一下資料就ok了)：
//方式一，左邊的表達式和右邊的屬性一 一對應，左邊的順序可以隨意 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);//小王
很舒服的是左邊還可以設置默認值，匹配得到就用匹配到的值，沒有匹配到就使用默認的值：
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'},那么這個對象可不可以是一個函數返回的對象呢？
舉個例子，我們發現這樣也是可以的；
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(°ｏ°)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，嘿嘿(^.^)，到此結束