ES6新语法

相关名词介绍

• ECMA 欧洲计算机制造商协会 制定标准的组织
• ECMA-262是其中(标准)的一个,即ECMAscript
• ES6版本变动内容最多，具有里程碑意义，加入很多新语法特性，编程更加简单高效
• ECMA-262只是纸面标准，实践当中需要每个浏览器厂商对标准进行实现，因此有兼容性的问题

let

• 变量不能重复声明(var可以)

  let a=1
  let a=2//出错

• 块级作用域 只在代码块有效
• 不存在变量提升
  • 变量提升：变量可以在声明之前进行初始化和使用。
  • 只会提升声明，不会提升其初始化
• 不影响作用域链
• 经典案例:循环绑定事件

  for (var i=1;i<items.length;i++){
    items[i].onclick = function(){
      items[i].style.background = 'pink'//绑定完事件后i=3,当点击触发click事件时该语句作用域内找不到i,向上级找，在全局window中找到了i，但此时i是3，出错
    }
  }
  //解决方法：1.var 改成let,2.this.style.background

const

• 一定要赋初始值
• 一般常量名是用大写
• 常量值不能修改
• 块级作用域
• 对于数组和对象的元素修改，不算做对常量的修改(常量指向的引用地址没有改变)

async/await

• 用同步的方法写异步代码
• async函数永远返回一个promise,async/await是基于Promise的语法糖
  js是单线程编程语言(界面逻辑，网络请求，数据处理等都运行在一个进程) ：
  • 无需考虑线程同步或资源竞争问题
  • 从源头上避免了线程之间的频繁切换，降低了线程自身的开销

js两种实现异步的方式

• 回调函数 会产生如下图示的回调地狱
  
• Promise应运而生(fetch是js中一个使用了Promise的API)(承诺这个请求会在未来某个时刻返回数据)

  fetch("https://...")
    .then((res)=> res.json())
    .then((json)=>console.log(json))
    .catch((error)=>console.log(error))//如果之前任一个then出现错误，那么catch会被触发，后面的then将不会执行
    .finally(()=>{})//执行清理工作

  promise的链式调用避免了代码的层层嵌套，提升了可读性
  async/await es8/ECMA17引入,基于promise之上的一个语法糖，让异步操作更加简洁