ES6~ES12新特性

已于 2022-12-01 14:05:53 修改
阅读量249 收藏
点赞数 1
文章标签： es6 javascript 前端
于 2022-08-23 13:10:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45086164/article/details/126482703
版权

ES6新特性

let属性

<div class="item">记得刷卡</div>
<script type="text/javascript">
        //声明变量
        let a;
        let b,c,d;
        let e=100;
        let f=521, g='iloveyou',h=[];
        //1.变量不能重复声明
        let star ='罗志祥';
        // let star ='小猪';
        //2.块级作用域 全局，函数，eval
        //if else while for
        // {
        //   let girl ='周杨青';
        // }
        // console.log(girl)
        //3.不存在变量提升
        // console.log(song);
        // let song='恋爱达人';
        //4.不影响作用域链
        {
          let school='尚硅谷';
          function fn(){
            console.log(school)
          }
          fn();
        }
        //获取div元素对象
        let items=document.getElementsByClassName('item');
        //遍历并绑定事件
        for(let i=0;i<items.length;i++){
          items[i].onclick =function(){
            //修改当前元素的背景颜色
            //this.style.background='#000000'
            items[i].style.background='#000000';
          }
        }
</script>

const 常量

//声明常量
       const SCHOOL="尚硅谷";
       //1.一定要赋初始值
       //const A;
       //2.一般常量使用大写(潜规则)
       //const a=100;
       //3.常量的值不能修改
       //SCHOOL ="ATGUI";
       //4.块级作用域
       // {
          //  const PLAYER='UZI';
       // }
       // console.log(PLAYER)
       //5.对于数组和对象的元素修改，不算做对常量的修改，不会报错
       const TEAM=['UZI','WEIX','MING'];
       TEAM.push('MSKE');

数组，对象的解构

  //ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，
       //这被称为解构赋值
       //1.数组的解构
       const F4=['小盛宴','刘能','张氏','行政'];
       let [xiao,liu,zhao,song] =F4
       console.log(xiao)
       console.log(liu)
       console.log(zhao)
       console.log(song)
       //2.对象的解构
       const zhang={
           name:'赵本三',
           age:'不限',
           xiaopin:function(){
               console.log('我可以养猪');
           }
       }
       let {name,age,xiaopin} =zhang
       console.log(name)
       console.log(age)
       console.log(xiaopin)
       xiaopin()

模板字符串

//ES6 引入新的声明字符串的方式 '' "" ``
       //1.声明
       let str=`我是一个字符串`
       console.log(str,typeof(str))
       //2.内容中可以直接出现换行符
       let strs=`<ul>
                    <li>生态</li>
                    <li>生态</li>
                    <li>生态</li>
                </ul>`
        console.log(strs)
        //3.变量拼接
        let lovest ='微信'
        let out=`${lovest}是我的好久`
        console.log(out)

简化对象写法

 //ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
       //这样的书写更加简洁
       let name ='尚硅谷'
       let change=function(){
           console.log('我们可以改变你')
       }
       const school={
           name,
           change,
           improve(){
               console.log('我们可以提高你的技能')
           }
       }

箭头函数

<div id="ad">记得刷卡</div>
<script type="text/javascript">
     //ES6 允许使用(箭头)  => 定义函数
     //声明一个函数
     let fn =function(){
         
     }
     let fns=(a,b)=>{
         return a+b
     }
     //调用函数
     let result=fns(1,2)
     console.log(result)
     //1.this 是静态的，this 始终指向函数声明时所在作用域下的this 的值
     function getName(){
         console.log(this.name);
     }
     let getName2 =()=>{
         console.log(this.name)
     }
     //设置 window 对象的name 属性
     window.name='尚硅谷'
     const school={
         name:'ATEKDJ'
     }
     //直接调用
     getName()
     getName2()
     //call 方法调用
     getName.call(school)
     getName2.call(school)
     //2.不能作为构造实例化对象
     let Person=(name,age)=>{
         this.name=name
         this.age=age
     }
     // let me= new Person('xiao',30)
     // console.log(me)
     //不能使用arguments变量
     // let fn=()=>{
        //  console.log(arguments);
     // }
     // fn(1,2,3)
     //4.箭头函数的简写
     //省略小括号，当形参有且只有一个的时候
     let add = n=>{
         return n+n;
     }
     console.log(add(9))
     //省略花括号，当代码体只有一条语句的时候，此时return 必须省略
     //而且语句的执行结果就是函数的返回值
     let pow=n=> n*n;
     console.log(pow(8))
     //需求-1 点击div 2s 后颜色变成(红色)
     //获取元素
     let ad=document.getElementById('ad');
     //绑定事件
     ad.addEventListener('click',function(){
         //保存 this 的值
         let _this=this
         //定时器
         setTimeout(()=>{
             //修改背景颜色 this
             // console.log(this)
             // _this.style.background ='#ff0000'
             this.style.background='#ff0000'
         },2000)
     })
     //需求2 从数组中返回偶数的元素
     const arr=[1,6,9,10,100,25]
     // cosnt results=arr.filter(function(item){
        //  if(item % 2 ===0){
        //   return true
        //  }else{
        //   return false
        //  }
     // })
     const results=arr.filter(item=> item % 2 ===0)
     console.log(results)
     //箭头函数适合于this无关的回调，定时器，数组的方法回调
     //箭头函数不适合与this 有关的回调， 事件回调，对象的方法
</script>

函数参数默认值

 //ES6 允许给函数参数赋值初始值
    //1.形参初始值，具有默认值的参数，一般位置要靠后(潜规则)
    function add(a,b,c=10){
        return a+b+c
    }
    let result=add(1,2)
    console.log(result)
    //2.与解构赋值结合
    function connect({host="127.0.0.1",username,password,port}){
        console.log(host)
        console.log(username)
        console.log(password)
        console.log(port)
    }
    connect({host:'atguigu.com',username:'root',password:'root',port:3306})

rest参数

//ES6 引入 rest 参数，用于获取函数的实参,用来代替arguments
    //ES5 获取实参的方式
    function date(){
        console.log(arguments)
    }
    date('白纸','阿胶','思慧')
    //rest 参数
    function data(...args){
        console.log(args)
    }
    data('白纸','林总','思慧')
    //rest 参数必须要放到参数最后
    function fn(a,b,...args){
        console.log(a)
        console.log(b)
        console.log(args)
    }
    fn(1,2,3,4,5,6,7)

扩展运算符

  <div id="ad">记得刷卡</div>
    <div id="ac">记得刷卡</div>
<script type="text/javascript">
    // 扩展运算符能将数值 装换为逗号分隔的参数序列
    //声明一个数组..
    const tfboys=['意思建行卡','花覅偶时候','发开发']
    //声明一个函数
    function chunwan(){
        console.log(arguments)
    }
    chunwan(...tfboys)
    //1数组的合并
    const kuaizi=['福建考试','就开始']
    const fenghuang=['看就看','扩宽就']
    const zuixuan=kuaizi.concat(fenghuang)
    const zuixuans=[...kuaizi,...fenghuang]
    console.log(zuixuan)
    console.log(zuixuans)
    //2数组的克隆
    const sanzhi=['E','R','T']
    const sanye=[...sanzhi]
    console.log(sanye)
    //3.将伪数组转为真正的数组
    const divs=document.querySelectorAll('div')
    const divArr=[...divs]
    console.log(divArr)
</script>

原始数据类型symbol

  //创建Symbol
    let s = Symbol()
    console.log(s,typeof(s))
    let s2 =Symbol('尚硅谷')
   
    //Symbol.for  创建
    let s4=Symbol.for('尚硅谷')
   
    //不能与其他数据进行运算
    //let result=s +100;
    //向对象中添加方法 up down
    let game={}
    //声明一个对象
    let methods={
        up:Symbol(),
        down:Symbol()
    }
    game[methods.up]=function(){
        console.log('我可以改变形状')
    }
    game[methods.down]=function(){
        console.log('我可以快速下降')
    }
    console.log(game)
    let youxi={
        name:'狼人杀',
        [Symbol('say')]:function(){
            console.log('我可以发言')
        },
        [Symbol('zibao')]:function(){
            console.log('我可以自爆')
        }
    }
    console.log(youxi)

迭代器

//声明一个数组
        const xiyou=['唐生','孙我空','猪八戒','杀生']
        //使用for of 遍历数组  for in 循环打印的是索引
        for(let v of xiyou){
        console.log(v)
        }
   
        let iterator=xiyou[Symbol.iterator]()
        //调用对象的next方法
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());

生成器函数

 //生成器其实就是一个特殊的函数
        //异步编程 纯回调函数 node fs  ajax mongodb
        function * gen(){
            console.log('hello generator')
        }
        let iterator=gen()
        iterator.next()
        //函数代码的分隔符
        function * ges(){
            console.log(111)
            yield '一只没有耳朵'
            console.log(222)
            yield '一只没有尾巴'
            console.log(333)
            yield '真奇怪'
            console.log(444)
        }
        let itertiem=ges()
        console.log(itertiem.next())
        console.log(itertiem.next())
        console.log(itertiem.next())
        console.log(itertiem.next())
        //遍历
        for(let v of ges()){
            console.log(v)
        }
        function * gan(arg){
            console.log(arg)
            let one =yield 111;
            console.log(one);
            let two=yield 222;
            console.log(two)
            let three =yield 333;
            console.log(three)
        }
        //执行获取迭代器对象
        let iterators=gan('AAA')
        console.log(iterators.next())
        //next方法可以传入实参
        console.log(iterators.next('BBB'))
        console.log(iterators.next('CCC'))
        console.log(iterators.next('DDD'))
        //1s 后控制台输出 111 2s 后输出222 3s后输出 333  回调地狱
        setTimeout(()=>{
            console.log(111)
            setTimeout(()=>{
                console.log(222)
                setTimeout(()=>{
                    console.log(333)
                },3000)
            },2000)
        },1000)
        function one(){
            setTimeout(()=>{
                console.log(111)
                iterator.next()
            },1000)
        }
        function two(){
            setTimeout(()=>{
                console.log(222)
                iterator.next()
            },2000)
        }
        function three(){
            setTimeout(()=>{
                console.log(333)
                iterator.next()
            },3000)
        }
        function * gon(){
            yield one()
            yield two()
            yield three()
        }
        //调用生成器函数
        let iteratorss=gon()
        iteratorss.next()
        iteratorss.next()
        iteratorss.next()

传参数

function getUsers(){
        setTimeout(()=>{
            let data ='用户数据'
            //调用next方法，并且将数据传入
            iterator.next(data)
        },1000)
    }
    function getOrders(){
        setTimeout(()=>{
            let data='订单数据'
            //调用next方法，并且将数据传入
            iterator.next(data)
        },1000)
    }
    function getGoods(){
        setTimeout(()=>{
            let data="商品数量"
            //调用next方法，并且将数据传入
            iterator.next(data)
        },1000)
    }
    function * gen(){
        let users=yield getUsers()
        console.log(users)
        let orders=yield getOrders()
        console.log(orders)
        let goods=yield getGoods()
        console.log(goods)
    }
    //调用生产器函数
    let iterator=gen()
    iterator.next()

Promise基本语法

  //实例化Promise对象 resolve 成功  ,reject  失败
        const P =new Promise(function(resolve,reject){
            setTimeout(()=>{
                let data='数据库中的用户数据'
                resolve(data);
                // let err="数据读取失败"
                // reject(err)
            },1000)
        })
        //调用 promise 对象的then 方法 then方法 接收2个函数类型的值
        P.then(function(value){
            console.log(value) //成功调用第一个
        },function(reason){
            console.error(reason) //失败调用第二个
        })
        //实例化Promise对象 resolve 成功  ,reject  失败
        const p=new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('用户数据')
                //reject('出错了')
            },1000)
        })
        //调用then方法 then方法的返回结果是Promise对象，对象状态由回调函数的执行结果决定
        //如果回调函数中返回的结果是 非Promise 类型的属性，状态为成功，返回值为对象的成功的值
        const result=p.then(value=>{
            console.log(value)
            return 'iloveyou' //这个没啥用
        },reason=>{
            console.error(reason)
        })
        console.log(result)
        //链式调用
        p.then(value=>{
           
        }).then(value=>{
           
        })

后台读取多个文件内容

//引入 fs  模块  后台使用  有js文件的话前台也可以使用
    const fs =require("fs")
    //读取多个文件 使用promise 实现
    const p=new Promise((resolve,reject)=>{
        fs.readFile("./resources/为学.md",(err,data)=>{
            resolve(data)
        })
    })
    p.then(value=>{
        return new Promise((resolve,reject)=>{
            fs.readFile("./resources/插秧诗.md",(err,data)=>{
                resolve([value,data]);
            })
        })
    }).then(value=>{
        return new Promise((resolve,reject)=>{
            fs.readFile("./resoures/观书有感.md",(err,data)=>{
                //压入
                value.push(data)
                resolve(value)
            })
        })
    }).then(value=>{
        console.log(value.join('\r\n'))
    })

catch方法

  const p =new Promise((resolve,reject)=>{
        setTimeout(()=>{
            //设置p对象的状态为失败，并设置失败的值
            reject("出错啦")
        },1000)
    })
    p.then(value=>{
       
    },reason=>{
        console.error(reason)
    })
    p.catch(reason=>{
        console.warn(reason)
    })

set集合

//声明一个set 自动去重
    let s=new Set()
    let s2=new Set(['大事儿','小事儿','坏事儿','小事儿'])
    //元素个数
    console.log(s2.size)
    //添加新的元素
    s2.add('喜事儿')
    console.log(s2)
    //删除元素
    s2.delete('坏事儿')
    console.log(s2)
    //检测
    console.log(s2.has('操心事'))
    //清空
    //s2.clear()
    console.log(s2)
    for(let v of s2){
        console.log(v)
    }

是集合 不是数组 要转化为数组 … 扩展运算符

let arr=[1,2,3,4,5,6,7,4,3,2]
   //数组去重
   let result=[...new Set(arr)]
   console.log(result)
   //交集
   let arr2=[4,5,6,7,5]
   let results=[...new Set(arr)].filter(item=>{
       let s2=new Set(arr2);
       if(s2.has(item)){
           return true
       }else{
           return false
       }
   })
   console.log(results)
   let reslut1=[...new Set(arr)].filter(item=> new Set(arr2).has(item))
   console.log(reslut1)
   //并集
   let union =[...new Set([...arr,...arr2])]
   console.log(union)
   //差集
   let diff=[...new Set(arr)].filter(item=> !(new Set(arr2).has(item)))
   console.log(diff)

Map

 //声明Map
   let m=new Map()
   //添加元素
   m.set('name','上谷歌')
   m.set('change',function(){
       console.log('我们可以改变你')
   })
   let key={
       school:'WRDDF'
   }
   m.set(key,['北京','上海','深圳'])
   //size
   console.log(m.size)
   console.log(m)
   //删除
   m.delete('name')
   //获取
   console.log(m.get('change'))
   console.log(m.get(key))
   //清空
  // m.clear()
   //遍历
   for(let v of m){
       console.log(v)
   }

class类

 //ES5的方法 class类  手机
   function Phone(brand,price){
       this.brand=brand
       this.price=price
   }
   //添加方法
   Phone.prototype.call=function(){
       console.log('我可以打电话')
   }
   //实例化对象
   let Huawei=new Phone('华为',6999)
   Huawei.call()
   console.log(Huawei)
   //class
   class Shouji{
       //构造方法 名字不能修改
       constructor(brand,price) {
           this.brand=brand
           this.pricel=price
       }
       //方法必须使用该语句，不能使用ES5的对象完整形式
       call(){
           console.log('我可以打电话')
       }
   }
   let onePlus=new Shouji('1+',1999)
   console.log(onePlus)

静态成员

class Phone{
        //静态属性
        static name='手机';
        static change(){
            console.log('我可以打电话')
        }
    }
    let nokia=new Phone()
    console.log(nokia.name)
    console.log(Phone.name)

ES5构造函数继承

  //手机
    function Phone(brand,price){
        this.brand=brand
        this.price=price
    }
    Phone.prototype.call=function(){
        console.log('我可以打电话')
    }
    //智能手机
    function SmartPhone(brand,price,color,size){
        Phone.call(this,brand,price)
        this.color=color
        this.size=size
    }
    //设置子级构造函数的原型
    SmartPhone.prototype=new Phone;
    SmartPhone.prototype.constructor=SmartPhone;
    //声明子类的方法
    SmartPhone.prototype.photo=function(){
        console.log('我可以拍照')
    }
    SmartPhone.prototype.playGame=function(){
        console.log('我可以玩游戏')
    }
    const chuizi=new SmartPhone('锤子',2499,'黑色','5.5inch')
    console.log(chuizi)

类继承

  class Phone{
        //构造方法
        constructor(brand,price) {
            this.brand=brand
            this.price=price
        }
        //父类的成员属性
        call(){
            console.log('我可以打电话')
        }
    }
    class SmartPhone extends Phone{
        //构造方法
        constructor(brand,price,color,size) {
            super(brand,price);//Phone.call(this,brand,price)
            this.color=color
            this.size=size
        }
        photo(){
            console.log('拍照')
        }
        playGame(){
            console.log('玩游戏')
        }
    }
    const xiaomi=new SmartPhone('小米',799,'黑色','4.7inch')
    console.log(xiaomi)
    xiaomi.call()
    xiaomi.photo()
    xiaomi.playGame()

get和set

//get 和 set
    class Phone{
        get price(){
            console.log('价格属性被读取了')
            return 'iloveyou'
        }
        set price(newVal){
            console.log('价格属性被修改了')
        }
    }
    //实例化对象
    let s = new Phone()
    //console.log(s.price
    s.price='free'

数值扩展

//0. Number.EPSILON 是javaScript 表示的最小精度
    //EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
    function equal(a,b){
        if(Math.abs(a-b) < Number.EPSILON){
            return true
        }else{
            return false
        }
    }
    console.log(0.1+0.2 === 0.3)
    console.log(equal(0.1+0.2,0.3))
    //1.二进制和八进制
    let b=0b1010;
    let o=0o777;
    let d=100;
    let x=0xff;
    console.log(x)
    //2.Number.isFinite 检测一个数值是否为有限数
    console.log(Number.isFinite(100))
    console.log(Number.isFinite(100/0))
    console.log(Number.isFinite(Infinity))
    //3.Number.isNaN 检测一个数值是否为NaN
    console.log(Number.isNaN(123))
    //4.Number.parseInt Number.parseFloat 字符串转整数
    console.log(Number.parseInt('52111314love'))
    console.log(Number.parseFloat('3.123244生钱'))
    //5.Number.isInteger 判断一个数是否为整数
    console.log(Number.isInteger(5))
    console.log(Number.isInteger(2.5))
    //6.Math.trunc 将数字的小数部分抹掉
    console.log(Math.trunc(3.5))
    //7.Math.sign 判断一个数到底为正数  负数 还是 零
    console.log(Math.sign(100))
    console.log(Math.sign(0))
    console.log(Math.sign(-20000))

对象方法扩展

  //1.Object.is 判断两个值是否完全相等
    console.log(Object.is(120,120))
    console.log(Object.is(NaN,NaN))
    console.log(NaN===NaN)
    //2.Object.assign 对象的合并
    const config1={
        host:'localhost',
        port:3306,
        name:'root',
        pass:'root',
        test:'test'
    }
    const config2={
        host:'http://atguigu.com',
        port:33060,
        name:'atguigu.com',
        pass:'iloveyou'
    }
    //后面的把前面覆盖，如果不一样合并
    console.log(Object.assign(config1,config2))
    //Object.setPrototypeOf 设置原型对象 Object.getPrototypeof
    const school={
        name:'尚硅谷'
    }
    const cities={
        xiaoqu:['北京','上海','深圳']
    }
    Object.setPrototypeOf(school,cities)
    console.log(Object.getPrototypeOf(school))
    console.log(school)

模块化
模块功能主要由两个命令构成：
export命令用于规定模块的对外接口
import命令用于输入其他模块提供的功能
分别暴露
在这里插入图片描述
统一暴露
在这里插入图片描述
默认暴露
在这里插入图片描述
在这里插入图片描述
通用的导入方式
在这里插入图片描述
解构赋值形式
在这里插入图片描述
在这里插入图片描述
简便形式 只针对默认暴露
在这里插入图片描述
可以使用另外一种方式全部引入 注意type=“module”
在这里插入图片描述
打包在一起模块
在这里插入图片描述
**

ES7新特性

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

//includes
    const mingzhu=['西游记','红楼梦','三国演义','水浒传']
    //判断
    console.log(mingzhu.includes('西游记'))
    console.log(mingzhu.includes('金瓶梅'))

在ES7中引入指数运算符[**],用来实现幂运算，功能与Math.pow结果相同
2的10次方

//** 幂运算
    console.log(2 ** 10) //10的 2次方
    console.log(Math.pow(2,10))

ES8

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

async 函数的返回值为promise对象

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

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

  //async 函数
    async function fn(){
        //返回一个字符串
        //return '发货水电费'
        //返回的结果不是一个 Promise 类型的对象，返回的结果就是成功 Promise 对象
        // return
        // //抛出错误，返回的结果是一个失败的Promise
        // throw new Error('出错了')
        //返回的结果如果是一个Promise 对象
        return new Promise((resolve,reject)=>{
            //resolve('成功的数据')
            reject('失败的错误')
        })
    }
    const result =fn()
    //调用then 方法
    result.then(value=>{
        console.log(value)
    },reason=>{
        console.warn(reason)
    })
    //创建promise 对象
    const p =new Promise((resolve,reject)=>{
        resolve('用户数据')
        //reject('失败拉')
    })
    //await 要放在 async 函数中
    async function main(){
        try{
            let result = await p
            console.log(result)
        }catch(e){
            //捕获失败结果
            console.warn(e)
        }
    }
    //调用函数
    main()

读取文件

在这里插入图片描述
在这里插入图片描述
对象方法扩展
Object.values()方法返回一个给定对象的所有可枚举属性值的数组
Object.entries()方法返回一个给定对象自身可遍历属性[key,value]的数组

//声明对象
    const school={
        name:'尚硅谷',
        cities:['北京','上海','深圳'],
        xueke:['前端','jave','大数据','运维']
    }
    //获取对象所有的键
    console.log(Object.keys(school))
    //获取对象所有的值
    console.log(Object.values(school))
    //entries  显示所有的键 和值
    console.log(Object.entries(school))
    //创建Map
    const m =new Map(Object.entries(school))
    console.log(m.get('cities'))
    //对象属性的描述对象
    console.log(Object.getOwnPropertyDescriptors(school))
    const obj=Object.create(null,{
        name:{
            //设置值
            value:'尚硅谷',
            //属性特性
            writable:true,
            configurable:true,
            enumerable:true
        }
    })

ES9

  // Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过ES6 中只针对于数组
    //在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符
    function connect({host,port,...user}){
        console.log(host)
        console.log(port)
        console.log(user)
    }
    connect({host:'127.0.0.1',port:3306,username:'root',password:'root',type:'master'})
    const skillOne={
        q:'天音波'
    }
    const skillTwo={
        w:'金钟罩'
    }
    const skillThree={
        e:'天雷破'
    }
    const skillFour={
        r:'猛龙固件'
    }
    //对象的合并
    const mangseng={...skillOne,...skillTwo,...skillThree,...skillFour}
    console.log(mangseng)

正则扩展-命名捕获分组 . 是通配符*

//声明一个字符串
    let str =`<a href="http://www.arguig.com">航空</a>`
    //提取url 与 标签文本 \ 转义字符
    const reg =/<a href="(.*)">(.*)<\/a>/
    //执行
    const result=reg.exec(str)
    console.log(result[1])
    console.log(result[2])
    let stra=`<a href="http://www.arguig.com">航空</a>`
    const regs=/<a href="(?<url>.*)">(?<text>.*)<\/a>/
    const results=regs.exec(stra)
    console.log(results.groups.url)
    console.log(results.groups.text)

正则扩展-反向断言

//声明一个字符串
    let str ='jS42342进口量福建省432拉拉拉'
    //正向断言
    const reg =/\d+(?=拉)/
    const result=reg.exec(str)
    console.log(result)
    //反向断言
    const reg1=/(?<=省)\d+/
    const result1=reg1.exec(str)
    console.log(result1)

正则扩展-dotAll模式

//dot . 元字符 除换行符以外的任意单个字符
    let str =` <ul>
            <li>
                    <a >救赎</a>
                    <p>上一日起：23002</p>
            </li>
            <li>
                    <a >阿甘</a>
                    <p>上一日起：23002</p>
            </li>
       </ul>`
       //声明正则
       //const reg=/<li>\s+<a >(.*?)<\/a>\s+<p>(.*?)<\/p>/
       const reg=/<li>.*?<a >(.*?)<\/a>.*?<p>(.*?)<\/p>/gs
       // g是全局匹配 s是匹配任意字符
       //执行匹配
       //const result=reg.exec(str)
       let result
       let data=[]
       while(result=reg.exec(str)){
           data.push({title:result[1],time:result[2]})
       }
       //输出结果
       console.log(data)

ES10

  //二维数组
    const result=Object.fromEntries([
        ['name','尖峰时刻'],
        ['xueke','java,大数据,前端,云计算']
    ])
    console.log(result)
    //Map
    const m=new Map()
    m.set('name','ATIOJJHK')
    console.log(m)
    const result1=Object.fromEntries(m)
    console.log(result1)
    //Object.entries ES8
    const arr = Object.entries({
        name:'绝对是开发'
    })
    console.log(arr)

trimStart trimEnd 清除字符串左右侧空白字符

//trim
    let str ='    iloveyou    '
    console.log(str)
    //清除左边空白字符串
    console.log(str.trimStart())
    //清除右边空白字符串
    console.log(str.trimEnd())

flat flatMap 将多维数组转化为低位数组

//flat
    //将多维数组转换为低位数组
    const arr=[1,2,3,4,[5,6]]
    const arr1=[1,2,3,4,[5,6,[7,8]]]
    //参数为深度， 是一个数字
    console.log(arr.flat(1))
    console.log(arr1.flat(2))
    //flatMap
    const arr2=[1,2,3,4]
    const result=arr2.flatMap(item=>[item*10])
    console.log(result)
    //创建Symbol
    let s=Symbol('倒计时')
    //获取Symbol字符串
    console.log(s.description)

ES11

  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 girl=new Person('晓红',18,'45kg');
    console.log(girl.name);
    //console.log(girl.#age);//获取不到私有属性 报错
    //console.log(girl.#weight);//获取不到私有属性 报错
    girl.intro()
    //声明两个promise对象
    const p1=new Promise((resolve,reject)=>{
        setTimeout(()=>{
            //返回成功resolve   返回失败reject
            resolve('商品数据 - 1')
        },1000)
    })
    const p2=new Promise((resolve,reject)=>{
        setTimeout(()=>{
            //返回成功resolve   返回失败reject
            resolve('商品数据 - 2')
            //reject('出错啦')
        },1000)
    })
    //调用 allsettled方法  不管成功失败  返回的都是成功的值
    const result=Promise.allSettled([p1,p2])
    console.log(result)
    //需要全部成功
    const res=Promise.all([p1,p2])
    console.log(res)
    let str=`<ul>
        <li>
            <a >肖生克的救赎</a>
            <p>上一时期：1900-02-23</p>
        </li>
        <li>
            <a >阿甘正传</a>
            <p>上一时期：1900-02-23</p>
        </li>
    </ul>`;
    //声明正则
    const reg=/<li>.*?<a >(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
    //调用方法
    const result1=str.matchAll(reg);
    for(let v of result1){
        console.log(v)
    }
    const arr=[...result1]
    console.log(arr)

可选链操作符

//?.
    function main(config){
        const dbHost=config && config.db && config.db.host;
        const dbHost1=config?.db?.host;//少了很多判断
        console.log(dbHost)
        console.log(dbHost1)
    }
    main({
        db:{
            host:'192.168.1.100',
            username:'root'
        },
        cache:{
            host:'192.168.1.200',
            username:'admin'
        }
    })

动态import

// import * as m1 from "./hello.js";
    //获取元素
    const btn =document.getElementById('btn');
    btn.onclick=function(){
        //动态引入
        import('./hello.js').then(module=>{
            module.hello();
        })
    }

大整形

//大整形
    let n =521n;
    console.log(n,typeof(n));
    //函数
    let m=123;
    console.log(BigInt(m))
    //console.log(BigInt(1.2))
    //大数值运算
    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));

全局this 忽略环境

console.log(globalThis);

ES12

String.prototype.replaceAll
有了这个 API，替换字符不用写正则了

const str = "hello world";
// 之前
str.replace(/o/g, "a")// "hella warld"
// 现在
str.replaceAll("o", "a")// "hella warld"

新增Promise的any方法
作用：返回第一个fullfilled 的 promise ，若全部 reject，则返回一个带有失败原因的 AggregateError。

即与race差不多，与 Promise.race 不同，当其中一个 promises是fail 时，它不会 reject。

请看官方提供例子-检查哪个网站更快

Promise.any([ 
  fetch('https://v8.dev/').then(() => 'home'), 
  fetch('https://v8.dev/blog').then(() => 'blog'), 
  fetch('https://v8.dev/docs').then(() => 'docs')])
.then((first) => { 
  // Any of the promises was fulfilled. 
  console.log(first); 
  // → 'home'
})
.catch((error) => { 
  // All of the promises were rejected. 
  console.log(error);
});

新增逻辑赋值操作符： ??=, &&=, ||=

时光浅止
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
整理es6-es12新特性
然后不二
02-24 509
es6-es12所有新特性
es6语法
weixin_45527865的博客
05-18 92
参考地址：https://es6.ruanyifeng.com/#docs/intro 1.let const var let var 都是声明变量 let 有块级作用域 无变量提升 有暂存性死区 不允许在相同作用域内，重复声明同一个变量 var 没有块级作用域 有变量提升 无暂存性死区 const 声明常量 声明不可以更改（并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动） 有块级作用域 2.解构赋值（数组 对象 字符串 数值和布尔值 函数参数 ） 数组 允.
ES11,ES12,ES13(超详细!!!,附用法代码)
最新发布
gu644335363的博客
04-29 829
当给定的索引为正数时，这个新方法的行为与使用括号符号的访问相同，但是当我们给定一个负整数的索引时，它就像python的 "负数索引 "一样工作，这意味着at()方法以负整数为索引，从数组的最后一项往后数。Promise.allSettled()方法接收一组Promise对象，返回一个Promise对象，当所有Promise都已经settled（即已经完成或已经拒绝）时，返回一个包含每个Promise结果的对象。这与C#和Java中的静态构造函数相似。类的字段定义和初始化是在类的构造函数中完成的。
es6~es12新特性
samscat的博客
03-03 145
ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMA-417。关于ECMA的最新资讯可以浏览ECMA news查看。ECMAScript 标准建立在一些原有的技术上，最为著名的是 JavaScript (网景) 和 JScript(微软)。它最初由网景的 Brendan Eich 发明，第一次出现是在网景的 Navigator 2.0 浏览器上。Netscape。
es6到es12新特性介绍
个人工作学习内容总结
11-01 523
ES6（2015） 1. 类（class） class Man { constructor(name) { this.name = name; } console() { console.log(this.name); } } const man = new Man('老王'); man.console(); // 2. 模块化(ES Module) // 模块 A 导出一个方法 export const sub = (a, b) => a + b; // 模块 B
【ES6-ES12】新特性笔记(一)
weixin_45039579的博客
06-07 222
ES6-ES12新特性第一部分 ES6
JavaScript ES6~ES11新特性学习笔记练习文件
05-02
这份“JavaScript ES6~ES11新特性学习笔记练习文件”正是为了帮助开发者系统学习和掌握这些新特性而准备的。以下将详细阐述这些版本中的关键更新： 1. **箭头函数**： 箭头函数提供了简洁的函数定义方式，如 `...
ES6、ES7、ES8、ES9、ES10新特性一览1
08-08
下面将详细讲解ES6、ES7、ES8、ES9以及ES10的主要新特性。 ### ES6（2015） #### 1. 类（Class） ES6引入了类的概念，提供了更简洁的面向对象编程语法，但实质上，类语法仍然是基于原型的。 #### 2. 模块化...
ES6新特性之Object的变化分析
08-30
在ES6（ECMAScript 2015）中，JavaScript的Object对象有了许多新的特性和改进，使得对象的定义和操作更加灵活和高效。以下是一些重要的改变： 1. **属性简写** 在ES6中，如果属性名与变量名相同，我们可以省略属性...
ES6-ES10新特性.md
12-21
es6-es10新语法
es6新特性之 class 基本用法解析
08-27
"ES6 新特性之 Class 基本用法解析" ES6 中引入的 Class 语法是 JavaScript 中的一种新的编程方式，提供了更接近传统语言的写法，引入了类（Class）这个概念，作为对象的模板。下面是 ES6 中 Class 的基本用法解析...
JavaScript中使用replace结合正则实现replaceAll的效果
10-29
JavaScript 中使用 replace 达到 replaceAll的效果，其实就用利用的正则的全局替换。
30个ES6—ES12 新功能
web_ding的博客
01-12 926
30个ES6—ES12 新功能 ECMAScript是一种由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言，这种语言被称为 JavaScript 。简单来说，ECMAScript 是 JavaScript 的标准与规范，JavaScript 是 ECMAScript 标准的实现和扩展。 自2015年开始，ECMAScript发布的版本如下： 发布时间 正式名称 版本名称 名称缩写 2015 ECMAScript2015 ECMAScri.
ES6-ES12所有特性详解
weixin_39273589的博客
09-08 180
city;空位合并运算符: 提供了一种简洁的方式来提供默认值，当属性值为 null 或 undefined 时使用。.name???
实现js的replaceAll方法
shirlly
09-19 111
js不提供replaceAll方法，要用正规表达式实现 [code="java"] String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,"gm"),s2); } [/code] [code="java"] str =str.replace(/&/g,"...
es6总结
a745595613的博客
03-27 820
一、let、const let与var的区别 1、let受块级作用域限制，var仅受函数作用域限制 2、let不存在变量提升 3、let存在暂时性死区 4、let不允许重复声明 5、let声明的全部变量不属于顶层对象（window、global，es2020还引入统一的globalThis指向顶层对象） const是无法改变值的let，且需要在声明时复制 二、解构赋值 解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象比如： 1、字符串：被转换成了一个类似数组的对象 2、数值和布尔值：包装为
第四章 ES6
weixin_43352648的博客
11-26 490
ES6
ES6语法
长不大的大灰狼
04-04 1357
ES6语法1、let命令2、块级作用域 1、let命令 （1）基本用法 let所声明的变量，只在let命令所在的代码块内有效。 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 for循环很合适使用let命令，计数器i只在for循环体内有效，在循环体外引用就会报错。 for (let i = 0; i < 10; i++) { // ... } console.log(i); // Refer
es6~es13的新特性
05-12
ES6 ~ ES13 是 JavaScript 的连续版本，每个版本都引入了一些新的特性和语言结构。下面是它们的一些新特性： ES6： 1. 箭头函数 2. 模板字符串 3. 解构赋值 4. 默认参数 5. 类和继承 6. let 和 const 块级作用域...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光浅止

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值