当前位置：首页 > news >正文

ES6ES6

news 来源：原创 2024/11/30 1:33:46

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>