es7-es11新特性

ES7-ES11

210429

1、ECMAScript7新特性

1.1. Array.prototype.includes

includes方法用来检测数组中是否包含某个元素，返回布尔类型值

//indexOf 返回0 1
const famousbook = ['西游记','红楼梦','三国演义','水浒传']
console.log(famousbook.includes('西游记')) //true
console.log(famousbook.includes('撒哈拉沙漠')) //false

1.2. 指数操作符

在ES7中引入指数运算符**，用来实现幂运算，功能与Math.pow结果相同

console.log(2 ** 10)
console.log(Math.pow(2,10))

2、ECMAScript8新特性

2.1 async和await

async和await两种语法结合可以让异步代码像同步代码一样

async函数

返回值为promise对象
promise对象的结果由async函数执行的返回值决定

async function fn(){
    //返回的结果不是一个promise类型的对象，返回的结果就是成功promise对象
    //return 字符串 return;
    //抛出错误，返回的结果是一个失败的promise
    //throw new Error('出错啦！')
    //返回的结果如果是一个promise对象，fn()根据promise对象的状态返回
    return new Promise((resolve,reject)=>{
        resolve('成功的数据')
        reject('失败的错误')
    })
}
const res = fn()
//console.log(res)

//调用then方法
result.then(value => {
    console.log(value)
},reason => {
    console.warn(reason)
})

await表达式

await必须写在async函数中
await右侧的表达式一般为promise对象
await返回的是promise成功的值
await的promise失败了，就会抛出异常，需要通过try...catch捕获处理

const p = new Promise((resolve,reject)=>{
    //resolve("user data")
    reject("error")
})
//await要放在async函数中
async function main(){
    try{
        let res = await p
        console.log(res) //user data
    }catch(e){
        console.log(e) //error
    }
}
//调用函数
main()

async和await结合读取文件

const fs = require('fs')
function file1(){
    return new Promise((resolve,reject)=>{
        fs.readFile("文件路径",(err,data)=>{
            if(err)
                reject(err)
            resolve(data)
        })
    })
}
async function fn(){
    //获取file1内容
    let f1 = await file1()
    //输出文件中的内容
    console.log(f1.toString())
}

async和await封装AJAX请求

需解决同源策略

<script>
    function sendAJAX(url) {
        return new Promise((resolve, reject) => {
            const x = new XMLHttpRequest()
            x.open('GET', url)
            x.send()
            x.onreadystatechange = function () {
                if (x.readyState === 4)
                    if (x.status >= 200 && x.status < 300) {
                        resolve(x.response)
                    } else {
                        reject(x.status)
                    }
            }
        })
    }

    //promise then方法测试
    // sendAJAX("http://api.apiopen.top/getJoke").then(value => {
    //   console.log(value)
    // }, reason => {})

    // async与await测试
    async function fn(){
        let res = await sendAJAX("http://api.apiopen.top/getJoke")
        let res2 = await sendAJAX("https://joke-api-strict-cors.appspot.com/jokes/random")
        console.log(res)
        console.log(res2)
    }
    fn()
</script>

2.2 Object.values 和 Object.entries

0509

Object.values()方法返回一个给定对象的所有可枚举属性值的数组
Object.entries()方法返回一个给定对象自身可遍历属性[key,value]的数组

<script>
    const school = {
        name:"phy",
        city:['changsha','beijing','shanghai'],
        object:['前端','c']
    }
    //获取对象所有的键
    console.log(Object.keys(school))
    //获取对象所有的值
    console.log(Object.values(school))
    // entries 返回一个数组
    console.log(Object.entries(school))
    const m = new Map(Object.entries(school))
    console.log(m.get('city'))
</script>

2.3 Object.getOwnPropertyDescriptors

该方法返回指定对象所在自身属性的描述对象

<script>
	//对象属性的描述对象
    console.log(Object.getOwnPropertyDescriptors(school))
    // 进行深层次对象的拷贝
    const obj = Object.create(null,{
        name:{
            // 设置值
            value:'phy',
            // 属性特性
            writable:true,
            configurable:true,
            enumerable:true
        }
    })
    console.log(Object.getOwnPropertyDescriptors(obj))
</script>

3、ECMAScript9新特性

3.1 扩展运算符和rest参数

Rest参数与spread扩展运算符在ES6中已引入，不过ES6中只针对数组，在ES9中为对象提供了像数组一样的rest参数和扩展运算符

<script>
	function connect({host,port,...user}){
        console.log(host); //127.0.0.1
        console.log(port); //3306
        console.log(user); //{username: "root", password: "root", type: "master"}
    }
    connect({
        host: '127.0.0.1',
        port: 3306,
        username: 'root',
        password: 'root',
        type: 'master'
    })
    
    const t = {
        ts : '唐僧'
    }
    const w = {
        swk : '孙悟空'
    }
    const z = {
        zbj : '猪八戒'
    }
    const s = {
        ss : '沙僧'
    }
    const xiyou = {...t,...w,...z,...s} //对象的合并
    console.log(xiyou) //{ts: "唐僧", swk: "孙悟空", zbj: "猪八戒", ss: "沙僧"}
</script>

3.2 正则扩展-命名捕获分组

<script>
	let str = '<a href="http://www.baidu.com">百度</a>'
    //提取url与标签文本
    const reg = /<a href="(.*)">(.*)<\/a>/
    //执行
    const result = reg.exec(str)
    console.log(result)
    console.log(result[1])
    console.log(result[2])
    
    //es9  ?<命名>
    let str = '<a href="http://www.baidu.com">百度</a>'
 	//对捕获的结果添加一个属性
    const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/
    const result = reg.exec(str)
    //group中有变化
    console.log(result)
    console.log(result.groups.url)
    console.log(result.groups.text)
</script>

3.3 正则扩展-反向断言

<script>
	// 正则断言
    let str = 'jdsjiojiowdjc呵68900啦'
    // 正向断言
    const reg = /\d+(?=啦)/
    const res = reg.exec(str)
    // 反向断言 
    const reg = /(?<=呵)\d+/
    const res = reg.exec(str)
    console.log(res)
</script>

3.4 正则dotAll模式

<script>
	//dot . 元字符 除换行符以外的任意单个字符
    let strHtml = `
    <ul>
      <li>
        <a>肖生克的救赎</a>
        <p>上映时间：1994-09-10</p>
      </li>
      <li>
        <a>驯龙高手</a>
        <p>上映时间：2014-09-10</p>
      </li>
    </ul>`

    //声明正则
    //匹配一个空白字符，包括空格、制表符、换页符和换行符
    //const regh = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/
    // const resh = regh.exec(strHtml)
    // console.log(resh)
    //es9
    //加了s后的.可以匹配任意字符（包括换行符） g全局匹配
    const regh = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs
    let resh;
    let data = [];
    while(resh = regh.exec(strHtml)){
      data.push({title:resh[1],time:resh[2]})
    }
    console.log(data) //0: {title: "肖生克的救赎", time: "上映时间：1994-09-10"}
//1: {title: "驯龙高手", time: "上映时间：2014-09-10"}
</script>

4、ECMAScript10新特性

4.1 对象扩展方法Object.fromEntries

Object.fromEntries：将数组/Map转为对象

<script>
    //Object.fromEntries
    //将数组转化成对象
    //二维数组
    const result = Object.fromEntries([
      ['name','phy'],
      ['address','changsha','shanghai','wuhan']
    ])
    console.log(result)
    //Map
    const m = new Map()
    m.set('name','hhhhh')
    const res = Object.fromEntries(m)
    console.log(res)

    //Object.entries ES8
    //将对象转数组
    const arr = Object.entries({
      name: 'hcsuih'
    })
    console.log(arr)
</script>

4.2 字符串扩展方法trimStart/trimEnd

trimStart清除左侧空格

trimEnd清除右侧空格

<script>
	let str = '    hduhscduiis       '
    console.log(str.trimStart())
    console.log(str.trimEnd())
</script>

4.3 数组扩展方法flat/flatMap

<script>
	//将多维数组转化为低维数组
    //flat
    const arr = [1,2,3,4,[5,6]]
    console.log(arr.flat()) //[1, 2, 3, 4, 5, 6]
    const arr2 = [1,2,3,4,[5,6,[7,8,9]]]
    //参数为深度 是一个数字
    console.log(arr2.flat()) //[1, 2, 3, 4, 5, 6, Array(3)]
    console.log(arr.flat(2)) //[1, 2, 3, 4, 5, 6, 7, 8, 9]
    
    //flatMap
    const arr3 = [1,2,3,4,5]
    const res = arr3.map(item => item * 10)
    const res2 = arr3.map(item => [item * 10])
    const res3 = arr3.flatMap(item => [item * 10])
    console.log(res) //[10, 20, 30, 40, 50]
    console.log(res2) //[Array(1), Array(1), Array(1), Array(1), Array(1)]
    console.log(res3) //[10, 20, 30, 40, 50]
</script>

4.4 symbol扩展

Symbol.prototype.description

<script>
	let s = Symbol('PHY')
    console.log(s.description) //PHY
</script>

5、ECMAScript11新特性

5.1 私有属性

<script>
    //私有属性
    class Person{
      // 公有属性
      name
      // 私有属性
      #age
      #weight
      // 构造方法
      constructor(name,age,weight){
        this.name = name
        this.#age = age
        this.#weight = weight
      }
      //私有属性只能在类里面调用
      intro(){
        console.log(this.name)
        console.log(this.#age)
        console.log(this.#weight)
      }
    }
    const g = new Person('disjc',18,'50kg')
    g.intro()
    //报错
    // console.log(g.name)
    // console.log(g.#age) //Private field '#age' must be declared in an enclosing class
    // console.log(g.#weight)
</script>

5.2 Promise.allSettled

allSettled无论数组中的promise成功还是失败都会全部执行

all数组里有reject停止执行

<script>
	const p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('商品数据-1')
        },1000)
    })
    const p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('商品数据-2')
            reject('出错了')
        },1000)
    })
    
    //调用allSettled方法
    const res = Promise.allSettled([p1,p2])
    //all
    const res = Promise.all([p1,p2])
    console.log(res)
</script>

5.3 String.prototype.matchAll

批量提取数据

<script>
	let str = `
    <ul>
      <li>
        <a>肖生克的救赎</a>
        <p>上映时间：1994-09-10</p>
      </li>
      <li>
        <a>驯龙高手</a>
        <p>上映时间：2014-09-10</p>
      </li>
    </ul>`
    //.*?禁止贪婪 s模式修正符dotAll g全局匹配
    const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
    const res = str.matchAll(reg)
    //for(let v of res)
    //    console.log(v)
    //从页面中提取数据很方便
    const arr = [...result]
    console.log(arr)
</script>

5.4 可选链操作符

<script>
	//?.
    function main(config){
        //&&->两边结果均为true时，返回右边的值
        //一个一个判断，存在输出该值，不存在报错
        //const dbHost = config && config.db && config.db.host
        //判断不存在返回undefined，不报错
        const dbHost = config?.db?.host
        console.log(dbHost)
    }
    main({
        db: {
            host:'192.168.1.100'
            username:'root'
        },
        cache: {
            host:'192.168.1.200'
            username:'admin'
        }
    })
</script>

5.5 动态import

<button id="btn">
    点击
</button>
<script src="./app.js" type="module">
	//按需加载
</script>

//app.js
//静态导入
//import * as m1 from "./hello.js"
const btn = document.getElementById('btn')
btn.onclick = function(){
    //动态引入，需要用再加载
    import('./hello.js').then(module=>{
        //console.log(module)
        module.hello()
    })
}

//hello.js
export function hello(){
    alert('Hello')
}

5.6 BigInt

大整型

<script>
	let n = 521n
    console.log(n,typeof(n)) //521n bigint
    
    //函数
    let n = 123
    //不能传浮点型
    console.log(BigInt(n))
    
    //大数值运算
    let max = Number.MAX_SAFE_INTEGER
    console.log(max)
    console.log(max+1)
    console.log(max+2)
    
    console.log(BigInt(max))
    console.log(BigInt(max)+BigInt(1))
    console.log(BigInt(max)+BigInt(2))
</script>

5.7 globalThis

始终指向全局对象

<script>
    //node.js中也支持
	console.log(globalThis)
</script>

posted @ 2021-08-19 12:57 STRIVE-PHY 阅读(106) 评论(0) 编辑收藏举报

刷新页面返回顶部

STRIVE-PHY