ES7~ES11整理
目录
一、ES7
1.1、includes()
1.2、** 指数操作符
二、ES8
2.1、async函数+await表达式
2.2、对象方法扩展
三、ES9
3.1、rest参数、扩展运算符
3.2、正则扩展
3.2.1、命名捕获分组(a标签有问题)
3.2.2、正向断言与反向断言
3.2.3、dotAll模式
四、ES10
4.1、Object.fromEntries()将二维数组转为对象
4.2、字符串扩展方法trimStart()和trimEnd()
4.3、数组扩展方法flat和flatMap
五、ES11
5.1、Promise.allSettled()方法
5.2、字符串String.prototype.matchAll()
5.3、可选链操作符?.
一、ES7
1.1、includes()
includes:判断数组/字符串中是否含有某元素，返回布尔值
eg: const Isweeday = ['周一', '周二', '周三', '周四'];
console.log(Isweeday.includes('周二'), '判断', Isweeday.includes('周日'));//true '判断' false
1.2、** 指数操作符
**:指数操作符，实现幂运算，等同于Math.pow()
eg: console.log(2 ** 10, '相同', Math.pow(2, 10));//1024 '相同' 1024
二、ES8
2.1、async函数+await表达式
// 创建promise对象
const p = new Promise((resolve, reject) => {
// resolve("用户数据");
reject("失败了");
})
// await表达式 要放在async函数中,一旦失败借助try{...}catch{...}捕获异常
async function main() {
try {
let result = await p;
console.log(result, '成功');//resolve==> 成功
} catch (e) {
console.log(e, '失败');//reject==> 失败
}
}
// 调用函数
main()(实际应用：发送请求)
左边为promise形式的，右边为async+await形式的(可以一次性接多个)
2.2、对象方法扩展
let obj={
name:'小花',
year:['2001','2002','2003'],
class:'九年级一班'
}
// 获取对象所有的键
console.log(Object.keys(obj));//['name', 'year', 'class']
console.log(Object.values(obj));//获取对象所有的值
// 将对象的键和值整合为数组
console.log(Object.entries(obj));//['name', '小花']...
// 创建Map
const m=new Map(Object.entries(obj))
console.log(m.get('class'));//九年级一班三、ES9
3.1、rest参数、扩展运算符
function connect({ host, port, ...user }) {
console.log(host, port, user);//127.0.0.1 3306 {username: 'root', password: 'root123'}
}
connect({
host: '127.0.0.1',
port: '3306',
username: 'root',
password: 'root123'
})
let obj1 = {
name: 'dan'
}
let obj2 = {
age: '18'
}
const total = { ...obj1, ...obj2 }
console.log(total);//{name: 'dan', age: '18'}3.2、正则扩展
3.2.1、命名捕获分组(a标签有问题)
let str = "标题
"
const reg1 = /(.*)<\/h1>/;
const reg2 = /(?.*)<\/h1>/;
const result = reg2.exec(str)
console.log("result", result);
// ["标题
", "标题", { groups: { text: '标题' } }]
let str1 = "href='http://www.baidu.com'"
const reg = /href='(.*)'/;
// http://www.baidu.com
3.2.2、正向断言与反向断言
含义:根据指定信息寻找相关内容
let strVal = 'QAZEDC2354你看这里5555啦啦啦'
// const reg = /\d+(?=啦)/;//正向断言
const reg = /(?<=里)\d+/;//反向断言
console.log(reg.exec(strVal));['5555']3.2.3、dotAll模式
一般对于内容为html元素的数据，想要拿到里面的文本内容，可以借助它。
ES11里的matchAll也可以做到下面的效果。
let strHtml = `
-
救赎
上映日期：11月
-
晚安
上映日期：2月
`
// const reg = /\s+(.*?)<\/h1>\s+
(.*?)<\/p>/;//非dotAll模式
const reg = /
.*?(.*?)<\/h1>.*?
(.*?)<\/p>/gs;//dotAll模式,加上g，可以拿到所有
let result;
let data = []
while (result = reg.exec(strHtml)) {
data.push({ title: result[1], time: result[2] })
}
console.log(reg.exec(strHtml), data);
四、ES10
4.1、Object.fromEntries()将二维数组转为对象
const result = Object.fromEntries([
['name', 'lisa'],
['subject', 'Java,html,c++']
])
console.log(result);//{name: 'lisa', subject: 'Java,html,c++'}ES8 Object.entries()将对象转为二维数组，这两个可以说是逆运算
const result = Object.entries({ name: 'lisa', subject: 'Java,html,c++' })
console.log(result);
4.2、字符串扩展方法trimStart()和trimEnd()
ES5里有个trim(),去除所有空格，这两个就是去除前面和后面的空格
let str=' Iloveyou '
console.log(str);
console.log(str.trimStart());
console.log(str.trimEnd());
4.3、数组扩展方法flat和flatMap
flat(n):将多维度数组转为低位数组,n是深度
const arr = [1, 2, 3, [5, 6, 7]]
console.log(arr.flat());// [1, 2, 3, 5, 6, 7]
// 三维数组转一维数组 ,深度为2
const arr2 = [2, 4, 6, [1, 3, [8, 9], 5]]
console.log(arr2.flat(2));// [2, 4, 6, 1, 3, 8, 9, 5]flatMap():将循环里的数组转为低位数组
const brr = [9, 8, 7].flatMap(item => [item * 10])
console.log(brr);// [90, 80, 70](flatMap) [[90],[80],[70]](map)五、ES11
5.1、Promise.allSettled()方法
多个promise异步情况，想获取所有结果，用all、allSettled都可以。
不过前者一旦异步出错，就会报错，而后者可以拿到任何可能的结果。
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('数据---1')
}, 1000);
})
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
// resolve('数据---2')
reject('数据---2')
}, 1000);
})
const result = Promise.all([p1, p2]);
const result2 = Promise.allSettled([p1, p2]);
console.log(result,result2);
5.2、字符串String.prototype.matchAll()
快速提取html文本内容，结合循环，和ES9的dotAll模式作用相同。
let strHtml = `
-
救赎
上映日期：11月
-
晚安
上映日期：2月
`;
const reg = /.*?(.*?)<\/h1>.*?
(.*?)<\/p>/gs
const result = strHtml.matchAll(reg)
// for (let v of result) {
// console.log(v);
// }
const arr = [...result]
console.log(arr);
5.3、可选链操作符?.
?.比对象一直.属性更快速找到对应的属性值
function main(config) {
// const dbHost = config && config.db && config.db.host;
const dbHost = config?.db?.host;//可选链操作符
console.log(dbHost);//120.0.0.1
}
main({
db: {
host: '120.0.0.1',
username: 'root'
}
})