ES6、ES7、ES8、ES9、ES10常用特性

ES6

变量声明

const 
let

模块的导入和导出

import 
export

扩展运算符

//核心以 ... 开头
const obj = {a:1,b:2}
const obj2 = {c:3,d:4}
const obj3 = {a:5}
//注意相同键值后面会覆盖前面的，可以参考Object.assign方法
const obj4 = {...obj,...obj2,...obj3}

const ary = [1,2]
const ary2 = [3,1]
//相当于对数组里的元素做展开然后push进去
const ary3 = [...ary,...ary2]

解构语法和拓展对象的功能

//1、解构语法
const people = {name:'张三',age:25}
const {name,age} = people
let people2 = {name:'李四',age}

const timer = ['2009-01-01','2010-01-01']
const [startTime, endTime] = timer 

//2、扩展对象的功能
function people(name, age) {
		//1、拓展对象的功能
        return {
            name,
            age
        };
        //2、等同于
        return {
            name: name,
            age: age
        }
 }

字符串模板

const orderId = 'yxt1584666937907'
const text = `订单编号：${orderId}`

箭头函数

//基本形式
let fun = () => {
	//执行代码
}

//1、形参为一个的时候可以省略括号
let fun = e => {
	//执行代码
}

//2、当省略{}的时候，函数体直接返回，注意：当前整个函数体为表达式
let fun = e => 表达式

//3、es6函数形参可以给默认值
let fun = (x=1,y=2) => {
	//执行代码
}

/*
箭头函数可以继承外部上下文作用域（一般即this的使用）
箭头函数是一个函数表达式
函数表达式是不会发生函数提升机制的
*/

Promise

//1、定义promise异步对象
const promise = new Promise(function(resolve, reject) {
  const value = 3
  if (value > 2) {
    // 异步操作成功返回
    resolve('success')
  } else {
    // 异步操作失败返回
    reject('error')
  }
})

//2、调用promise
promise.then(function(res) {
  console.log(res);
}).catch(function(err) {
  console.log(err);
})

class类

class Point {

}

class ColorPoint extends Point {
  constructor() {
    super()
  }
}

对象新增方法

const obj = {a:1,b:2}
//1、for...in遍历
for(key in obj) {
	//xxx
}

//2、对象的合并，若后面出现相同的属性，则后面的值会覆盖前面的值
const obj_assign = Object.assign(obj,{a:11,c:3})

数组新增方法

const ary = [{ id: 1 }, { id: 2 }, { id: 3 }]

//1、数组找查找元素
ary.find((item, index, ary) => { return item.id === 1 })

//2、查找元素对应的索引值
ary.findIndex((item, index, ary) => { return item.id === 3 })

//3、给数组填充元素
const ary2 = new Array(3).fill(0)
//第一个参数值，第二和第三个参数是需要填充数组的开始和结束索引
const ary3 = ary2.fill(1,1,2)
//注意，该方法会改变原数组

//4、for...of数组遍历方法
const ary4 = []
for(item of ary3) {
	ary4.push(item)
}

ES7

判断数组是否包含指定元素

//Array.prototype.includes()
const array1 = [1, 2, 3]
array1.includes(2)

ES8

async函数

const promise = new Promise(function(resolve, reject) {
  const value = 3
  if (value > 2) {
    // 异步操作成功返回
    resolve('success')
  } else {
    // 异步操作失败返回
    reject('error')
  }
})
//await关键字可以等同于promise.then，对promise异步对象结果返回的一种等待
const res = await promise

//async函数会返回promise对象
//async一般和await一起使用
async function fun1() {
  return 'async_success'
}
const res2 = await fun1()

返回对象属性值的数组

//Object.values
var obj = { foo: 'bar', baz: 42 }
Object.values(obj)

ES9

针对promise的catch和then的整合调用

//Promise.prototype.finally()
/*
方法返回一个Promise。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。
这避免了同样的语句需要在then()和catch()中各写一次的情况。
*/

ES10

返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器

//string.prototype.matchAll()
let regexp = /t(e)(st(\d?))/g;
let str = 'test1test2';
let array = [...str.matchAll(regexp)];

全局对象

//globalThis
globalThis.setTimeout(() => { console.log(11111) }, 5000)