ES6-ES11语法学习

一、ES6新特性

1.let

不可重复声明
自带块级作用域，块级外访问不到块级内的
不存在变量提升
不影响作用域链

2.const

常量：值不能修改的量
一定要赋初始值
一般常量使用大写（潜规则）
常量的值不能修改
自带块级作用域
对于数组和对象的元素的修改，不算对常量的修改，不会报错（地址不变）

3.解构赋值

3.1数组的解构

const  F4 = ['小沈阳','刘能','赵四','宋小宝']
let [xiao,liu,zhao,song] = F4

3.2对象的解构

const zhao = {
      name:'赵本山',
      age:'不详',
      xiaopin:function(){
          console.log('我可以演小品')
       }
};
let {name,age,xiaopin} = zhao
let {xiaopin} = zhao

4.模板字符串 两个`

内容中可以直接出现换行符

let str = `<ul>
                  <li>沈腾</li>
                  <li>玛丽</li>
                  <li>魏翔</li>
                  <li>艾伦</li>
            </ul>`;

变量拼接

let lovest = '魏翔'
let out = `${lovest}是我心中最搞笑的演员！`
//输出 魏翔是我心中最搞笑的演员

5.简化对象写法

let name = '学前端'
let change = function(){
       console.log('可以改变你的人生')
    }
const school = {
        name,//名字一样可以直接简写成这样
        change,
        improve(){
        }//方法也进行简写了
  }

6.箭头函数 =>

原函数：
let fn = function(){}
箭头函数：
let fn = ()=>{}

声明的区别:
箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值

不能作为构造函数去实例化对象
不能使用arguments变量

简写：
6.1省略()，当形参有且只有一个的时候
6.2.省略{}，当代码体只有一条语句的时候

箭头函数的使用情况：
适合于this无关的回调，如定时器、数组的方法的回调；不适合和与this有关的问题，如事件回调，对象的方法

7.函数参数的初始赋值

7.1形参初始值 具有默认值的参数，一般位置比较靠后

function add(a,b,c = 10){
          return a+b+c
   }
let result = add(1,2) 
//输出为13

7.2可以与解构赋值结合使用

function connect({host,username,password,port}){
//可以直接输出对应的字段名
}
connect({
     host:'localhost',
     username:'root',
     password:'root',
     port:3306
})
     

8.rest参数

function date(...args){
     console.log(args)
}
date('阿娇‘’,'白芷','四惠')
//可直接输出

注意：必须要放在最后

9.扩展运算符 …

能将数组转化为逗号分割的参数序列

const tfboys = ['易烊千玺','王源','王俊凯']
function chunwan(){
}
chunwan(...tfboys)

10.symbol

值是唯一的，用来解决命名冲突的问题
不能与其他数据进行运算
定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

11.迭代器iterator

for of 键名
for in 键值

实现自定义的遍历数组：

const classBJ = {
   name:'终极一班',
   stus:[
         'xiaoming',
         'xiaoning',
         'xiaotian',
         'knight'
   ],
   [Symbol.iterator](){
         let index = 0;
         //声明一个变量保存
         let _this = this
         return {
                 next:function(){
                 if(inde<_this.stus.length){
                         const result = {value:_this.stus[index],done:false}
                         index++;      
                         return result;           
                      }else{
                         return{value:undefined,done:true}
                      }
                }
         }
   }
      for(let v of classBJ){
           console.log(v)
      }
   
}

12.生成器函数(特殊函数，异步编程纯回调函数)

function * gen(){
//yield是代码的分割符
      yield '一只没有耳朵';
      yield '一只没有尾巴';
      yield '真奇怪'
    }
      let iterator = gen()
      iterator.next()//调用一次，往下执行一段
      iterator.next(‘ADC’)//会根据传参进行执行，覆盖之前的

13.promise

是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

const p = new Promise(function(resolve,reject){
        setTimeout(function(){
             let data = '数据库中的用户数据';
             resolve(data)
             let err = '数据读取失败';
             reject(err);
        },1000);
});
  p.then(function(value){
         console.log(value);
    },function(reason){
         console.error(reason)
    })

13.1 then:可以链式调用(解决回调地狱)

p.then(value=>{},reason=>{}).then(value=>{},reason=>{})

promise对象
可以抛出错误
13.2 catch

p.catch(function(reason){
     console.warn(reason)
})

14.set

自动去重

let s = new Set()

个数：size
增加：add(元素)
删除：delete(元素)
判断是否有：has(元素)
清空：clear()

15.map

let m = new Map()

添加：set(key,value)
个数：size
删除：delete(key)
获取：get(key)
清空：clear()
遍历：for(let v of m){}

16.class

calss Phone{
   constructor(brand,price){
      this.brand = brand
      this.price = price
   }
   call(){
     console.log("我可以打电话")
   }
}
let onePlus = new ("1+",1999)
//输出类onePlus

get 和set

class Phone{
    get price(){
         console.log("价格属性被读取了")
         return 'i love you'
    }
    set price(newVal){
         console.log("价格属性被修改了")
    }
}
let s = new Phone();
s.price = 'free'

17.extend继承

calss 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)
              this.color = color
              this.size = size
          }
         photo(){
              console.log('拍照')
         }
         playGame(){
             console.log('玩游戏')
         }
 }
 const xiaomi = new SmartPhone('小米'，799,'黑色','4.7inch')
 //输出小米，所有的属性和方法都有

若出现重写，遵循子类修改后的数据一致

18.数值扩展

18.1 EPSILON表示最小精度

Math.abs(a-b)<Number.EPSILION

成立就是默认a==b

isFinite 判断一个数值是否为有限数
isNaN 检测一个数值是否为NaN
parseInt和parseFloat字符串转整数
isInterger 判断一个数是否为整数
trunc 将数字的小数部分抹掉
sign 判断一个数是正数、负数还是0（-1,0，1）
Object.is 判断两个值是否完全相等(但是NaN相等)
Object.assign 对象的合并（属性相同的话，后面会把前面的覆盖）
Object.setPrototypeof 设置原型对象
Object.getPrototypeof 获取原型对象

19.模块化

export用于规定模块的对外接口
import用于输入其他模块提供的功能

二、ES7新特性

1.includes

判断数组是否存在这个元素 arr.includes(元素)

2.**幂运算

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

三、ES8新特性

async和await让异步代码像同步代码一样

1.async

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

返回的结果：
不是一个promise对象：成功的promise对象
抛出错误：失败的promise
是一个promise对象：决定函数返回的是什么，返回失败就是失败，成功就是成功

2.await

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

结合发送ajax请求

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);
               }
          }
      }
   } 
}
//重点！
async function main(){
    let result = await sendAJAX("接口地址")
}

Object.values和Object.entries

3.Object.values

返回一个给定对象的所有可枚举属性值的数组
//获取对象的所有的键

Object.keys()

4.Object.entries

返回一个给定对象自身可遍历属性[key,value]的数组
方便创建一个map

const m = new Map(Object.entries(obj))

//对象属性的描述对象

Object.getOwnPropertyDescriptors(obj)

四、ES9的新特性

1.为对象提供了像数组一样的rest参数和扩展运算符

function connect({host,port,..user}){
   //除了host和port，后面所有的属性都存在了user里
}
connect({
      host:'127.0.0.1',
      port:3306,
      username:'root',
      password:'root',
      type:'master'
})

2.正则命名捕获分组

let str = '<a herf = "http://www.atguigu.com">尚硅谷</a>';
const reg = /<a herf = "(?<url>.*)">(?<text>.*)<\/a>/;
const result = reg.exec(str)
console.log(result)
//可通过result.group.url和result.group.text去获取对应的url和内容

3.dotAll模式

在后面加了s之后，.可以匹配任意字符，换行也可以匹配

let str = `
<ul>
      <li>
            <a>肖申克的救赎</a>
            <p>上映时间：1994-09-10</p>
      </li>
      <li>
             <a>阿甘正传</a>
             <p>上映时间：1994-07-06</p>
      </li>
<ul>`;
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/s;
const result = reg.exec(str);

五、ES10的新特性

1.Object.formEntries

接收二维数组或者map，将其转化为对象

const result = Object.formEntries([
         ['name','尚硅谷'],
         ['xueke','Java,大数据，前端，云计算']
]);

const m = new Map();
m.set('name','ATGUIGU');
const result = Object.formEntries(m)

2.trimStart与trimEnd

清除左侧空格和右侧空格

3.flat与flatMap

flat(n)：将高维数组转化为低维数组，n代表深度
flatMap：map返回的结果为多维数组，可以使用它给多维数组降维

4.Symbol.prototype.description

通过这个方法可以拿到symbol里面的属性

let s = Symbol('hhh')
console.log(s.description)//输出hhh

六、ES11的新特性

1.私有属性

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，‘50kg’)
//直接输出私有属性就会报错，可以通过内部方法去调用

2.Promise.allSettled

返回的结果始终是成功的，成功的值是每一个promise执行的结果和状态
而promise.all是根据每个promise的结果来决定是否成功，要全成功才能算成功，没有成功的话值就是那个出错的promise的失败的值；成功了的话值就是成功的promise数组

3.String.prototype.matchAll

返回的结果是一个可迭代对象，用于数据的批量读取

let str = `
<ul>
      <li>
            <a>肖申克的救赎</a>
            <p>上映时间：1994-09-10</p>
      </li>
      <li>
             <a>阿甘正传</a>
             <p>上映时间：1994-07-06</p>
      </li>
<ul>`;
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg;
const result = str.matchAll(reg)

4.可选链操作符（?.）

类似于短路判断，如果有就执行后面的，免去了层层判断的烦恼

function main(config){
//以前 const dbHost = config && config.db && config.db.host
 const dbHost = config?.db?.host
}
main({
    db:{
        host:'192.168.1.100',
        username:'root'
    }
})
//万一没有，不会报错

5.动态import

静态导入：
import * as 方法名 from “路径”

动态：

import('路径').then(module=>{
    module.hello();
})

6.BigInt

在数字后面加 n
转为大数 ： BigInt(n)

大数运算

let max = Number.MAX_SAFE_INTEGER
//普通相加加到1就不能加了
BigInt(max)+2n可以

7.globalThis

始终指向全局对象