ES8-ES8 新特性
4.1.async 和 await
async和await 两种语法结合可以让异步代码像同步代码一样
4.1.1.async函数
- async函数的返回值为 promise 对象，
2.promise 对象的结果由 asynt函数执行的返回值决定
4.1.2await表达式 - awaity必须写在 async 函数中
2.await 右侧的表达式一般为 promise 对象 - await 返回的是 promise 成功的值
- await 的 promise 失败了，就会抛出异常，需要通过 try…catch 捕获处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//发送AJAX请求，返回的结果是promise对象
function sendAJAX(url) {
return new Promise((resolve, reject) => {
//1.创建对象
const x = new XMLHttpRequest()
//2.初始化
x.open('GET', url)
//3.发送
x.send()
//4.事件绑定
x.onreadystatechange = function () {
if (x.readyState === 4) {
if (x.status >= 200 && x.status < 300) {
//success
resolve(x.response)
} else {
//err
reject(x.status)
}
}
}
})
}
//promise then 测试
sendAJAX("https://api.apiopen.top/api/getHaoKanVideo?page=0&size=2").then(value => {
console.log(value)
}, reason => { })
async function main() {
try {
let result = await sendAJAX('https://api.apiopen.top/api/sentences')
} catch {
}
}
main()
</script>
</body>
</html>
4.2.0bject.values 和 Object.entries
1.object.values()方法返回一个给定对象的所有可枚举属性值的数组
2.object.entries()方法返回一个给定对象自身可遍历属性[keyvalue] 的数组
4.3.ObjectgetOwnPropertyDescriptors
该方法返回指定对象所有自身属性的描述对象
const jier = {
name: '咕咕咕咕',
maomao: ['奶牛', '狸花', '橘猫', '三花', '大白']
}
//获取对象所有键
console.log(Object.keys(jier))
//获取对象的所有值
console.log(Object.values(jier))
//entires
console.log(Object.entries(jier))
//创建Map
const m = new Map(Object.entries(jier))
console.log(m.get('maomao'))
//对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(jier))
const obj = Object.create(null, {
name: {
//设置值
value: '黑白',
//属性的特性
writable: true,
configurable: true,
enumerable: true
}
})
ES9-ES9新特性
- 扩展运算符与rest参数
- 正则命名分组
- 可选链操作符（很实用）
1.扩展运算符与rest参数
Rest 参数与 spread·扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组在ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符
function connect({ host, ...user }) {
console.log(host)
console.log(user)
}
connect({
host: '127.0.0.1',
port: 3306,
username: 'root',
password: 'root'
})
const skillOne = {
q: 'llalal1'
}
const skillTwo = {
w: 'OiOi哦熊'
}
const skillThree = {
e: '扣扣扣了'
}
const mmm = { ...skillOne, ...skillTwo, ...skillThree }
console.log(mmm)
2.正则命名分组
<script>
let str = '<a href="http://www.baidu.com">百度</a>'
//提取url和标签文本
const reg = /<a href="(.*)">(.*)<\/a>/
const result = reg.exec(str)
console.log(result)
//（.*）是占位符
</script>
let str = '<a href="http://www.baidu.com">百度</a>'
//提取url和标签文本
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/
const result = reg.exec(str)
console.log(result)
3.可选链操作符（很实用）
<script>
function main(config) {
//const dbHost = config && config.db && config.db.host
const dbHost = config?.db?.host
console.log(dbHost)
}
main({
db: {
host: '193.23.45.67',
username: 'root'
}
})
</script>
