es6-es13新特性

ES6(2015)

1.类（class）

class Bar = {
  doStuff () {
      console.log('stuff')
  }
}
const b = new Bar()
console.log(b.doStuff())

2.模块化（Es Module）

export const sub = (a,b) => { a+ b }
import {sub} from ''
console.log(sub(1, 2)) // 3

3.箭头函数

const func = （a, b）=> {a+b}
func(1,2) // 3

4.函数参数默认值

func （age = 20）=> {console.log(age)}

5.模板字符串

const  name = '张三'
console.log(`this is ${name}`)

6.延展操作符

let str = [...'hello word'] // ['h', 'e', 'l', 'l', 'o', '', 'w', 'o', 'r', 'd']

7.解构赋值

var a = 1, b = 2
[a, b] = [b, a] //  2  1

8.对象属性简写

const name = '张三'
const obj = {name}

9.promise

promise.resolve().then(() => {console.log(1)})
console.log(2)
打印顺序   2  1

10.let、const

let name = '张三'
const arr = []

ES7(2016)

1.Array.prototype.includes()

console.log([1,2,3].includes(1)) // true

2.指数操作符

3**3  //  27

ES8(2017)

1.async/await

async getData () {
    const res = await api.getNum()
    console.log(res)
}

2.Object.values()

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

3.Object.entries()

Object.entries({a: 1, b: 1}) // [[a, 1], [b, 1]]

4.String padding

'hello'.padStart(3) // '   hello'
'hello'.padEnd(3) // 'hello   '

ES9(2018)

1.await for…of

async function process(array) {
    for await(let i of array) {
    }
}

2.Promise.finally()

Promise.resolve().then().catch(e=>e).finally()

3.Rest/Spetad

const arr = [1,2,3,4,5]
console.log(Math.max(...arr)) // 5

ES10(2019)

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

[1,2,3,[4,5]].flat(Infinity) // [1,2,3,4,5]
[1,2,3].flatMap(a => [a**2]) // [1, 4, 9]

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

去除字符串收尾空白字符
var str = '1111    '
console.log(str) // '1111'

3.String.prototype.matchAll
4.Object.fromEntries()

返回一个给定对象自身可枚举的键值对数组
const map = new Map([[foo, bar], [baz, 111]])
console.log(Obeject.fromEntries(map)) // {foo: bar, baz: 111}

ES11(2020)

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

let obj={
   obj1: 0,
   obj2: false,
   obj3: null,
   obj4: undefined,
   obj5: ''
}
let obj1 = obj.obj1??'对象1' // 0
let obj2 = obj.obj2??'对象2' // false
let obj3 = obj.obj3??'对象3' // 对象2
let obj4 = obj.obj4??'对象4' // 对象4
let obj5 = obj.obj5??'对象5' // ''

2.可选链 ?.用户监测不确定的中间节点

let obj= {}
let obj1 = obj.children.name // 报错
let obj2 = obj.childre?.name // undefined

3.新基本数据类型BigInt
任意精度的整数
4.import()
按需引入
5.globalThis

console.log(globalThis)  // 浏览器:window   worker: self   node:global

ES12(2021)

1.replaceAll
返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉

const str = 'hello world'
str.replaceAll('l', '') // 'heo word'

ES13(2022)

1.Array.prototype.at逆向获取数组某个元素

[2,3,4,5,6].at(-2) // 5

2.hasOwn 判断某个对象中是否存在某个属性
Object.hasOwn({ku: ‘vvv’, lo: ‘loop’}, ‘ku’) // true
Object.hasOwn({ku: ‘vvv’, lo: ‘loop’}, ‘ku1’) // false