第七节：ES7之includes、幂等运算符 和 ES8之async/await、Object扩展、String扩展、尾逗号

一. ES7 

1. includes

(1). ES7之前，判断数组中是否包含某个元素，一般用 find方法 或 filter方法。

    // ES7之前
    var array1=['1','2','3','5']
    console.log(array1.find(function(item) {
        return item === '2'
    }))   //2
    console.log(array1.filter(function(item) {
        return item === '2'
    }).length > 0)  //true
    console.log('-----------------------')

(2). ES7中引入includes方法

A. 基本用法

    const arr = ['es6', 'es7', 'es8']
    console.log(arr.includes('es6')) // true
    console.log(arr.includes('es9')) // false

B. 从索引处开始查找（包含该索引的内容）

const arr = ['es6', 'es7', 'es8']
console.log(arr.includes('es7', 1)) // true
console.log(arr.includes('es7', 2)) // false
console.log(arr.includes('es7', -1)) // false
console.log(arr.includes('es7', -2)) // true

C.与indexof比较

['a', 'b', 'c'].includes('a') //true
['a', 'b', 'c'].indexOf('a') > -1 //true

console.log(arr.indexOf('es7')) // 1
console.log(arr.indexOf('es7') > -1) // true

PS：

　两者都是采用===的操作符来作比较的，不同之处在于：对于NaN的处理结果不同。我们知道js中 NaN === NaN 的结果是false, indexOf()也是这样处理的，但是includes()不是这样的。

　如果只想知道某个值是否在数组中存在，而并不关心它的索引位置，建议使用includes()。如果想获取一个值在数组中的位置，那么只能使用indexOf方法。

2. 幂等运算符

(1). ES7之前，需要手写方法

   // 自己封装
    function pow(x, y) {
        let res = 1
        for (let i = 0; i < y; i++) {
            res *= x
        }
        return res
    }
   console.log(pow(2, 10))    //1024
   //或者直接Math.pow
   console.log(Math.pow(2, 10)) // 1024

(2). ES7中引入  **

console.log(2 ** 10) // 1024

二. ES8-async/await

1. 说明

　async 和 await 是一种更加优雅的异步编程解决方案，是Promise 的拓展，在我们处理异步的时候，比起回调函数，Promise的then方法会显得较为简洁和清晰，但是在处理多个彼此之间相互依赖的请求的时候，就会显的有些繁琐。这时候，用async/await更加优雅。

我们知道 JavaScript 是单线程的，使用 Promise 之后可以让我们书写异步操作更加简单，而 async 是让我们写起 Promise 像同步操作。

2. 基本语法

(1). 前面添加了async的函数在执行后都会自动返回一个Promise对象:

   async function foo() {
        return 'imooc' // Promise.resolve('imooc')
    
        // let res =  Promise.resolve('imooc')
        // console.log(res)
    }
    console.log(foo()) // Promise
    foo()

(2). await后面需要跟异步操作，不然就没有意义，而且await后面的Promise对象不必写then，因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。

function timeout() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(1)
            resolve() // resolve('success')
        }, 1000)
    })
}

// 不加async和await是2、1   加了是1、2
async function foo() {
    await timeout() // let res = await timeout() res是success
    console.log(2)
}
foo()

3. 场景1-多次发送ajax请求 (重点)

　我们需要发送多个请求，而后面请求的发送总是需要依赖上一个请求返回的数据。对于这个问题，我们既可以用的Promise的链式调用来解决，也可以用async/await来解决，然而后者会更简洁些。

// 把ajax封装成模块
import ajax from './ajax'

function request(url) {
    return new Promise(resolve => {
        ajax(url, res => {
            resolve(res)
        })
    })
}
async function getData() {
    let res1 = await request('static/a.json')
    console.log(res1)
    let res2 = await request('static/b.json')
    console.log(res2)
    let res3 = await request('static/c.json')
    console.log(res3)
}
getData()

 补充1个实际代码：

await拿到返回值，解构赋值给data

 login() {
        // 2.1 先对整个form表单进行规则校验
        this.$refs.loginFormRef.validate(async valid => {
          console.log(valid)
          if (!valid) return
          // 2.2 校验通过，发送请求
          const {
            data: res
          } = await this.$http.post('login', this.loginForm)
          if (res.meta.status !== 200) return this.$message.error('登录失败！')
          this.$message.success('登录成功')
          // 2.3. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
          // 2.3.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
          // 2.3.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
          window.sessionStorage.setItem('token', res.data.token)
          // 2.4  通过编程式导航跳转到后台主页，路由地址是 /home
          this.$router.push('/home')
        })
      }
    }

三. ES8-Object扩展

1. ES8之前获取对象的key 、value

const obj = {
        name: 'imooc',
        web: 'www.imooc.com',
        course: 'es'
    }
    // 获取key值
    console.log(Object.keys(obj))   //[ 'name', 'web', 'course' ]
    // 获取内容值
    const res = Object.keys(obj).map(key => obj[key])
    console.log(res)    //[ 'imooc', 'www.imooc.com', 'es' ]

2. ES8新增 Object.values()

　用于获取values值

    const obj = {
        name: 'imooc',
        web: 'www.imooc.com',
        course: 'es'
    }
    console.log(Object.values(obj))  //[ 'imooc', 'www.imooc.com', 'es' ]

3. ES8新增 Object.entries()

　Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致。（区别在于 for-in 循环也枚举原型链中的属性）

    let grade = {
        'lilei': 98,
        'hanmei': 87
    }
    
    for (let [k, v] of Object.entries(grade)) {
        console.log(k, v)
        // lilei 98
        // hanmei 87
    }

4. ES8新增 Object.getOwnPropertyDescriptors()

 　还是上述那个对象，这里有 key 和 value，上边的代码把所有的 key、value 遍历出来，如果我们不想让 Lima 这个属性和值被枚举怎么办？

Object.defineProperty(data, 'Lima', {
    enumerable: false
})

Object.entries(data).map(([city, temp]) => {
    console.log( `City: ${city.padEnd(16)} Weather: ${temp}` )
    // City: Portland         Weather: 78/50
    // City: Dublin           Weather: 88/52
})

四. ES8-String扩展

 1. padStart()

 　把指定字符串填充到字符串头部，返回新字符串。

 案例：

    const str = 'imooc'
    console.log(str.padStart(8, 'x'))
    console.log(str.padStart(8))
    console.log(str.padEnd(8, 'y'))

 

场景1：日期格式化

　希望把当前日期格式化城：yyyy-mm-dd的格式：

    const now = new Date()
    const year = now.getFullYear()
    const month = (now.getMonth() + 1).toString().padStart(2, '0')
    const day = (now.getDate()).toString().padStart(2, '0')
    console.log(year, month, day)                //2021 04 25
    console.log( `${year}-${month}-${day}` )   //2021-04-25

场景2：数字替换

// 数字替换，比如手机号，身份证号
const tel = '13012345678'
const newTel = tel.slice(-4).padStart(tel.length, '*')
console.log(newTel) // *******5678

 2. padEnd()

 　方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。 语法：

 

 基本用法：

const str1 = 'I am learning es in imooc'
console.log(str1.padEnd(30, '.'))
// I am learning es in imooc.....

const str2 = '200'
console.log(str2.padEnd(5))
// "200  "

场景1：时间戳统一长度

 　在JS前端我们处理时间戳的时候单位都是ms毫秒，但是，后端同学返回的时间戳则不一样是毫秒，可能只有10位，以s秒为单位。所以，我们在前端处理这个时间戳的时候，保险起见，要先做一个13位的补全，保证单位是毫秒。

// 伪代码
console.log(new Date().getTime()) // 时间戳 13位的
timestamp = +String(timestamp).padEnd(13, '0')

五. ES8-尾逗号

1. ES8之前 

　此前，函数定义和调用时，都不允许最后一个参数后面出现逗号。

   //定义函数
    function clownsEverywhere(param1, param2) {
       console.log(`${param1},${param2}`)
    }
    // 调用函数
    clownsEverywhere('foo','bar')

2. ES8允许尾巴逗号

   //定义函数
    function clownsEverywhere(param1, param2,) {
       console.log(`${param1},${param2}`)
    }
    // 调用函数
    clownsEverywhere('foo','bar',)

 

!

• 作       者 : Yaopengfei(姚鹏飞)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
• 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。