ES6

ES6

浏览器

• chrome 49 ~ 65
• fixfox 52 ~ 60
• IE 11

类的引入

class Friut {
    constructor(type,color){
        this.type = type
        this.color = color
    }
    // toString 是原型对象上的属性
    toString(){
        console.log(this.type + 'is' + this.color)
    }
}
class Banana extends Friut {
    constructor(){
        // 子类必须要在constructor中指定super 函数，否则在新建实例的时候会报错
        super('banana','yellow')
    }
    toString(super.toString())
}

导出

导出变量：
export var domain = 'http://www.baidu.com'

导出函数：
export function myFun(){
    return 'hello'
}

箭头函数，解决this作用域的问题

函数设置默认值

// 有默认值
function myFunction(width = 10, height = 30){
    let obj = {
         width,
        height: height,
    }
}
// 如果没有默认值可能会导致一些问题，如果传入的参数布尔值为false的话
function myFunction(width,height){
    let obj = {
         width || 10,
        height: height || 50,
    }
}
myFunction(0,0) // obj: {  10, height: 50},不能正确的取传入的值

延展操作符...

[...'hello'] -> ['h','e','l','l','o']
const arr = [1,2,3]
const arr1 = [4,5,6]
const arr3 = [...arr, ...arr1] //浅拷贝 [1,2,3,4,5,6]

对象属性简写

const name="zhangsan",age=18,gender="male"
const params = {
    name: name,
    age: age,
    gender: gender
}

es6可以这样写：
const params = { name, age, gender }

结果：
// { name: 'zahngsan', age: 18, gender: 'male' }

Promise 异步编程

setTimeOut(() => {
    console.log('hello') // 1s后输出hello
    setTimeOut(() => {
        console.log('world') // 2s后输出world
    },1000)
},1000)

// 使用Promise
const wait = new Promise((resovle, reject) => {
    setTimeout(resolve,1000)  // 1s后执行then函数
})
wait.then(() => {
    console.log('hello') // 每一个任务
}).then(() => {
    console.log('world')
})

ES7

数组includes函数，判断数组中是否存在某个值，返回boolean 指数操作符**

console.log(2**10) // 2^10 = 1024

ES8

async/await 以串行的方式运行异步操作

Object.values(obj) 获取对象的所有值

Onject.entries(obj)

obj = {a:1,b:2,c:3}
for(let [key,value] of obj.entries(obj)){
    console.log(`{key:${key},value:${value}}`)
}

// { key: a, value: 1}
// { key: b, value: 2}
// { key: c, value: 3}

padStart(targetLength,padString)

• targetLength: 被填充后的字符串目标长度，如果目标长度小于现在字符串的长度，则不作处理，返回原字符串
• padString 备选填充字符串，填充后如果长度超出目标字符串，则只截取字符串左侧部分

    string = 0.0342
    string.padStart(8,['235'])
    
    // 目标长度为8，原字符串长度为6，添加23后达到8，所以结果为 230.0342

padEnd(targetLength,[padString])

• 参数解析同上

    string = '0.43'
    string.padEnd(5,'0') // 0.430
    string.padEnd(10,'60') // 0.43600000

ES9

异步迭代

await在循环中场景中下面的代码不会正常运行
async function getData(){
    for(let i = 0; i< 10; i++){
        await dosomething()
    }
}

async function getData(){
    arr.forEach(async(item) => {
        await dosomething(item)
    })
}

es9引入异步迭代后await和forEach同时使用

async function getItem(array){
    await array.forEach(item => {
        setTimeout(() => {
            console.log(item)
        },1000)
    })
}
1s后依次输入1，2，3

正则表达式命名捕获组

    匹配YYYY-MM-DD 格式的正则
    reg = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
    
    es9：
    reg = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/
    match = reg.exec('2019-01-10')
    match.groups.year // 2019
    match.groups.month // 01
    match.groups.day // 10
    
    在replace中的使用,时间转换为美国时间格式
    '2019-01-10'.replace(reg,'$<month>-$<day>-$<year>')

ES10

flat、flatMap

• flat()
  1. 参数：不传默认为1，传入表示遍历的深度,Infinity传入表示展开任意深度的嵌套数组
  2. 例子：
     • [1,2,[3,4,[5]]].flat() --> [1,2,3,4,[5]]
     • [1,2,[3,4,[5]]].flat(2) --> [1,2,3,4,5]
     • [1,2, ,4].flat() --> 去除空项
• flatMap
  1. 描述： 遍历数组将返回的数组压平一层
  2. 例子： [1,2,3].flatMap(i => [[i*2]]) --> [[1],[2],[3]]

trimStart: 去除字符串首位空格 " sds d ".trimStart() --> "sds d "

trimEnd： 去除字符串尾部的空格

Object.fromEntries()

• 将array转为对象

const arr = [["name","张三"],["age",18],["class","九年级一班"]]
const obj = Object.fromEntries(arr)
结果：
{
    name: "张三",
    age: 18,
    class: "九年级一班"
}

新的数据类型BigInt

• 所以es10以后js的基本数据类型一共有7中，分别为：Number、Boolean、String、Null、Undefined、Symbol、BigInt