张锐杰-20221128-JS高阶05

• BABEL（JS翻译器）ES6翻译成ES5
• 解构赋值
  
  • 解构数组：const arr = [1,2,3]; 从数组中把值取出来，放在3个变量中保存。
    let [变量1，变量2，变量3] = arr;
    使用let一次声明3个变量，按照顺序，把数组中的值取出来，赋值给对应的变量
    
  • 解构对象：变量名一定是键名，不然值会报错
    const user = {
         key1:value1,
         key2:value2
    ​}
    let {key1,key2} = user
    
  • 解构函数参数：本质还是解构数组和解构对象
    参数是数组
    function fn1([a, b, c]) {
    console.log(a, b, c);
            }
    fn1(['html', 'css', 'js']);
    
    参数是对象
    function fn2({ name, age }) {
    console.log(name, age);
            }
    fn2({ name: '小白', age: 18 });
    
• 模板字符串
  
  • 解决字符串拼接问题：``
    字符串${变量名，表达式}字符串
    表达式：能够算出唯一结果的一句代码
    
• 对象的简写
  
  • 对象的简写：
    1.key和value相同，可以省略，
    2.对象中的方法，可以省略  ：  function
    
• ES6的类
  
  • 语法：
    //创建类
    class Person {
    //1.构造函数
    constructor(name, age) {
    this.name = name;
    this.age = age;
                }
    //2.原型方法
    eat() {
    return '吃饭';
                }
    //静态方法
    static way() {
    return '走路';
                }
            }
    
  • 继承：
    
    • 子类继承父类：class Programmer extends Person{}。关键字：extends
      
    • 继承父类属性：super(name,age); 关键字：super
      
• ES6模块导入导出
  
  • 语法：
    方式一：单个暴露
    暴露---导出：
    export   var   userName  =  ’xxx‘；
    export   function  show  
    
    导入---引入：
    import  {userName，show}  from  '文件路径全称'；
    
    方式二：一起暴露
    导出：
    export   default  {key1:value1,key2:value2,...}
    ​
    导入：
    import  变量  from  '文件路径';
    ​
    
    • 单个暴露 (导出)  export  const  变量名 =  '值';
      
    • 一起暴露 (导出)   只能写一个  export  default
      
    • 导入  这里news指的是.js文件名
      
  • ES6模块化优点：
    
    • 快
      
• 同步和异步
  
  • 同步：代码从上到下执行，后边的代码，必须等前边的代码执行完毕，才能执行
    
  • 异步：代码从上到下执行，遇到异步代码，异步代码让开，等待所有同步代码执行完毕才来执行异步代码
    
  • js中的异步情况
    
    • 定时器的回调函数
      
    • 事件处理函数
      
    • ajax的回调函数