深刻解讀ES6系列（三）

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