avatar

JavaScript features in es5,es6,es7

JavaScript features in es5,es6,es7

块级作用域

let

1
2
3
4
5
6
7
function fn() {
let x = 0
if (true) {
let x = 1
// x = 1 only inside if
}
}

const

1
const a = 1

反引号字符串

插入文字

1
var message = `Hello ${name}`

多个字符串

1
var str = `Hello wrold`

新方法

字符串方法

1
2
"Hello".repeat(3)
"Hello".includes('ll')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Circle extends Shape {
// constructor
constructor (radius) {
this.radius = radius
}

// methods
getArea () {
return Math.PI * 2 * this.radius
}

// calling superclass methods
expand (n) {
return super.expand(n) * Math.PI
}

// static methods
static createFromDiameter (diameter) {
return new Circle(diameter / 2)
}
}

Promises

Making promises

1
2
3
4
new Promise((resolve, reject) => {
if (yes) { resolve(result) }
else { reject(error) }
})

Using promises

1
2
3
promise
.then((res) => { console.log(res) })
.catch((err) => { conosle.error(err) })

Promise functions

1
2
3
4
Promise.all()
Promise.race()
Promise.reject()
Promise.resolve()

Async-await

1
2
3
4
5
async function people () {
const user = await getUser()
const grils = await.getGril(user)
return [user, grils]
}

解构

解构分配

1
2
3
4
5
6
7
8
// Array
var [first, last] = ['man', 'gril']

// Objects
let {gril, coolMan} = {
gril: 'beautify gril',
coolMan: 'me'
}

Default values

1
2
3
4
5
var a = [22, 33]
var [a = 50, b = 55, c = 50] = a

// result:
// a === 22 b === 33 c === 50

Function arguments

1
2
3
4
5
6
7
8
9
10
11
function greet({name, greeting}) {
console.log(`${name}, ${gretting}`)
}

greet({name: 'me', gretting: 'beautifyGril'})

// or
function printCoordinates({ left: x, top: y }) {
console.log(`x: ${x}, y: ${y}`)
}
printCoordinates({ left: 25, top: 90 })

循环

1
2
3
for (let {title, artist} in songs) {
// ...
}

对象传播

Object spread

1
2
3
4
5
6
7
8
// with object spread
const options = {
...defaults,
visible: true
}

// without object spread
const options = Object.assign({}, defaults, {visible: true})

数组传播

1
2
3
4
5
6
7
8
9
10

// with Array spread
const users = [
...admins,
...editors,
'gril'
]

// without Array spread
const users = admins.concat(editors).concat(['gril'])

Objects

Shorthand syntax

1
module.exports = { hello, bye }

Methods

1
2
3
4
5
const App = {
start () {
console.log(`running`)
}
}

Getters and Setters

1
2
3
4
5
6
7
8
const App = {
get closed () {
return this.status = 'closed'
},
set closed () {
this.status = value ? 'closed' : 'open'
}
}

Computed property names

1
2
3
4
let event = 'click'
let handlers = {
[`on${event}`]: true
}

Modules

imports

1
2
3
4
5
6
7
8
9
import 'helpers'

import Koa from 'koa'

import { indent } from 'helpers'

import * as indent from 'helpers'

import { indentSpace as indent } from 'helpers'

Exports

1
2
3
4
5
export default function () {...}

export function myFunction () {...}

export const pi = 3.14
文章作者: 张复明
文章鏈接: https://hexo.zhangaming.com/2020/03/31/es5-es6-es7/
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 阿明的博客
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論