一.正则扩展
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>