前端培训丁鹿学堂：es7_es11常用新特性（三）

async/await

为了解决回调地域的问题，es6引入了promise，而处理流程比较复杂的话，那么整段代码将充斥着 then，语义化不明显，代码不能很好地表示执行流程。
es7引入了async/await ,他们是要一起配合使用的。前面添加了async的函数在执行后都会自动返回一个Promise对象。async函数中使用await，
那么await这里的代码就会变成同步的了，意思就是说只有等await后面的Promise执行完成得到结果才会继续下去，await就是等待

async function test () {
    try {
      let response1 = await fetch('https://xxxxxx/')
      console.log(response1)
      let response2 = await fetch('https://xxxxxx/')
      console.log(response2)
    } catch (err) {
      console.error(err)
    }
  }
  test()
1
2
3
4
5
6
7
8
9
10
11

trimStart() 和trimEnd() 方法

trimStart() 方法从字符串的开头删除空格，trimLeft()是此方法的别名
trimEnd() 方法从一个字符串的右端移除空白字符，trimRight 是 trimEnd 的别名

let str = '   hhh  '
console.log(str.length) // 8
str = str.trimEnd() 
console.log(str.length) // 6
1
2
3
4

es11

空值合并操作符（ ?? ）

空值合并操作符（ ?? ）是一个逻辑操作符，当左侧的操作数为 null或者undefined时，返回其右侧操作数，否则返回左侧操作数
与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。而?? 只会在左侧为null或undefined时才返回右边的内容，如果左侧是’'或者0的时候，仍然返回的是左侧的内容

const aaa = undefined ?? "aaa"
const bbb = null ?? "bbb"
console.log(aaa) // aaa
console.log(bbb) // bbb
1
2
3
4

可选链操作符( ?. )

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为 null 或者 undefined 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined
可选链不能用于赋值

let obj = {
  name:'zhangsan',
  age:19,
  play(){
    return 'pingpang'
  }
}
let name = obj?.name
let age = obj?.age
let sex = obj?.sex
let result1 = obj.play?.()
let result2 = obj.play2?.()
console.log(name,age,sex,result1,result2); // zhangsan 19 undefined pingpang undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14