day32 Es7-13

74 阅读5分钟

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)和值(下标1Object.entries(obj)
			
			var wsc={
				"name":"王思聪",
				"age":40,
				"hobby":"吃屎"
			}
			
			var arr=Object.entries(wsc);//[["name","王思聪"],["age",40],["hobby","吃屎"]]
3String 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、***asyncawaitasync是一个关键字放在函数前面,用于表示函数是一个异步函数,异步函数也就意味着该函数的执行难不会阻塞后续代码
			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));