深入解讀ES6系列（三）
- 2020 年 4 月 9 日
- 筆記
ES6字元串
- 哈嘍小夥伴們，愛說『廢』話的Z又回來了，歡迎來到Super IT曾的部落格時間，上一節說了函數，解構賦值和數組的五大將，這一節我們繼續我們知識的海洋，一起奮鬥不禿頭！不足的歡迎提問留言。
- 今天又上熱門了，連續兩篇哈哈哈很開心，我估摸著這一個系列都上那就太爽了，穩住不能飄，基礎知識搞紮實才是我們的最終目的，當然我的目的就是搜刮各路粉絲哈哈順便騙贊，開個玩笑哈哈，最主要的是能夠加深印象掌握基礎，或許直接羅列出知識點是簡單粗暴也乾脆說實話我也喜歡，但是過兩天你鐵定忘了，這就是為啥我們的標題是深入解讀的含義，學習嘛就要找我這種，又帥又有才華還能講段子，講著講著知識就掌握了，好了，廢話說了這麼多，上主菜。
敲黑板
- 字元串兩個重點：
1.多了兩個新方法startsWith，endsWith
2.字元串模板，連接字元串
兩個新方法
這兩個真的超級簡單，看程式碼：
<script> let a = "https://www.cnblogs.com/Three-Z/"; if(a.startsWith("https:")){ console.log("這是一個加密的網址") if(a.endsWith("Three-Z/")){ console.log("這是老曾部落格園安全的網址") } }else{ alert("啥啥也不是") } </script> 哈哈有沒有強行植入推銷的感覺，當然endsWith也可用來直接判斷文件類型，這裡懂怎麼用就行哈哈，返回布爾值那是必然。
字元串模板
- 例子一個字元串「abc」，在a後面插入一個12，怎麼做？
<script> let a = 12; alert(`a${a}bc`) </script> - 是不是簡單明了，很簡單吧，不過注意使用的是`符號，也就是挨著鍵盤橫著一排的數字1的左邊那個，我們叫它反引號，要插入的內容${}包裹起來就成，美元嘛，有錢能使鬼推磨，所以只要你使用這個，想插哪裡插哪裡，想插什麼插什麼，而且反引號裡面還可以折行，就更方便了嘛。
- 說起來我前段時間用的最多的好像是帶參數的跳轉鏈接的時候，這樣在跳轉新的頁面就不用再去向伺服器發送請求要數據了。
ES6面向對象
類、構造器
- 面向對象oop，不知道這個或者不清楚的同學，老規矩點開去補補課再回來繼續學習，或者你想跟著學了再去看也可，但是一定要去看oop，這個很重要的，劃重點要考的。這裡我就先上程式碼了，不然細說的話可能要寫一大篇部落格都可能講不完。
- 示例：用oop的方式彈出用戶名和密碼：
<script> function User(name,pass){ this.name = name; this.pass = pass; } User.prototype.showName = function(){ alert(this.name); } User.prototype.showPass = function(){ alert(this.pass) } var user = new User("DDDZ","123456") user.showName(); user.showPass(); </script> 沒問題這樣當然出的來，但是呢？User在這裡是一個構造函數吧？是一個類吧？對都沒問題但是你要給Java啊C++啊的兄弟說，誒我們構造函數和類是一個，哇老哥絕對是難以言表的眼神看著你哈哈哈。不過時代這麼久我們也要像java一哥靠齊，現在有了class和constructor（構造器），來改程式碼：
<script> class User{ constructor(name,pass){ this.name = name; this.pass = pass; } showName(){ alert(this.name) } showPass(){ alert(this.pass) } } var user = new User("DDDZ","123456") user.showName(); user.showPass(); </script> 這樣的優點是啥？構造和類分開了、方法也終於不用外掛了。
- 現在來提個問，面向對象最有價值的地方，你覺得是啥？開放式答案哈，可以想想。然後我的感覺呢，就是接下來要說的東西~
繼承
- 老規矩JavaScript繼承知識不熟練的，乖乖去隔壁班哈，就不細說了，至少最基礎的要知道，簡單說俗一點就是兒子繼承爸爸的東西。
- 那我們繼續哇，比如我們在原來的程式碼基礎上加一個VIP用戶，他有一個自己的等級，最後通過繼承顯示他的名字密碼和等級怎麼實現呢現在？留個思考哈，會JS繼承的可以自己想想原來怎麼實現的反正真的還挺麻煩，這裡直接整爽的程式碼。
extends和super
先上硬菜：
<script> class User{ constructor(name,pass){ this.name = name; this.pass = pass; } showName(){ alert(this.name) } showPass(){ alert(this.pass) } } class VipUser extends User{ constructor(name,pass,level){ super(name,pass) this.level = level } showLevel(){ alert(this.level) } } var user = new VipUser("DDDZ","123456",3) user.showName(); user.showPass(); user.showLevel(); </script> 是不是簡單清晰明了，一目了然。
這裡的User就是VipUser的爸爸，兒子繼承他的name和pass，說奇怪一點就像是繼承遺產的感覺，當然除了繼承的，這裡的showLevel就是兒子自己的東西，要什麼就用什麼就行了。
面向對象的應用
- 這裡先賣個關子，應用上小demo也沒啥太大的意義，在我回歸的那篇部落格有寫嘛，答應了要加更VUE和React項目的，框架裡面用的就很多啦，那個時候再來具體的體會oop的用法。
JSON
- json是不是很親切呢？親不親切一回事，接下來我們就說json的兩個事情，看你知不知：
1.json對象： json <=> 字元串 (stringify與parse的使用)
2.json的簡寫：- 名字一樣簡寫 key和value值一樣留一個
- 方法簡寫 ：function一塊刪
- 記住這兩句話哈，咱們開始啦~
stringify與parse
- 首先我們來思考一個問題，給一個網址拼接一個json，怎麼做？瞅瞅下面哪個程式碼合理你的？
<script> // 1 let json = {name:"DDDZ",value:"部落格園地址"}; let url = "https://www.cnblogs.com/Three-Z?data="+json alert(url) //2 let json = {name:"DDDZ",value:"部落格園地址"}; let url = "https://www.cnblogs.com/Three-Z?data="+JSON.stringify(json) alert(url) //3 let json = {name:"DDDZ",value:"部落格園地址"}; let url = "https://www.cnblogs.com/Three-Z?data="+encodeURIComponent(JSON.stringify(json)) alert(url) </script> 三塊程式碼你依次執行，每次只跑一塊，我這裡演示，所以把仨湊一起的，這時你發現2中多了個stringify，這個是什麼呢？其實就是字元串化也就是常說的串列化，這裡就實現了json=>string，如圖你可以列印看看，至於第三步encodeURIComponent()是什麼來來來，挪挪地兒，encodeURIComponent的詳細使用。讓我放出我的三段程式碼一次的執行結果你看看和你預期的一樣不一樣~
好了stringify到這裡就說的差不多了，下面我們來說說json的解析parse。
- 來看看這一段程式碼你覺得解析出來是什麼？
<script> let str = "{a:12, b:5, c:'abc'}"; let json = JSON.parse(str) console.log((json)) </script> 你能把列印結果列印出來？我就把es6吃了哈哈，當然報錯。
我們json的標準寫法兩句話：1.只能使用雙引號。2.所有名字都必須用引號包起來，比如：
{a:'abc', b:5} × {「a」:"abc", "b":5} √ 所以我們來改程式碼
<script> let str = '{"a":12, "b":5, "c":"abc"}'; let json = JSON.parse(str) console.log((json)) </script> 當然也就成功的實現了string => json的轉變
json的簡寫
- 啊，寫了這麼多有點小累，咱就直接幹了好吧，廢話下次再吹，我也給你們直擊痛處，json賦值並輸出，看以前怎麼做的，這樣肯定是可以的：
<script> let a = 12; let b = 5; let json = {a:a, b:b}; console.log(json) </script> 
但是現在我們說簡寫，這裡注意啦，偷懶來了，json裡面名字和值一樣的時候你可以只寫一個，這一行程式碼直接變成：
let json = {a, b}; - 方法簡寫一樣的直接干：
<script> //簡寫前 let json = { a:12, show:function(){ alert(this.a); } } json.show(); //簡寫後 let json = { a:12, show(){ //和es6面向對象方法是不是一樣的 alert(this.a); } } json.show(); </script> 這樣就完事兒~
———————————————————————分割線——————
都看到這裡了，只能說明一點，咱倆真的真的真的很有緣分啊！不點個贊再走嘛，??，順手加個關注嘛，偷偷收藏我博文的小可愛我後台看得到的嘛，點個贊給老曾支援支援，不出意外接下來我一直都在哈哈哈，學知識寫部落格不著急，基礎打好，項目直接上手6到飛起。
下節說Promise，gengenerator及之後的內容
放上我的，部落格園，主要部落格CSDN，GitHub，pipe
