哎，我真的是太難了，今天就被這個解構賦值（也可以叫做析構，貌似析構是在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，嘿嘿(^.^)，到此結束
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/164482.html
標籤：JavaScript
上一篇：js內置物件
下一篇：一起學Vue之模板語法