1. 程式人生 > >ES6語法之正則擴充套件和Promise

ES6語法之正則擴充套件和Promise

一.正則擴充套件

1.建構函式:

在ES5中正則建構函式的寫法:

	<script type="text/javascript">
		var reg1 = new RegExp('abc','i');
		var reg2 = new RegExp(/abc/i);
		console.log(reg1.test("abc12"),reg2.test("abcq"));   //true true
	</script>

ES6中新增加了一些方法:

	<script type="text/javascript">
		/*es5*/
		var reg1 = new RegExp('abc','i');
		var reg2 = new RegExp(/abc/i);
		console.log(reg1.test("abc12"),reg2.test("abcq"));   //true true

		/*es6*/
		var reg3 = new RegExp(/abc/ig,"i");  //es6新增加的寫法,後面的i會覆蓋前面的ig
		console.log(reg3.flags);   //i,flags屬性是新增的,用來獲取正則物件的修飾符的屬性
	</script>

2.修飾符:

除了es5的i和g修飾符,es6還增加了y修飾符和u修飾符。

y修飾符:

	<script type="text/javascript">
		let a = "bbb_bb_b";
		//es5
		let reg1 = new RegExp(/b+/g);
		//es6
		let reg2 = new RegExp(/b+/y);
		console.log("第一次匹配:",reg1.exec(a),reg2.exec(a));
		console.log("第二次匹配:",reg1.exec(a),reg2.exec(a));
		//注意:g修飾第二次匹配的時候他只要後面能匹配上就行,所以匹配得到bb;
		//而y修飾符匹配的時候要求緊鄰著第一次匹配的下一個必須匹配,否則就不能匹配;

		console.log(reg1.sticky,reg2.sticky);  //sticky是es6新增的,用來檢測是否開啟了y匹配
	</script>

u修飾符:

	<script type="text/javascript">
		//u修飾是來匹配unicode字元編碼的,如果不加的話識別不了。
		console.log(/\u{61}/.test("a"));    //false
		console.log(/\u{61}/u.test("a"));   //true
	</script>

對於大於兩個位元組的字元,我們需要加上u修飾符。

二.字串擴充套件

	<script type="text/javascript">

		console.log('a',`\u0061`);  //a a
		console.log('s',`\u20BB7`);

		//對於大於兩個位元組的unicode編碼,用大括號括起來
		console.log('s',`\u{20BB7}`);
	</script>

三.Promise

promise是非同步程式設計的解決方案。

在Es5中回掉函式的場景:

	<script type="text/javascript">
			let ajax = function(callback){
				console.log("執行");
				setTimeout(function(){
					callback&&callback.call();
				},1000);
			}
			ajax(function(){
				console.log("一秒後執行");
			})

			//先打印出: 執行,一秒以後打印出:一秒後執行
	</script>

假如我們需要先執行a,再執行b,接著執行c,以此類推執行def.....;如果我們用es5的寫法可能後期維護不方便,而且太多了我們不能看清他們的執行順序。

我們用es6的promise來寫上面的程式碼:

	<script type="text/javascript">
			let ajax = function(){
				console.log("one");
				return new Promise(function(resolve,reject){
					setTimeout(function(){
						resolve();
					}, 1000);
				})
			}
			ajax().then(function(){
				console.log("two");
			});

			//先列印:one,一秒以後列印:two
			//上面是這樣的,ajax函式返回一個promise物件,該物件有一個then()方法,
            //該方法裡面的第一個函式對應著resolve,如果還有第二個可以用逗號分隔,它對應這reject。
	</script>

下面寫一個三級的回掉:

	<script type="text/javascript">
			let ajax = function(){
				console.log("one");
				return new Promise(function(resolve,reject){
					setTimeout(function(){
						resolve();
					}, 1000);
				})
			}
			ajax().then(function(){
				console.log("two");
				return new Promise(function(resolve,reject){
					setTimeout(function(){
						resolve();
					}, 1000);
				})
			}).then(function(){
				console.log("three");
			})

			//先打印出:one,一秒後打印出two,再過一秒列印three
	</script>

像這種序列的問題,如果中間在某一步出錯了,Promise提供了一種catch的方法。

	<script type="text/javascript">
			let ajax = function(num){
				console.log("執行");
				return new Promise(function(resolve,reject){
					if (num > 5) {
						resolve();
					} else {
						throw new Error("出錯了");
					}
				})
			}
			ajax(6).then(function(){
				console.log('log',6);
			}).catch(function(err){
				console.log('catch',err);
			})

			ajax(3).then(function(){
				console.log('log',3);
			}).catch(function(err){
				console.log('catch',err);
			})

			//注意執行順序
	</script>

1.Promise.all():把多個promise例項當作一個promise例項,下面的意思就是當三張圖片都載入完畢以後才觸發這個新的Promise物件,才會有then這個方法。下面這個場景就是有三張圖片必須都加載出來以後才顯示在頁面上。

	<script type="text/javascript">
			function loadImg(src){
				return new Promise(function(resolve,reject){
					var img = document.createElement("img");
					img.src = src;
					img.onload=function(){
						resolve(img);
					}
					img.onerror=function(err){
						reject(err);
					}
				})
			}

			function showImgs(imgs){
				imgs.forEach(function(img){
					document.body.appendChild(img);
				})
			}
			Promise.all([
				loadImg("https://img.mukewang.com/5b7388fd000159ba09360316.jpg"),
				loadImg("https://img.mukewang.com/5b682a210001156e09360316.jpg"),
				loadImg("https://img.mukewang.com/5b6a947e00013edb09360316.jpg")
			]).then(showImgs);
	</script>

2.Promise.race();這個場景是三張圖片,哪個先加載出來就先顯示哪一個,別的就不顯示了。

	<script type="text/javascript">
			function loadImg(src){
				return new Promise(function(resolve,reject){
					var img = document.createElement("img");
					img.src = src;
					img.onload=function(){
						resolve(img);
					}
					img.onerror=function(err){
						reject(err);
					}
				})
			}

			function showImgs(imgs){
				document.body.appendChild(imgs);
			}
			Promise.race([
				loadImg("https://img.mukewang.com/5b7388fd000159ba09360316.jpg"),
				loadImg("https://img.mukewang.com/5b682a210001156e09360316.jpg"),
				loadImg("https://img.mukewang.com/5b6a947e00013edb09360316.jpg")
			]).then(showImgs);
	</script>