ES7-11新特性

ES7

Array.prototype.includes

用来检测数组中是否包含某个元素

指数操作符

**：与Math.pow一样

ES8

async函数

• 返回值为promise对象
• promise对象的结果由async函数执行的返回值决定

async function fn(){
	//返回一个字符串
	return "a";  //Promise {resolved: "a"}
	//返回的结果不是一个Promise类型的对象，返回结果就是成功Promise对象
	return; //Promise {resolved: undefined}
	//抛出错误，返回的结果是一个失败的Promise
	throw new Error('出错啦！');  //Promise {rejected: Error:出错啦！}
	//返回的结果如果是一个Promise对象
	return new Promise((resolve, reject)=>{
		resolve('成功的数据');
	});  //Promise成功or失败
}
const result = fn()
console.log(result)

await表达式

• 必须写在async函数中
• 右侧的表达式一般为promise对象
• 返回的是promise成功的值
• await的promise失败，则抛出异常，需通过try…catch捕获处理

//创建promise对象
const p = new Promise((resolve, reject)=>{
	resolve("成功的值！");//or
	reject("失败了！");
})
async function main(){
	let result = await p;
	console.log(result);  //成功的值！
	//or
	try {
		let result = await p;
		console.log(p);
	} catch(e){
		console.log(e);
	}  //失败了！
};
main()

对象方法扩展

• Object.values()：返回一个给定对象的所有可枚举属性值的数组
• Object.entries()：返回一个给定对象自身可遍历属性[key, value]的数组
• Object.getOwnPropertyDescriptors：返回指定对象所有自身属性的描述对象

const school =  {
	name:"尚硅谷",
	cities:['北京','上海','深圳'],
	xueke:['前端','Java','大数据','运维']
};
//获取对象所有的键
console.log(Object.keys(school));  //{"name", "cities", "xueke"}
//获取对象所有的值
console.log(Object.values(school));  //{"尚硅谷", Array(3), Array(4)}
//entries
console.log(Object.entries(school));  //{Array(2), Array(2), Array(2)}: ["name","尚硅谷"],["cities",Array(3)],["xueke",Array(4)]
//对象属性的描述
console.log(Object.getOwnPropertyDescriptors(school)); //{name:{...},cities:{...},xueke:{...}}

ES9

rest参数

function connect({host,port,...user}){
	console.log(host);
	console.log(port);
	console.log(user);
}
connect({
	host: '127.0.0.1',
	port: 3306,
	username:'root',
	password:'root'
});

扩展运算符

const one = {
	a: '1'
}
const two = {
	b: '2'
}
const three = {
	c: '3'
}
const four = {
	d: '4'
}
const total = {...one, ...two, ...three, ...four};
console.log(total) //{a:'1', b:'2', c:'3', d:'4'}

正则扩展

命名捕获分组

//声明一个字符串
let str = '<a href="www.baidu.com">百度</a>';
//提取url与标签文本
const reg1 = /<a href="(.*)">(.*)<\/a>/;
//执行
const result1 = reg1.exec(str);
console.log(result1);  //[<a href="www.baidu.com">百度</a>, www.baidu.com, 百度]

const reg2 = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
const result2 = reg2.exec(str);
console.log(result2);  //[<a href="www.baidu.com">百度</a>, www.baidu.com, 百度]

反向断言

//正向断言
let str = '124七七1787六六';
const reg1 = /\d+(?=六)/;
const result1 = reg1.exec(str);
console.log(result1);  //"1787"

//反向断言
const reg2 = /(?<=七)\d+/;
const result2 = reg2.exec(str);
console.log(result2);  //"1787"

dotAll模式

dot . 元字符，除换行符以外的任意单个字符

let str = `
<ul>
	<li>
		<a>11</a>
		<p>22</p>
	</li>
	<li>
		<a>33</a>
		<p>44</p>
	</li>
</ul>`;

const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
let result;
let data = [];
while(result = reg.exec(str)){
	console.log(result);
	data.push({title:result[1], time:result[2]});
}
console.log(data);

ES10

对象扩展方法

Object.fromEntries()：二维数组转换为对象

字符串扩展方法

let str = '   iloveyou   ';
console.log(str);  //   iloveyou   
console.log(str.trimStart());  //iloveyou   
console.log(str.trimEnd());  //   iloveyou

数组扩展方法

//将多维数组转化为低维数组
const arr = [1,2,3,4,[5,6,[7,8,9]]];
console.log(arr.flat());  //[1,2,3,4,5,6,[7,8,9]]
console.log(arr.flat(2));  //[1,2,3,4,5,6,7,8,9]

//flatMap
const arr1 = [1,2,3,4];
const result = arr.flatmap(item => [item * 10]);
console.log(result);  //[10,20,30,40]

Symbol.prototype.description

s.description获取symbol的描述

ES11

私有属性

#age表示私有属性

Promise.allSettled

const p1 = new Promise((resolve, reject)=>{
	setTimeout(()=>{
		resolve('商品数据 - 1');
		},1000)
});
const p2 = new Promise((resolve, reject)=>{
	setTimeout(()=>{
		resolve('商品数据 - 2');
		},1000)
});
const result = Promise.allSettled([p1,p2])  //一定成功，值为两个promise的结果和状态

String.prototype.matchAll

let str = `
<ul>
	<li>
		<a>11</a>
		<p>22</p>
	</li>
	<li>
		<a>33</a>
		<p>44</p>
	</li>
</ul>`;

const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg;
const result = str.matchAll(reg);
const arr = [...result];

可选链操作符

function main(config){
	const dbHost = config?.db?.host;
	console.log(dbHost);
}
main({
	db:{
		host:'1111',
		username:'root'
	},
	cache:{
		host:'2222',
		username:'admin'
	}
})

动态import

实现按需加载，提高执行效率

BigInt

let n = 521n;
console.log(n, typeof(n)); //521n “bigint”

BigInt(123) //123n
大数值运算

绝对全局对象

始终指向全局对象