簡單看看es6解構賦值

来源:https://www.cnblogs.com/wyq1995/archive/2019/12/08/12008138.html

哎,我真的是太難了,今天就被這個解構賦值(也可以叫做析構,貌似析構是在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(°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,嘿嘿(^.^),到此結束

 


您的分享是我們最大的動力!

更多相關文章
  • 回到: "Linux系列文章" "Shell系列文章" "Awk系列文章" 輸出操作 awk可以通過print、printf將數據輸出到標準輸出或重定向到文件。 print 逗號分隔要列印的欄位列表,各欄位都 會自動轉換成字元串格式 ,然後通過預定義變數OFS(output field separa ...
  • 日常操作中我們經常使用到文件壓縮操作,其使用一些特定的演算法來減小文件的大小,可以提高傳輸數據時的速率和減少數據在一些存儲機制上占有的空間大小,實現空間利用最大化。 比如:如果你想通過郵箱發送一個文件夾,你會發現可能行不通,怎麼辦呢,難道將文件夾內的內容一個個發送嗎?顯然不用,因為郵箱不支持文件夾這種 ...
  • 1、Where、Order by、Group by 、having Where作用對象是:基本表或視圖,從中選出符合條件的元素。 Order by 作用對象是:基本表或視圖,就是排序方式,分為升序(ASC)和降序(DESC),排序預設為升序 Group by 作用對象是:基本表或視圖,把對象進行分組 ...
  • 1. MapReduce入門 1.1 MapReduce的思想 MapReduce的思想核心是"分而治之" , 適用於大量的複雜的任務處理場景 (大規模數據處理場景) . Map負責"分" , 即把複雜的任務分解為若幹個"簡單的任務"來進行處理. 可以進行拆分的前提是這些小任務並行計算, 彼此間幾乎 ...
  • 今年 5 月,谷歌在 I/O 大會上宣佈,Kotlin 編程語言成為其 Android 應用程式開發人員的首選語言。 Kotlin 是一種面向現代多平臺應用程式的編程語言,成為谷歌開發 Android 應用程式的首選語言後,許多開發人員逐漸地從 Java 轉向 Kotlin。根據最新的一項調查顯示, ...
  • 什麼是結構、樣式、行為分離?這樣做的好處是什麼? web標準的核心理念就是結構標準、樣式標準和行為標準,提倡結構、表現和行為相分離,即HTML-結構、CSS-表現、JavaScript-行為 分離。 HTML標簽給予內容含義,CSS表現層則定義HTML該如何顯示(外觀),JavaScript行為成為 ...
  • Vue.js 使用了基於 HTML 的模板語法,允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循規範的瀏覽器和 HTML 解析器解析。 ...
  • Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space o ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...