ES7(2016)、ES8(2017)基础知识

566 阅读1分钟

ES7~ES10.png

各大浏览器、平台支持ES的情况

image.png

ES7(2016)

includes

es7中的数组如何判断元素是否存在?

const arr = [1, 2, 3, 4, 5, 6, 7]
console.log(arr.includes(4)) // true

**乘方

es7中的数学乘方如何简写?

console.log(Math.pow(2, 5)) // 32
console.log(2 ** 5) // 2^5 = 32

ES8(2017)

async await

ES8中有没有比Promise更优雅的异步方式呢?

promise的语法糖

async function firstAsync () {
  return 27 // Promise.resolve(28)
}
console.log(firstAsync()) // Promise {<fulfilled>: 27}
console.log(firstAsync().then(res => {
  console.log(res)
}))
async function firstAsync () {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('now it is done')
    }, 1000)
  })
  // let result = await promise
  console.log(await promise)
  console.log(await 40) // Promise.resolve(40)
  // console.log(result)
  console.log(2)
  return 3
}
firstAsync().then(val => {
  console.log(val)
})

ES8增加了对Object快速遍历的方法

key、value

let grade = {
  'lilei': 96,
  'hanmeimei': 99
}

let result = []
for (let [k, v] of grade) {
  console.log(k, v)
  if (k === 'lilei') {
    result.push(k)
  }
}

console.log(result)
console.log(Object.keys(grade).filter(item => item === 'lilei'))
console.log(Object.values(grade).filter(item => item > 96))

for (let [k, v] of Object.entries(grade)) {
  console.log(k, v)
}

String.padding 补白:padStart、padEnd

ES8中增加了对String补白的方式

padStart

开头补 padStart

for (let i = 1; i < 32; i++) {
  console.log(i.toString().padStart(2, '0'))
}

padEnd

末尾补

padEnd

'abc'.padEnd(10);          // "abc       "
'abc'.padEnd(10, "foo");   // "abcfoofoof"
'abc'.padEnd(6, "123456"); // "abc123"
'abc'.padEnd(1);           // "abc"

defineProperty.getOwnPropertyDescriptors 描述符

ES8中如何获取Object数据的描述符?

const data = {
  PortLand: '78/50',
  Dublin: '88/52',
  Lima: '58/40'
}
/**
 * 对数据data中的lima做处理
 */
Object.defineProperty(data, 'Lima', {
  enumerable: false // 是否可枚举
})
console.log(Object.keys(data))
console.log(Object.getOwnPropertyDescriptors(data))
console.log(Object.getOwnPropertyDescriptor(data, 'Lima'))

image.png