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>

猜你喜欢

转载自blog.csdn.net/sinat_40697723/article/details/82558646