哎，我真的是太難了，今天就被這個解構賦值（也可以叫做析構，貌似析構是在c++中的，所以我這裡叫做解構賦值吧）弄的我很煩，本來以為很容易的，結果還是弄了好久。。。就總結一下解構吧！ 1.解構的基本使用 什麼叫做解構呢？其實就是類似正則表達式的這麼一個東西，就是用一個有規則的表達式去匹配一個對象，這個表 ...
哎，我真的是太難了，今天就被這個解構賦值（也可以叫做析構，貌似析構是在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，嘿嘿(^.^)，到此結束
