JS ES6+ 语法新特性

发表于 | 分类于

JS ES6+ 语法新特性

ECMAScript 6 入门
只总结一些常用的 es6+ 用法

ES6 (2015)

1.类 (class)

1
2
3
4
5
6
7
8
9
10
11
class People {
  constructor(name) {
    this.name = name
  }
  console() {
    console.log(this.name)
  }
}

const man = new People('aa')
man.console()

2.模块化 (es module)
可以把一个 js 文件当作一个模块

1
2
3
4
5
6
// 模块 A 中导出一个方法
export const sumA = (a, b) => a + b

// 模块 B 中使用
import { sumA } from './A'
console.log(sumA(1, 2))

3.箭头函数 (arrow)

1
2
const sum = (a, b) => a + b
sum(a, b)

4.函数默认值

1
const sum = (a = 1, b = 2) => a + b

5.模版字符串

1
2
const name = 'aa'
const fullName = `my name is ${name}`

6.解构赋值

模式匹配，只要等号两边的模式相同。左边的变量就会被赋予对应的值。

1
2
3
4
5
const [, , third] = [1, 2, 3]
third // 3

const { c } = { a: 1, b: 2, c: 3}
c // 3

7.对象属性简写

1
2
const name = 'aa'
const obj = { name }

8.Promise

1
2
3
4
Promise.resolve().then(() => { console.log(2) });
console.log(1)

// 先打印1，再打印2

9.let 和 const

1
2
let aa = '1'
const bb = []

es7 (2016)

1.includes

Array.prototype.includes()

1
[1].includes(1)

2.指数操作符

1
2**10 // 1024

es8 (2017)

1.async/await

异步执行

1
2
3
4
async getData() {
  await res = await api.getThing() // await 异步任务
  // do something
}

2.Object.values()

对象中的 values 值

1
2
Object.values({ a: 1, b: 2, c: 3 })
// [1, 2, 3]

3.函数参数列表结尾允许逗号

4.Object.getOwnPropertyDescriptors

获取一个对象的所有自身属性的描述符，如果没有属性，则返回 null

5.SharedArrayBuffer

用来表示一个通用的，固定长度的原始二进制数据缓冲区

6.Atomics对象

提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作

es9 (2018)

1.异步迭代

await

2.Promise.finally()

es10 (2019)

1.Array.flat()和Array.flatMap()

2.String.trimStart()和String.trimEnd()

es11 (2020)

1.Nullish coalescing Operator(空值处理)

表达式在??的左侧 运算符求值为undefined或null，返回其右侧

1
2
3
4
5
let user = {
	u1: 0
}

let u2 = user.u2 ?? '用户2'

2.Optional chaining（可选链）

?.用户检测不确定的中间节点

1
2
3
let user = {}
let u1 = user.childer.name // TypeError: Cannot read property 'name' of undefined
let u1 = user.childer?.name // undefined

3.Promise.allSettled

返回一个在所有给定的promise已被决议或被拒绝后决议的promise，并带有一个对象数组，每个对象表示对应的promise结果

4.import()

按需导入

5.新基本数据类型BigInt

任意精度的整数

6.globalThis

1
2
3
浏览器：window
worker：self
node：global

参考1