ES7
1、Array API:includes
在ES7之前,如果我们想要判断一个数组中是否包含某个元素,通过 indexOf 获取结果,判断是否为-1 在ES7之后,我们可以通过includes来判断一个数组中是否包含一个指定元素 var arr=[10,20,30];
console.log(arr.indexOf(30)!=-1);//true
console.log(arr.indexOf(40)!=-1);//false
console.log(arr.includes(30));//true
console.log(arr.includes(40));//false
2、*指数/乘方运算符:
在ES7之前,如果我们想要计算数字的乘方:Math.pow(底数,幂);
在ES7之后,我们可以通过**运算符,可以实现乘方
Math.pow(8,6);
8**6;
ES8
1、在ES8之前,我们想要获得一个对象里所有的属性值,我们只能for in循环遍历对象
在ES8之后,提供了Object.values(obj),直接把你所有的属性值保存在一个数组之中,对象 转为 数组
var wsc={
"name":"王思聪",
"age":40,
"hobby":"吃屎"
}
wsc=Object.values(wsc);//["王思聪",40,"吃屎"] - 你想用什么循环都无所谓
2、将对象变成有一个二维数组,同时保存着键(下标0)和值(下标1)
Object.entries(obj)
var wsc={
"name":"王思聪",
"age":40,
"hobby":"吃屎"
}
var arr=Object.entries(wsc);//[["name","王思聪"],["age",40],["hobby","吃屎"]]
3、String Padding
某些字符串我们需要对其进行前后的填充,来实现某种格式化效果
var str="hello";
//在str前面拼接了字符串a,总共填充到15位
var newStr1=str.padStart(15,"a");
//在str后面拼接了字符串a,总共填充到15位
var newStr2=str.padEnd(15,"a");
console.log(str);
console.log(newStr1);
console.log(newStr2);
应用场景:比如时间是一位数的时候,需要在前面填充一个
4、任何代码(数组,对象),尾部逗号的添加,都不会导致出错
5、***async 和 await:
async是一个关键字放在函数前面,用于表示函数是一个异步函数,异步函数也就意味着该函数的执行难不会阻塞后续代码
async function f1(){
return "我是f1函数";
}
f1().then(result=>{
console.log(result);
console.log("f1函数执行完毕后要干什么")
})
console.log("后续代码");
意味着任何函数都可以变为异步函数
await是等待的意思,他在等什么?他后面跟着什么?其实他后面可以放任何表达式,不过我们更多的是放Promise对象
注意:await关键字只能放在async的函数之中
async function f1(){
return 100;
}
async function f2(){
return 200;
}
async function f3(){//f3必须要等待f1和f2
return await f1()+await f2();
}
f3().then(rs=>{
console.log(rs)
})
console.log("后续代码");
同时出现多个异步函数,f3异步函数希望使用f1和f2的结果,可以用上await进行等待
ES9
1、*扩展运算符:
...其实ES6就已经引入了,但是仅仅只有【数组可用】 - 脱/穿衣服,关键就看有没有数组外套,如果有就是脱,如果没有就是穿
function f1(a,b,...c){
console.log(a);//1
console.log(b);//2
console.log(c);//[3,4,5]
}
f1(1,2,3,4,5)
ES9对象也可以使用了:
var obj={
a:1,
b:2,
c:3,
}
var {a,...x}=obj;
console.log(a);//1
console.log(x);//{b:2,c:3}
数组深拷贝(slice API),那对象深拷贝怎么办?
var obj1={
a:1,
b:2,
c:3,
}
var obj2={...obj1};//对象深拷贝,脱了衣服再穿一个新衣服
obj2.a=100;
console.log(obj1)
console.log(obj2)
2、正则表达式-命名捕获组
// var str="500103198602215933";//格式化:1986年2月21日
//
// var reg=/\d{6}(\d{4})(\d{2})(\d{2})\d{4}/;
//
// str=str.replace(reg,(a,b,c,d,e,f)=>{
// return b+"年"+c+"月"+d+"日"
// })
//
// console.log(str);
//代码很难读懂,并且改变正则而表达的结构有可能匹配到的对象有所改变,ES9允许命名捕获组使用?<自定义name>
var str="500103198602215933";//格式化:1986年2月21日
var reg=/\d{6}(?<年>\d{4})(?<月>\d{2})(?<日>\d{2})\d{4}/;
var rs=reg.exec(str);//查找,支持正则,既可以得到下标,又可以得到所有的内容
console.log(rs.groups.年);
console.log(rs.groups.月);
console.log(rs.groups.日);
ES10
1、flat() 方法会按照一个可指定的深度,递归遍历数组,并将所有元素与遍历到的子数组的元素合并为一个新数组
例如:一个数组中有很多层,第一层数组中还有第二层,第三层..n层
var arr=[10,20,[30,40],[50,[60]],[70,[80,[90]]]];
//将数组里面前三层数组进行了扁平化
var newArr=arr.flat(3);
console.log(newArr);//[10,20,30,40,50,60,70,80,90]
2、flatMap() 方法首先会映射函数映射每个元素,然后将结果压缩成一个新数组
注意一:flatMap是先map操作,再做flat操作
注意二:flatMap的flat相当于深度为1
var arr=["hello world","hello coder","你好 世界"];
var arr2=arr.flatMap(str=>str.split(" "));//即带有map遍历操作,又带有flat扁平化操作(不能设置扁平化的级别,只能固定为1层)
console.log(arr2);
3、trimStart/trimEnd
ES10之前去掉一个字符串首尾的空白,我么们可以通过trim方法,如果单独去掉前面或后面?
ES10为我们提供了trimStart/trimEnd
ES11
全局对象全新写法
比如在浏览器中可以通过过window来获取
比如在Node服务器端中可以通过global来获取
在ES11中对获取全局对象进行了统一的规范:globalThis
for...in循环标准化
在ES11之前,虽然很多浏览器支持for...in来遍历对象类型,但是并没有被ECMA标准化
ES12
逻辑赋值运算符
function f1(a){
// a||="默认值";
// console.log(a);
// }
// f1("我是新值");
// var obj={
// "name":"钟sir"
// }
//
// obj&&=obj.name;
//
// console.log(obj);
ES13
at() - 获取字符串、数组的元素,跟下标差不多,但是他支持负数参数
var arr=[1,2,3,4,5];
console.log(arr[0]);
console.log(arr[arr.length-1]);
console.log(arr.at(0));
console.log(arr.at(-1));
var str="hello";
console.log(str.at(0));
console.log(str.at(-1));