ES5+ES6+ES7特性整理

ES6

内容

• 语法

  • 定义变量 const let
  • 结构解析

• 增强

  • 字符串增强

    • 模板字符串

    • repeat()
      

    • padEnd() padStart()
      

      • length 参数
      • str 参数

    • trim()
      

    • for of
      

    • includes
      

    • startsWith() endsWith()
      

  • 数组增强

  • 函数增强

1 语法

• 定义变量
• 结构解析

1.1 定义变量

• 块级作用域 作用的范围
• 优点
  • 具有块级作用域
  • 防止变量全局污染
  • 防止变量提升带来的问题

1.1.1 let 定义

• 在for循环中可以使用
• 可以不赋值,只定义

let a = 10
let b

1.1.2 const 定义

• 需要定义并且赋值
• 在闭包或者函数中使用较多

const b = 10

1.2 结构解析

• 取值比较方便
• 又称结构赋值
• 开发中调用接口取值的时候使用较多

1.2.1 使用

let a = {
    data: {
        message: [1,3,4]
    }
}
let res = { data: { message: } } 

2 增强

2.1 字符串增强

• trim()
• includes()
• startsWith() 和endsWith()
• padEnd() 和 padStart() ES7
• repeat()

2.1.1 trim()

• 去掉字符串前后空白

2.1.2 includes()

• 判断字符是否存在
• 返回值为boolean类型

2.1.3 startsWith() 和 endsWith()

• 判断第一个字符或者最后一个字符是否为参数
• 返回值为boolean类型

2.1.4 padEnd() 和 padStart()

• ES7语法

• 以第二个参数填充

• 两个参数

  • 第一个参数为:length 填充后的字符长度

  • 第二个参数为:str 要填充的字符

     let str= "hello"
     console.log( str.padStart(9,'0')) // 0000hello
    

2.1.5 repeat()

• 重复

2.1.6 模板字符串*

• ${}
• 在开发中使用较多

2.2 数组增强

2.2.1 ES5的高阶函数

some

• 无返回值 boolean

• 可以写一些业务逻辑

• 只要有满足的就返回true

  let res3= obj.some((el,index)=>{
          if(el.id===2){
              return true
          }
      })
      console.log(res3)// true
  

filter

• 有返回值 返回一个新的数组 并且每一项不能修改

   let res= arr.filter((el,index)=>{
        if(el > 4){
            return true
        }
    })
    console.log(res)// [5, 7]

every

map

• 有返回值 返回一个新的数组 并且每一项可以修改

 let  a =arr.map((el,index)=>{
        if(el > 4) {
            return el + 1
        }
    })
    console.log(a) // [undefined, undefined, 6, 8]

forEach

• 无返回值
• 不会终止函数

 let arr = [1,3,5,7]
    arr.forEach((el,index)=>{
        console.log(el)
    })

2.2.2 ES5 的其他函数

indexOf 和 lastIndexOf

indexOf

lastIndexOf

reduce 和 reduceRight

reduce

reduceRight

find 和 findIndex

find

• 返回查找的结果

• 有返回值

  let res=obj.find((el,index)=>{
          if(el.id===1){
              return true
          }
      })
      console.log(res) // {id: 1, name: "lay"}
  

findIndex

• 返回查找结果的索引

• 有返回值

  let res2=obj.findIndex((el,index)=>{
          if(el.id===1){
              return true
          }
      })
      console.log(res2)// 1
  

2.2.3 ES6数组方法

includes

• 与字符串的方法用法相同

fill

• 填充 将字符串的所有元素都替换(初始化数组)

• 可以传参 —>第一个参数是填充的元素 第二个参数是被填充元素的起始位置,第三个参数是结束位置

• 会改变原来数组

  let arr = [1,3,2]
          arr.fill(7)
          console.log(arr) // [7,7,7]
          let arrs = [1,3,2,2]
          arrs.fill(7,2,3)
          console.log(arrs)//[1, 3, 7, 2]
  

2.2.4 伪数组的处理

Array.from

• 将伪数组变成数组,从而可以使用数组的方法

Array.from(arr)

Array.of

• 将元素合并成为一个数组

  Array.of(1,2,3)// [1,2,3]
  

2.3 对象增强

简化

键和值相同时可以合并

可以直接写方法和函数

键可以放拼接的值(包裹)

• ['a'+'b']:"拼接"
• 常量可以包裹

方法

Object.is() 严格相等===

• 对象为引用类型 不全等

Object.assign() 拷贝

• Object.assign({},obj1,obj2)
• 将对象的赋给第一个对象上面 会改变原来的对象

2.4 函数增强

默认参数

普通默认参数

test(x=1){}

结构解析默认参数

test({x,y=1}){}

不定参数

ES5

• 在ES5当中用arguments(伪数组),但是不能使用数组方法

ES6

• reset参数+扩展运算符

   let arr = [1,3,2,5,2]
              function test (...reset){
                  let res=0
                  reset.forEach((el)=>{
                      res+=el
                  })
                  return res
              }
              let [ , ,...newArr]= arr
              console.log(test(...newArr)) //9 后三项和为9 
  

箭头函数

• 箭头函数使函数看起来更加简单

3 ES6模块化

3.1 Number

• 减少全局属性的方法
• 属于Number方法的挂载到Number的原型上,使其模块化

3.1.1 isFinite()

• 判断是不是无限数

3.1.2 isNaN()

• 判断是否是一个数

3.1.3 parseInt()

• 取整 一般可以去掉单位方便计算

3.1.4 parseFloat()

• 取小数

3.1.5 EPSILON

• 精确浮点数

3.2 Math

3.2.1 trunc()

• 去除一个数的小数部分

3.2.2 sign()

• 判断一个数是正数 负数 0

3.2.3 cbrt()

• cbrt() 计算一个数的立方根

3.2.4 ** 指数

• 计算一个数的指数

  2 ** 2  = 4
  

3.3 全局

• isInteger()
• isSafeInteger()

4 遍历

4.1 ES6前

4.1.1 遍历对象

for in

  let obj= {
            id:0,
            name:'sheep'
        }
        for ( let el in obj){
            console.log(el,obj[el])
        }
// id 0
// name sheep

4.1.2 遍历数组

for

forEach

4.2 ES6

for of

• 可以遍历对象
• 可以遍历数组
• 遍历索引(keys) 遍历值(value) 遍历索引和值(entries)

遍历对象

let obj= {
            id:0,
            name:'sheep'
        } 
for ( let el of Object.entries(obj)){
            console.log(el)//["id", 0] ["name", "sheep"]
        }

遍历数组

let arr = [1]
        for (let el of Object.entries(arr)){
             console.log(el)// ["0", 1]
        }

5 新增类的继承

ES5继承

• ES5中没有类的概念
• ES5 组合继承
  • 冒充继承(call)
  • 原型继承(子类的原型指向父类的实例)

原生继承

• 子类可以继承父类的属性
• 子类不能继承父类的方法
• 子类以冒充的形式继承(call)

实现

 		// 父类
        function Person(name,age){
            this.name=name
            this.age=age
        }
        //子类
        function Son(name,age){
            Person.call(this,name,age) // 继承
        }
        // 使用
        let son=new Son("lay",12);
        console.log(son)//Son{name: "lay", age: 12}

原生继承+原型继承

• 子类可以继承父类的属性
• 子类可以继承父类的方法
• 子类原型指向父类的实例

实现

• 子类的原型=父类的实例

    		// 父类
          function Person(name,age){
              this.name=name
              this.age=age
          }
          Person.prototype.say=()=>{
              console.log("hhhh")
          }
          //子类
          function Son(name,age){
              Person.call(this,name,age) // 继承
          }
          // 原型继承
          Son.prototype= new Person()
          // 使用
          let son=new Son("lay",12);
          console.log(son)//Son{name: "lay", age: 12}
          son.say() // hhhh
  

ES6 类继承

• 关键字 extends super class constructor

实现

       // 父类
        class Person{
            constructor(name,age) {
                this.name=name
                this.age=age
            }
            say(){
                console.log('hello')
            }
        }
        // 子类
        class Son extends Person{
            constructor(name,age,hobby) {
                super(name,age);
                this.hobby=hobby
            }
        }
        // 实例化
        let son = new Son('lay',12,'sing')
        console.log(son)//Son{name: "lay", age: 12}
        console.log(son.hobby)// sing
        son.say()// hello

6 异步处理promise

• 背景

  • 原因:解决回调地狱问题(函数的嵌套)
    • ES5前:会出现回调地狱,如果想要实现异步的话,需要进行函数嵌套
      • 维护性差
      • 可读性差
      • 代码冗余
    • ES6后: 出现promise 这个对象,使异步像同步那样,解决回调地狱

• 概念

  • 理解: promise 承诺的意思 在此语法中可以理解为承诺做某些事情

  • 明确:

    • 同步: 逐个去执行每一个事件,容易发生阻塞,如果一个事件出错,后面的就不执行了
      • 就像排队买东西,如果这个人没有带钱,收银台不结账,一直等他取到钱后再进行计算下一个人的结算
    • 异步:可以不立即返回结果,不容易发生阻塞
      • 就像排队买东西,如果这个人没有带钱,他可以回家去取,在此之间,收银员会继续下一个的计算收银

  • 作用: promise 可以承诺去完成某个事件,但不会立即反馈结果,使得异步像同步那样操作

• 类型

  • 是一个对象

• 参数

  • 参数是两个回调函数
    • resolve() 异步成功的回调函数
    • reject() 异步失败的回调函数

• 状态

  • unfulfilled —>未完成
  • fulfilled ---->完成
  • failed ---->失败

6.1 类型

6.1.1 promise是一个对象

6.1.2 创建

let promise = new Promise(function(resolve, reject){
    resolve();
});

6.2 参数

6.2.1 resolve

• 执行完毕后触发.then---->一般和ajax一起使用时 在次可以获取返回的数据
• 可以嵌套
  • resolve可以传promise对象,先执行完成该promise对象后再执行resolve的实例

let promise = new Promise(function(resolve, reject){
    resolve(promise);
});

6.2.2 reject

• 执行完毕后触发.catch

let promise = new Promise(function(resolve, reject){
    reject(promise);
});

6.3 状态

6.3.1 unfulfilled 未完成

6.3.2 fulfilled 完成

6.3.3 failed 失败

6.4 方法

6.4.1 promise.all()

• 所有实例都执行
• 参数是promise对象组成的数组

let promise = Promise.all([p1, p2, p3])

6.4.2 promise.race()

• 优先执行实例
• 参数是promise对象组成的数组

let promise = Promise.race([p1, p2, p3])

6.5 回调函数

6.5.1 then

• 成功触发的回调
• 一般在ajax请求中,接收返回值(数据)

6.5.2 catch

• 失败触发的回调

6.5.3 finally

• 无论成功还是失败都触发的回调

6.5 缺点

• promise一旦执行，无法中途取消
• promise的错误无法在外部被捕捉到，只能在内部进行预判处理
• promise的内如何执行，监测起来很难
• promise的状态一旦改变不可逆

7 ES7 async+await

7.1 背景

• promise 一旦执行无法中途取消----->无法中断
• promise 支持链式编程 ---->代码可读性差,并且异常抛出后不能向下执行
• promise 在内部执行,错误无法捕获到

7.2 作用

• 解决promise无法中断问题
• 解决链式编程不能向下执行问题
• 解决无法捕获的问题

7.3 使用

7.3.1 使用

• async 本质上返回的是一个promise对象

async test (){
    const res = await function () {  
    }
}

7.3.2 中断问题

• return

async test (){
    const res = await function () {      
    }
    return 
 }

7.3.3 捕获问题

• try catch 解决

async test () {
    try{
        const res = await function () {
            
        }
    }catch(error){
        console.log(error)
    }
}

参考

promise
async+await