ES6~ES11

2021-12-16  本文已影响0人  陈桑

1、let和const

  let a   /  let a,b,c,d  /  let a=10
  特点:
  1、变量不能重复声明
  2、作用域为块级作用域(块级,全局,函数,eval)
  3、不存在变量提升
  4、不影响作用域链
  const a='hello'
  特点:
  1、要赋予初始值
  2、通常大写(小写也行)
  3、常量的值不能修改
  4、块级作用域
  5、对于数组和对象的元素进行修改不会报错(不算对常量进行修改)
  

2、解构赋值

  1、数组结构
  const array = ['云间月','林间雪','心上人']
  let [a,b,c] = array  //a:云间月,b:林间雪,c:心上人
  2、对象结构
  const ruleForm = {
    page:20,
    size:10,
    total:100,
    fun:function(){
      console.log('页码20,每页10条,总数100')
    }
  }
  let {page,size,total,fun} = ruleForm //20,10,100,和fun这个函数
  fun();//可以直接调用

3、模板字符串

  引入字符串的方式 `` (反引号)
  特点:
  1、内容中可以直接出现换行符(单引号或者双引号则不行)
  2、变量拼接
  let a = '魏海量'
  console.log(`${a}一杯就倒`) //魏海量一杯就倒
  必须使用${}的形式

4、简化对象的写法

  ES6允许在大括号里面直接写入变量和函数,作为对象的属性和方法--更加简洁
  let time= '12:00'
  let date = function(){
    return new Date()
  }
  const TEMP = {time,date,};//12:00,当前时间
  等同于 
  const TEMP = {
    time:time,
    date:date
  }
  函数简化:
  let fun = function(a,b){
    console.log(a,b) 
  }
  等同于
  fun(a,b){
    console.log(a,b)
  }

5、箭头函数及其声明特点

  使用 => 定义函数
  原始声明:
  let fun = function(a,b){console.log(a+b)}
  原始调用 fun(1,2);//3
  ES6声明:
  let fun = (a,b) =>{console.log(a+b)}
  ES6调用 fun(1,2);//3
  特点:
  1、this是静态的,始终指向函数声明时所在作用域下的this的值
    2、不能作为构造函数实例化对象
    let fun  = (a,b) =>{
      console.log(a+b)
    }
    let funs = new fun(1+2);//报错
  3、不能使用arguments变量
  let fun = () =>{console.log(arguments)}
  fun(1,2,3);//报错 argements未定义
  4、箭头函数的简写
    01、省略小括号,当形参有且又有一个的时候可简写
    例:let fun = (a) =>{console.log(a)}
    等同于 let fun= a =>{console.log(a)}
    调用:fun(1);//1
    02、省略花括号,当代码体只有一条语句的时候,此时return必须省略,且语句的执行结果就是函数的返回值
    例:let fun = a =>{return a+a};
    等同于 let fun = a => a+a
    调用:console.log(fun(1));//2
  5、使用场景:
    01、适合与this无关的回调、定时器、数组的方法回调
    02、不适合与this有关的回调,事件的回调,对象的方法等

6、允许给函数的参数(形参)赋予初始值

  原始:function add(a,b,c){return a+b+c}
  add(1,2);//undefined
  ES6:function add(a,b,c=3){return a+b+c}
  add(1,2);//6
  特点:
  1、形参初始值,具有默认值的参数,一般放到后面
  2、可以与解构赋值相结合
    例:
    function fun({name='王朱',age}){return name+'年龄'+age}
    fun({age:10});//王朱年龄10

7、rest参数(用于代替arguments)

  用于获取函数的实参是ES6获取实参的方式
  原始:
    function fun(){console.log(arguments)}
    fun('周米粒,暖树,景清');//{0:‘周米粒’,1:'暖树',2:'景清'} 是一个对象
  ES6:
  function(...params){console.log(params)}
  fun('周米粒,暖树,景清');//['周米粒,暖树,景清'] 是一个数组,可以使用数组的方法
  限制:当有多个参数时,rest参数必须放到最后
  例:function fun(a,b,...params){console.log(a,b,params)}
  fun(1,2,3,4,5,6,7);//1,2,[3,4,5,6,7]

8、扩展运算符 ...

  扩展运算符能将数组转化为逗号分割的参数序列
  let params = [1,2,3]
  function fun(){console.log(arguments)}
  原始:fun(params);// {0:[1,2,3]} 是一个对象,只有一个参数
  扩展运算符:fun(...params);//[[1,2,3]] 是一个数组,有多个参数
  运用:
      例:const arr = ['aa','bb']
      例:const arr2 = ['dd','ee']
    1、数组合并
      原始:arr.concat(arr2);//['aa','bb','dd','ee']
      扩展运算符 [...arr,...arr2];//['aa','bb','dd','ee']
    2、数组的克隆
      let arr3 = [...arr];//['aa','bb'] 如果只是值类型,则可以创建一个新的数组,如果有引用类型的话,则只是浅拷贝。
    3、将伪数组转化为真正的数组(假如有三个div)
      const arr = document.querySelectAll('div');//对象类型
      let arrs = [...arr];//数组类型
      例:转化arguments

9、Symbol(用得少)

  Symbol是ES6引入的一种新的原始数据类型,表示独一无二的值;是js的第七种数据类型,类似字符串的数据类型。
  特点:
    1、Symbol的值是唯一的,用来解决命名冲突的问题;
    2、Symbol值不能与其它数据类型进行运算;
    3、Symbol定义的对象属性不能使用for...in循环遍历,但是可以使用Reflect.ownkeys获取对象的所有键名。
  Symbol创建的几种方式:
    1、let Sy1 = Symbol();//Symbol()
    2、let Sy2 = Symbol('temp1');//Symbol('temp1')
    3、let Sy3 =Symbol('temp1');//Symbol('temp1)
       console.log(SY2===Sy3);//false 两个是不一样的,在内部会做区别,外部无法获知
    4、let Sy4 = Symbol.for('temp2');//Symbol('tamp2')
       let Sy5 = Symbol.for('temp2');//Symbol('tamp2')
       console.log(SY2===Sy3);//true这样创建是一样的
  Symbol的使用场景:向对象中添加属性和方法
    1、方法1
      let obj = {
        add:()=>{},
        minus:()=>{}
      }
      let methods = {
        add:Symbol('add'),
        minus:Symbol('minus')
      }
      obj[methods.add] = (a)=>{return a+a}
      obj[methods.minus] = (a)=>{return a+a}
    2、方法2
      let obj= {
         name:'temp',
        [Symbol('fun')]:a=>return a+a
      }
  Symbol 还有十一个内置属性
  js的数据类型:USONB
    u:undefined
    s:String Symbol
    o:Object
    n:null Number
    b:Boolean

10迭代器(用得少)

  迭代器是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署interrator接口(interrator接口是对象的一个属性:Symbol.interator),就可以完成遍历操作
  Es6创造一种新的遍历命令for...of循环,interator主要提供for..of循环
  具备interator接口的数据(可用for...of循环遍历)
    1、Array;
    2、arguments;
    3、Set;
    4、Map;
    5、String;
    6、TypeArray;
    7、NodeList;
  例:
    const arr = ['景清','暖树']
    for(let i of arr){
      console.log(i);//景清,暖树
    }
    可打印数组,在得到的数据中找到Symbol.interator这个函数  console.log(arr)
    调用这个函数,然后打印返回值,可以找到next()方法  let temp = arr[Symbol.interator]()
    之后可以调用next()方法  temp.next()
  工作原理:
    1、创建一个指针对象,指向当前结构的起始位置
    2、第一次调用对象的next()方法,指针自动指向数据结构的第一个成员
    3、接下来不断调用next()方法,指针一直往后移动,直到指向最后一个成员=
    4、每次调用next()方法返回一个包含value和done 的属性的对象

11、生成器

 是一种特殊的函数,是一种异步编程的解决方案
 声明方式:函数和函数名之间加 * 号
   function * fun(){console.log('hello')}
   let interator = fun()
   console.log(interator);//返回值是一个迭代器对象
   调用:interator.next();//hello 调用的是里面的next()方法
 yield语句
   function * fun(){
     console.log('111');
     yield '第二次调用';
     console.log('222');
     yield '第三次调用';
     console.log('333');
   }
   let interator = fun()
   interator.next();//111
   interator.next();//222
   interator.next();//333
 生成器函数参数
   function * fun(parmas){
     console.log(params);
     let first = yield 1
     console.log(first)
     let second  = yield 2
     console.log(second)
   }
   let interator = fun('A');//获取迭代器对象
   interator.next();//A {value:1,done:false}
   //在调用时可以传入实参,实参作为yield语句的返回结果(第二次调用传入的实参会作为第一个yield语句的返回结果)
   interator.next();//A {value:1,done:false}
   //同样;第三次调用的参数会作为第二个yield语句的返回结果,以此类推

 实例:
   1、回调地狱函数:
     function fun1(){
       console.log(111)
       function fun2(){
         console.log(222)
         function fun3(){
           console.log(333)
           //...
         }
       }
     }
   2、生成器函数
     function fun1(){
       console.log(111)
       interator.next();//可传参数,作为第一个yield语句的返回值
     }
     function fun2(){
       console.log(222)
       interator.next()
     }
     function fun3(){
       console.log(333)
       interator.next()
     }
     function * fn(){
       yield fun1()
       yield fun2()
       yield fun3()
     }
     let interator = fn()
     interator.next()

12、Promise(重要)

ES6引入的异步编程的解决方案,语法上是一个构造函数,用来封装异步操作,并可以获取成功或失败的结果
  基本语法:
  //实例化一个Promise对象,里面的参数可以是一个异步函数(例:要封装的请求),函数有两个参数,可以随便,通常是resove和reject
  const prom = new Promise(functiong(resove,reject){
    function fun(){
      let res = '返回结果(成功)'
      resove(res)
      let res2 = ‘返回结果(失败)’
      reject(res2)
    }
  })
  //回调Promise的then()方法,then()有两个参数,都是函数,函数有实参,分别是resove()返回的成功数据,和reject返回的失败数据
  prom.then((res)=>{
    console.log(res)
  },(err)=>{
    console.log(err)
  })
  then()方法的返回结果是一个Promise对象,对象状态由函数的执行结果决定:
  1、如果回调函数中返回的结果是非Promise类型的属性,状态为成功,返回值为对象的成功的值
  2、如果回调函数中返回的结果是Promise类型,则状态跟随返回的Promise的状态
  then()方法可以链式调用(解决回调地狱)
  catch()方法返回错误信息 
  例:prom.ctach(res=>{return '正确' }).catch(err=>{console.log('失败')})

13、Set

Es6提供新的数据结构Set(集合),类似于数组,但是成员都是唯一的;集合实现了interator接口,可使用扩展运算符(...)和for...of进行编辑
  1、集合的属性和方法
    01、size  返回集合的元素个数
    02、add  添加一个元素,返回当前的集合
    03、delete  删除元素,返回Boolean值
    04、has  检测集合是否包含某个元素,返回Boolean值
    05、clear 清空集合
  2、声明方式
    let s =  new Set();//typeof=>Object
  3、使用
    let arr = [5,10,5,15]
    let s2 = new Set(arr);//{5,10,15}
    s2.size ;//3
    s2.add(20);//{5,10,15,20}
    s2.delete(2);//{10,15,20}
    s2.has(5);//false
    s2.clear();//{}
    for(let s of s2){
      console.log(s);//可获得里面的每个值
    }
  4、数组去重(常用)
    let arr = [1,4,3,3,2,2,3,]
    let arr2 = [...new Set(arr)];//[1,4,2,3]

14、Map

Map数据结构,类似于对象,是键值对的集合,但是键的范围不限于字符串,各种类型的值都可以当做键。Map实现了interator接口,可使用扩展运算符和for...of循环遍历
  Map的属性和方法
    01、size  返回元素个数
    02、set  添加新的元素,返回当前Map
    03、get  返回键名对象的键值
    04、has  检测map中是否含有某个元素,返回Boolean值
    05、清空集合,返回Map(0){}
声明方式:
  let m = new Map()
使用:
  m.set('name','周米粒');// {'name'=>'周米粒'}
  m.set('fun',function(){});// {'fun'=>function(){}}
  m.size;//2
  m.delete('name');//{'fun'=>function(){}}
  m.get('fun');//function(){}
  m.clear();//map(0){}
  for(let i of  m){console.log(i)};//数组的形式[键,值],[键,值]

15、class

更接近传统语言的写法;通过class关键字=可以定义类,可看作是一个语法糖,大部分功能ES5可以实现,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法
//TODO 有点虚,下次还得再看看

16、数值扩展

一些方法
  01、Number.isFinite();检测一个数值是否为有限数,例:
    Number.isFinite(100);//返回Boolean值
  02、Number.isNaN();//检测一个数是否为数字,例:
    Number.isNaN(22);//返回Boolean值
  03、Number.paseInt()提取整数,例:
    Number.parseInt('521亲爱的姑娘');//521
  04、Number.parseFloat提取浮点数,例:
    Number.parseFloat('3211.1多瓦');//3211.1
  05、Number.isInteger();检测一个数是否为整数,例:
    Number.isInteger(6.6);//false 返回boolean值
  06、Math.trunc();将数字的小数部门抹掉
    Math.trunc(6.6);//6,返回抹去小数后的整数
  07、Math.sign();判断一个数是正数,负数,零
    Math.sign(66);//1,正数
    Math.sign(-66);//-1,负数
    Math.sign(0);//0,零

17、对象方法的扩展

1、Object.is() 判断两个值是否相等
    Object.is(66,66);//true
    Object.is(66,61);//false
    Object.is(NaN,NaN);//true,特殊
2、Object.assign()对象的合并
  let Obj1 = {}
  let Obj2 = {}
  Object.assign(Obj1,Obj2);//对象2会把对象1覆盖,返回合并后的新对象
3、Object.setPrototypeof()设置原型对象;Object.getPrototypeof();获取原型对象
  const obj1 = {name:'周米粒'}
  const obj2 = {work:'巡山',address:'落魄山'}
  Object.setPrototype(obj1,obj2);设置原型对象
    输出结果:{name:'周米粒',
    __proto__:{
      work:'巡山',
      address:'落魄山'
    }}
  Object.getPrototypeof(obj1);//获取原型对象

18、模块化

将一个大的程序文件,拆分成许多小的程序文件,然后将小文件组合起来
1、好处:
  01、防止命名冲突
  02、代码复用
  03、更容易维护
2、模块化规范产品
  1、CommonJS => NodeJS  Browserify
  2、AMD => requireJS
  3、CMD => sealJS
3、 ES6模块化语法(在浏览器中无法直接使用,我们需要在引入模块的 <script> 元素上添加type="module" 属性)
  1、export (暴露) 用于规定模块的对外接口
  2、import (引入) 用于输入其他模块提供的功能
  例1(Vue):
    01、单独暴露,全部引入
      export let baseUrl = "192.168.18"
      export function fun(a,b){return a+b}
      使用的地方:
      import * as temp form "js文件路径"
      console.log(temp)
    02、统一暴露,解构赋值形式引入
      let baseUrl = "192.168.18"
      function fun(a,b){return a+b}
      export {baseUrl,fun}
      使用的地方:
      import {baseUrl,fun} form "js文件路径"
      console.log(temp)
    03、默认暴露
      export default {
        fun:function(){}
        baseUrl:'192.168.2'
      }
      使用的地方:
      import {default as temp} form "js文件路径"
      console.log(temp)
  注意:
    1、引入 export default 导出的模块不用加 {},引入非 export default 导出的模块需要加 {}
    2、一个文件只能导出一个 default 模块。
    3、import/export 不能对引入模块重新赋值/定义
    4、import/export 只能在模块顶层使用,不能在函数、判断语句等代码块之中引用

https://zhuanlan.zhihu.com/p/121770261以及尚硅谷视频)

19、ES7

两个方法:
  1、includes() 判断数组中是否含有某个元素,返回Boolean值
    例:
    const arr = ['白也','白玄','白景']
    console.log(arr.includes('暖树'));//false
    和indexOf类似,不过返回值不一样
  2、** 计算一个数的多少次幂
    例:
    console.log(2 ** 10);//1024
    等同于 Math.pow(2,10)

20、ES8--async

  1、async
  使用:
  async fun(){
    //async返回值是一个Promise对象
    //如果返回的结果不是一个Promise类型的对象,返回的结果就是成功的Promise
    return 'Srtring';
    //抛出错误,返回的结果是一个失败的Promise
    throw new Error('错误抛出')
    //如果返回值是一个Promise对象(多数情况下)
    return new Promise((resove,reject)=>{
      resove('成功的数据');//返回结果则为成功
      reject('失败的数据');//但会结果则为失败
    })
  };//函数那面加一个async
  fun().then(()=>{
    //resole('成功的数据')在这里会被得到
  },()=>{
    //reject('失败的数据')在这里会被得到
  })

21、ES8--async await

await表达式:

结合使用
  function fun1(){
    return new Promise((resove,reject)=>{
      //getData定义的一个请求数据的函数
      getData(){
        if(res.message=='success'){
          resove(res)
        }else{
          reject(res.message)
        }
      }
    })
  }
  async tempFun(){
    let res = await fun1()
    //res就是请求数据的函数返回的值
  }

22、ES8--对象方法的拓展

示例:
const tempObj = {
  name:'米粒',
  size:'small',
  address:['哑巴湖','落魄山']
}
1、获取对象的所有键
  Object.keys(tempObj);//['name','size','address']
2、获取对象所有的值
  Object.values(tempObj);//['米粒','small',['哑巴湖','落魄山']]
3、将对象以数组的形式返回,数组的第一个值是键,第二个值是内容
  let temp = Object.entries(tempObj);//[['name','米粒'],[...],[...]]
  使用entries()方法可以方便创建一个map,例:
  const m = new Map(temp);
  {
    {'name'=>'米粒'},
    {'size'=>'small'},
    {'address'=>['哑巴湖','落魄山']}
  }
4、获取对象属性的描述对象
  Object.getOwnPropertyDescriptors(tempObj)

23、ES9--扩展运算符与rest参数

  function fun({p1,p2,...pn}){
    console.log(p1,p2,pn);//'暖树','景清',{p3:'米粒',p4:'裴钱',p5:'大白鹅'}
  }
  fun({p1:'暖树',p2:'景清',p3:'米粒',p4:'裴钱',p5:'大白鹅'})
  例2:
  const obj1 = {a:'洛阳',b:'轩辕青峰'}
  const obj2 = {a:'大秦帝',b:'轩辕敬诚'}
  console.log({...obj1,...obj2});//{a:'洛阳',b:'轩辕青峰',a:'大秦帝',b:'轩辕敬诚'}

24、ES9--正则扩展:命名捕获分组

例(原来的):

let str = '<a href = "https://www.baidu.com">百度</a>'
需求:提取URL和文本
const reg = /<a href = "(.*)">(.*)</a>/
console.log(reg.exec(str));
  返回值为一个数组,
    1、第一个值是全部的内容:'<a href = "https://www.baidu.com">百度</a>'
    2、第二个值是第一个匹配到的结果:"https://www.baidu.com"
    3、第三个值为第二个匹配到的结果:"百度"
    4、groups为 undefined

例(现在的):

let str = '<a href = "https://www.baidu.com">百度</a>'
需求:提取URL和文本
const reg = /<a href = "(?<url>.*)">(?<text>.*)</a>/
console.log(reg.exec(str));
  返回的其他的都一样,只有groups不同:
  groups:
    text:"百度",
    url:"https://www.baidu.com"

25、ES9--正则扩展:反向断言

26、ES9--正则扩展:dotAll模式

27、ES10--对象的扩展方法

Object.fromEntries()
创建一个二维数组
  const arr= [['落魄山','长命','周肥'],['绸缪山','米裕','崔嵬']];
  console.log(Object.fromEntries(arr));
    结果:{'落魄山':'长命,周肥','绸缪山':'米裕,崔嵬'}
  相当于把二维数组转化为对象
  ES8的Object.entries()把对象转化为二维数组,例:
    console.log(Object.entries({'落魄山':['周肥','长命']}))
    结果:[['落魄山',['周肥','长命']]]

28、ES10的字符串扩展方法

let str = '   红豆   '
str.trimStart()
str.trimEnd()
然后 str.trim()是清除字符转两端的空格

29、ES10--数组的扩展方法

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]]]
consolog.log(arr2.flat(2));//[1,2,3,4,5,6,7]
const arr5 =[1,[2,[3,[4,[5,[6]]]]]]
console.log(arr5.flat(5));//[1,2,3,4,5,6]
const arr = [1,2,3]
const arr1 = arr.map(item=>item*10)
console.log(arr1);//[[10],[20],[30]]
const arr2 = arr.flatMap(item=>item*10)
console.log(arr2);//[10,20,30]

30、ES10--Symbol的扩展

let temp  = Symbol('周米粒')
console.log(temp.description);//周米粒

31、ES11--私有属性

例子:

class person {
  name:'余斗';
  #age:8000;//私有属性加#
  constructor(name,age){
    this.name = name;
    this.#age = age
  }
}
let man = new person('余斗',8000)
console.log(man ); //{name:'余斗',#age:8000}
单独某个:
  console.log(man.name);//余斗
  console.log(man.#age);//报错
获取私有属性方式:
  class person {
    name:'余斗';
    #age:8000;//私有属性加#
    constructor(name,age){
      this.name = name;
      this.#age = age
    }
    intro(){
      console.log(this.#age);//8000
    }
  }

32、ES11--Promise.allSettled

  const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve('成功的返回01')
    },1500)
  })
  const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
      //resolve('成功的返回02')
      reject('失败的返回02')
    },1500)
  })
  const res = Promise.allSettled;
  结果永远是成功的,哪怕有Promise是失败的,但是总的永远是成功的。
  类似的有:
  Promise.all()
  接收一个Promise数组,返回结果根据Promise的状态决定,全部成功则为成功,有一个失败则为失败。

33、ES11-String.prototype.matchAll

  let str = `
    <ul>
      <li>
        <a>霸王别姬</a>
        <p>上映时间:不晓得</p>
      </li>
      <li>
        <a>老酒馆</a>
        <p>上映时间:不晓得</p>
      </li>
    </ul>
  `
  声明正则:
  const reg  = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
  const res = str.matchAll(reg)
  for(let v of res){
    console.log(v)
  }

34、ES11--可选链操作符

const params = {
    url:{
      baseUrl:'192.168.0.107',
      name:'locahost'
    } 
}
function fun1(params){
  const temp = params.url.baseUrl;
  console.log(temp)
}
fun1(params);//192.168.0.107
fun1();//报错

  想要不报错:
function fun1(params){
  const temp = params&&params.url&&params.url.baseUrl;
  console.log(temp)
}
fun1(params);//192.168.0.107
fun1();//undefined

//可选链操作符
function fun2(params){
  const temp = params?.url?.baseUrl;
  console.log(temp)
}
fun(params);//192.168.0.107
fun();//undefined

35、ES11--动态import

36、ES11--bigint

  let num = 66n
  console.log(num,typeof(num));//66n bigint

  整数转化为bingint类型
  console.log(BigInt(66));//66n
  小数
  console.log(BigInt(66.6));//报错

  主要运用于大数值的运算
  let max = Number.MAX_SAFE_INTEGER
  console.log(max);9007099254740991
  console.log(max+1);9007099254740992
  console.log(max+2);9007099254740992
  
  console.log(BigInt(max));9007099254740991n
  console.log(BigInt(max)+1);//报错
  console.log(BigInt(max)+BigInt(1));9007099254740992n
  console.log(BigInt(max)+BigInt(2));9007099254740993n

37、ES11--globalThis

无视环境直接使用全局对象。

记录尚硅谷视频:(https://www.bilibili.com/video/BV1uK411H7on?p=68
留个笔记记录。
上一篇下一篇

猜你喜欢

热点阅读