ES6

1.let

let: 声明一个不会被提前的变量,用来替换 var
原理: 自动使用匿名函数自调方式,包裹块内的代码

2.箭头函数

使用场合:所有的回调函数都可以用箭头函数简化
语法:
    1. 去function加=>
    2. 更简化: 如果只有一个参数,可省略()
    3. 更简化: 如果回调函数中只有一句话,可省略{}
        强调: 如果只有一句话,则结尾;不要!
        更简化: 如果仅有一句return可继续省略return
特点: 箭头内外共用同一个this
特例: 如果希望内外this不通用时,就不能用箭头函数

3.参数增强

1.默认值(default):ES6中可对参数指定默认值。

调用时,如果没有传入参数值,则默认使用提前指定的默认值
比如: Array.prototype.indexOf=function(elem,fromi=0){
   //fromi=fromi||0;
 }
注意: 有默认值的参数,必须放在参数列表的最后

2.剩余(rest): 当传入函数的参数个数不确定时,可用...接住剩余的一切参数——代替arguments

使用场合: 只要参数个数不确定
arguments的3大问题:
    1. 总是获得全部参数,不能有选择的获得部分
    2. 是类数组对象,不是纯正的数组,不能使用数组API
    3. 不能改名
语法: 在函数定义时的参数列表中: (其它固定参数, ...数组名)
  优点: 1. 可有选择的获得部分参数
     2. 是纯正的数组
     3. 可自定义名称
今后都用rest代替arguments

3.散播(spread):在函数调用时,用...打散数组类型的参数为单个元素,再传入函数——代替apply

使用场合:如果函数本身需要多个参数单独传入,而需要传入的确是数组时
用法:在调用时,传入参数时用"...数组"打散数组参数,单个元素分别传入
例如:求数组中最大/小值可以用 Math.max(...arr)/Math.min(...arr)

4.模板字符串

1.定义:支持内置表达式的字符串拼接,来简化字符串拼接

2.语法:

1. 模板字符串必须用` `包裹
2. 如果包含需要动态计算的表达式,则用${}包裹
3. 反引号内默认支持换行

练习:使用模板字符串格式按照指定格式输出

        let price=12,count=5;
        console.log(`
            单价:¥${price.toFixed(2)}
            数量:${count}
        ====================================
            总价:${(price*count).toFixed(2)}
        `);

5.解构

1.定义:将一个对象或数组中的成员,分别赋值给多个单独的变量,为了简化批量赋值

2.数组解构(靠下标对应)

    let arr=[1,2,3];
    [a,b,c]=arr;
    console.log(a,b,c);  //1 2 3

3.对象解构(靠属性名对应)

    let date={y:2020,m:11,d:25};
    {y:year,m:month,d:date}=date;
    console.log(year,month,date); //2020 11 25

4.函数调用时解构

  定义函数时: function fun({y:y,m:m,d:d}){...}
  调用时:
    let date={y:2020,m:11,d:25};
        fun(date)  //2020 11 25

6.for of

 语法: for(var elem of arr)
   elem可直接获得arr中每个元素值
 作用: 代替for循环,遍历下标为数字的数组或类数组对象
 注意: 不能遍历关联数组和对象,因为下标不是数字
 缺点: 
  1. 无法获得下标——要用下标时,不能用for of
  2. 只能遍历所有,不能有选择的遍历
  3. 只能从前向后

7.class类型

1.作用:封装一类对象统一结构和API的 程序结构,为了简化js中的面向对象

2.步骤:

简化类型定义——封装: 
  1. 用class 类型名{}包括之前的构造函数和原型对象方法
  2. 构造函数名升级为class名, 构造函数更名为constructor关键词
  3. 原型对象方法不用写类型.prototype和function
     直接写在class中的函数,自动添加prototype中
简化继承: 
   1. class 子类型 extends 父类型
     类似于: 
		Object.setPrototypeOf(
			子类型.prototype, 父类型.prototype
        );
   2. 借用父类型构造函数: super(参数...)
     不用call,不用this!
     其中: super特指父类型构造函数,且自动用当前正确this替换父类型构造函数中的this
       super.父类型原型方法()

3.静态方法

  定义: 不需要实例化对象,就可直接访问的成员,只要一个方法,不需要实例化也能使用时
  原理: 相当于直接定义在构造函数对象上的方法
  语法: static 方法(){...}

 访问器属性: 
  get 属性名(){ return this._属性名;}
  set 属性名(val){
    if(判断)
      this._属性名=val;
    否则
      报错
  }}

8.Promise

1.作用:回调函数的一种更直观的写法,为了规范回调函数的使用

2.步骤

  1. 前一个函数定义不要在参数上写callback
  2. 前一个函数定义中: 用一个巨大的Promise对象包裹函数的内容,并将Promise对象返回
    Promise的参数是一个巨大的回调函数:
      1. 参数: callback: 用于接收将来承诺要做的后续函数
      2. 函数体: 包括原正常执行的逻辑,并在逻辑中决定何时调用callback
  3. 调用前一个函数时,可用.then传入下一项任务的函数对象作为回调函数

3.错误处理

  1. promise的函数参数,有第二个回调函数参数,用于在出错时调用                        
   then  catch 
        return new Promise(function(resolve,reject){
      正常逻辑中:
      如果正确执行, 调用resolve()
      如果出错,调用reject("错误信息"/错误对象)
    })
  强调: 如果前一个函数调用了reject相当于抛出一个错误,不处理,程序就闪退
  2. 错误处理: 
    在调用时,最后一个then的结尾追加
     .catch(function(err){//err接住reject的参数
        错误处理代码
     })

4.等待多个任务完成才执行

  语法: Promise.all([ 函数1(), 函数2(), .......]).then(end)
   1. 数组中的多个函数,并行!
   2. 数组中最晚的任务执行后,自动调用end

 

posted @ 2020-11-24 17:06  you_rgb  阅读(115)  评论(0)    收藏  举报
//一下两个链接最好自己保存下来,再上传到自己的博客园的“文件”选项中