陈紫怡-20221128-js高级-5

一、今日学习内容：

• 解构赋值
  
  • 解构数组
    
    • const  arr=[1, 2, 3];
      
    • 从数组中把值取出来，放在3个变量中保存
      
    • let [变量1，变量2，变量3]=arr;
      
    • 使用let一次性声明3个变量，按照顺序，把数组中的值取出来，赋值给对应的变量
      
  • 解构对象
    
    • const user={
      
    •            key1:value1,
      
    •            key2:value2
      
    • }
      
    • let {key1 , key2}=user;
      
  • 解构函数参数
    
    • 本质还是解构数组和对象
      
    • 参数是数组
      
      • function   fn（[a, b, c]）{}
        
      • fn(['a' , 'b' , 'c' ]);
        
    • 参数是对象
      
      • function   fn（{name,age}）{}
        
      • fn( {name: 'qxx' , age:12 })
        
• 模板字符串
  
  • 解决字符串拼接问题
    
    • `字符串${ 变量名/表达式 }`      
      
    • 表达式：能够算出唯一结果的一句代码
      
• 对象的简写
  
  • key和value相同，可以省略value，只写key
    
  • 对象中的方法，可以省略：function
    
• ES6的类
  
  • 语法：
    
    • class 类名{
      
    •      //构造函数
      
    •      constructor（形参） {
      
    •                //this.挂载
      
    •      }
      
    •      //原型方法
      
    •       方法名（）{    }
      
    •       //静态方法
      
    •         static   方法名（）{     }
      
    • }
      
    • 
      
    • //继承
      
    • class  子类    extends     父类 {
      
    •           constructor（所有的参数）{
      
    •                       super（继承父类的参数）
      
    •           }
      
    • }
      
  • 构造函数的静态方法，他的实例对象不能调用
    
  • 类中属性自动挂载在new出来的实例对象上
    
  • 这些属性最终会成为实例对象的属性，如果不需要传递参数，是写死的，就没有必要放在constructor中
    
• ES6模块导入和导出
  
  • 方式一：单个暴露
    
    • 暴露--导出：
      
      • export   var  userName='xxxx';
        
      • export    function   show
        
    • 导入--引入：
      
      • import { userName ，show } from  '文件路径全称'；
        
  • 方式二：一起暴露
    
    • 导出：
      
      • export   default  { key1:value1 , key2:value2 , . . .}
        
    • 导入：
      
      • import  变量  from   '文件路径'；
        
  • ES6模块化的优势
    
    • 快
      
• 同步和异步
  
  • 同步
    
    • 代码从上到下执行，后面的代码必须等前面代码执行完毕，才能执行
      
  • 异步
    
    • 代码从上到下执行，遇到异步代码，异步代码会让开，等待所有同步代码执行完在执行异步代码
      
  • js中异步的情况（有回调函数的才能是异步）
    
    • 定时器的回调函数
      
    • 事件处理函数
      
    • Ajax的回调函数
      
    • 一个回调函数里面嵌套一个回调函数----回调地狱
      
    • 可读性差，不好维护
      
• Promise
  
  • 作用：
    
    • 控制异步的顺序，解决回调地狱的问题
      
  • 三种状态：进行中，已成功，已失败
    
    • 调用resolve--.then     进行中---->成功
      
    • 调用reject--.catch      进行中---->失败
      
    • finally不管是否成功都会执行