【笔记】再学JavaScript ES(6-10)全版本语法——ES8新增

---

一、Async&Await——比Promise更优雅的异步方式

1.回顾Promise和Generator

• 回调地狱&异步操作（Promise/then/resolve/reject/catch/all/race）
• Generator（案例：抽奖&斐波那契数列）

简单来说：

• Promise通过状态绑定的方式，根据Promise下操作完成的状态来执行下一步的成功回调（resolve）或失败回调（reject），继而继续执行（then）或捕获错误（catch）
• Generator：一句话——分步阻塞，单步执行

2.Async/Await

其实asyns函数相当于Generator函数的语法糖（也有说是Promise语法糖），async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，手动执行改为自动执行。

async function firstAsync () {
  let promise = new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve('now it is done')
    }, 1000)
  })
  console.log(await promise)
  console.log(await Promise.resolve(40))
  console.log(2)
  return Promise.resolve(3)
}
firstAsync().then(value => {
  console.log(value)
})

案例

/**
 * setTimeout用来模拟网络延时
 */
let text = ''
function timeOut (name, time) {
  setTimeout(() => {
    text += name + ' '
  }, time)
}
{
  function f1 (name, time) {
    timeOut(name, time)
    console.log(text)
  }
  f1('###########################', 7)
  f1('My', 6)
  f1('name', 4)
  f1('is', 2)
  f1('oliver', 0)
  // f1('My', f1('name', f1('is', f1('oliver'))))
}
text = ''
{
  function f2 (name, time) {
    timeOut(name, time)
    return new Promise((resolve, reject) => {
      console.log(text)
    })
  }
  f2('###########################2', 57)
  f2('My', 56).then(
    f2(`name`, 54)
  ).then(
    f2('is', 52)
  ).then(
    f2('oliver', 50)
  )
}
text = ''
{
  async function f3 (name, time) {
    timeOut(name, time)
    await console.log(text)
    // return Promise.resolve() // 默认返回一个Promise对象
  }
  f3('###########################', 97)
  // f3('My', f3('name', f3('is', f3('oliver'))))
  f3('My', 96).then(
    f3(`name`, 94)
  ).then(
    f3('is', 92)
  ).then(
    f3('oliver', 90)
  )
  // console.log(f3())
}

二、Object.keys&values&entries——对Object快速遍历

1.遍历与筛选

// 方法一
let resultKeys = []
let resultValues = []
for (let k in obj) {
  resultKeys.push(k)
  resultValues.push(obj[k])
}
console.log(resultKeys)
console.log(resultKeys.filter(item => item === 'B'))
console.log(resultValues)
console.log(resultValues.filter(item => item === 'b'))
// 方法二
let result = {
  keys: [],
  values: []
}
for (let k in obj) {
  result.keys.push(k)
  result.values.push(obj[k])
}
console.log(result.keys)
console.log(result.keys.filter(item => item === 'B'))
console.log(result.values)
console.log(result.values.filter(item => item === 'b'))
// 方法三
console.log(Object.keys(obj))
console.log(Object.keys(obj).filter(item => item === 'B'))
console.log(Object.values(obj))
console.log(Object.values(obj).filter(item => item === 'b'))

前两个方法都是之前的旧方法，最后一个是ES8新增的，使用起来更加便捷
遍历过程中一般都会把对象转化为数组来进行遍历，因此可以使用数组的API

2.整体转为可遍历对象

let obj = {
  A: 'a',
  B: 'b',
  C: 'c'
}
// 方法一
let resultKeys = []
let resultValues = []
for (let [k, v] of Object.entries(obj)) {
  resultKeys.push(k)
  resultValues.push(v)
}
console.log(resultKeys)
console.log(resultKeys.filter(item => item === 'B'))
console.log(resultValues)
console.log(resultValues.filter(item => item === 'b'))
// 方法二
let result = {
  keys: [],
  values: []
}
for (let [k, v] of Object.entries(obj)) {
  result.keys.push(k)
  result.values.push(v)
}
console.log(result.keys)
console.log(result.keys.filter(item => item === 'B'))
console.log(result.values)
console.log(result.values.filter(item => item === 'b'))

• 实际上Object.entries(obj)是转为二维数组
• 这时可以使用for of循环进行解构赋值

三、String.padStart()&padEnd()——对String补白

如果某个字符串不够指定长度，会在头部或尾部补全：

• padStart()用于头部补全
• padEnd()用于尾部补全

padStart()和padEnd()一共接受两个参数：

• 第一个参数用来指定字符串的最小长度
• 第二个参数是用来补全的字符串
  如果省略第二个参数，默认使用空格补全长度

console.log('x'.padStart(3)) // '  x'
console.log('x'.padEnd(3)) // 'x  '

若原字符串的长度，等于或大于指定的最小长度，则返回原字符串

console.log('xxx'.padStart(2, '0123')) // 'xxx'
console.log('xxx'.padEnd(2, '0123')) // 'xxx'

如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会末位截去超出位数的补全字符串

console.log('xxx'.padStart(5, '0123')) // '01xxx'
console.log('xxx'.padEnd(5, '0123')) // 'xxx01'

用途1：为数值补全指定位数

// 旧方法
for (let i = 1; i < 32; i++) {
  if (i < 10) {
    console.log(`0${i}`)
  } else {
    console.log(i)
  }
}
// 新方法
for (let i = 1; i < 32; i++) {
  console.log(i.toString().padStart(1, '0'))
}

用途2：格式化字符串（比如：日期）

console.log('21'.padStart(10, 'YYYY-MM-DD')) // 'YYYY-MM-21'
console.log('05-12'.padStart(10, 'YYYY-MM-DD')) // 'YYYY-05-12'

四、Object.getOwnPropertyDescriptor——获取Object数据的描述符

const data = {
  id: '001',
  user: 'admin',
  password: '123456'
}
// 修改描述符
Object.defineProperty(data, 'password', {
  enumerable: false,
  writable: false
})

// 输出所有描述符
console.log(Object.getOwnPropertyDescriptors(data))
console.log(Object.getOwnPropertyDescriptor(data, 'password'))
// 不可枚举验证
console.log(Object.keys(data))
// 不可写验证
data.password = '000000'
console.log(data.password)