ES6语法

es6语法学习

Symbol的介绍与创建

介绍

• es6引入了一种新的原始数据类型Symbol，表示独一无二的值。是javascript语言的第七种数据类型，是一种类似于字符串的数据类型

特点

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

创建

//使用函数创建
let s1 = Symbol();
let s2 = Symbol('除了他');
let s3 = Symbol('除了他');
console.log(s2 === s3); //false
//使用Symbol对象for创建
let s4 = Symbol.for('123');
let s5 = Symbol.for('123');
console.log(s4 === s5) //true

给对象添加Symbol类型的属性和方法

• 情景是在不知道某个对象里面的属性和方法的时候，需要添加指定的方法，但是可能存在命名冲突问题，所以使用Symbol类型可以解决该问题

const person = {
    name: 'clt',
    age: 21,
    sayHi:function(){
        console.log('hi')
    }
}

//在不清楚person的情况下使用Symbol来进行属性或者方法的添加,需要注意的是需要使用[]来添加
person[Symbol('password')] = '123';
person[Symbol('getPassword')] = function(){
    return this.password
}

迭代器

基本介绍

• 迭代器(Iterator)是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署Iterator接口，就可以完成遍历操作
  • ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for..of使用
  • 原生具备iterator接口的数据
    • Array
    • Arguments
    • Set
    • Map
    • String
    • TypedArray
    • NodeList

工作原理

1. 创建一个指针对象，指向当前数据结构的起始位置
2. 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
3. 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
4. 每一次调用next方法都会返回一个包含值的对象

const arr = [1, 2, 4]
let s = arr[Symbol.iterator]()
console.log(s.next()) //{value:1,done:false}
console.log(s.next()) //{value:2,done:false}
console.log(s.next()) //{value:4,done:false}
console.log(s.next()) //{value:undefined,done:true}

使用迭代器遍历

• 配合for..of使用

const arr = [1, 2, 4]
//使用for..of得到的是值
for(let v of arr){
    console.log(v)
}
//使用for..in得到的是键
for(let k in arr){
    console.log(k)
}

自定义迭代器方法

const person = {
    name: 'clt',
    children: ['clt1', 'clt2', 'clt3', 'clt4'],
    //手动添加Symbol.iterator方法
    [Symbol.iterator]() {
        let index = 0
        return {
            next: () => {
                if (index < this.children.length) {
                    return { value: this.children[index++], done: false }
                } else {
                    return { value: undefined, done: true }
                }
            }
        }
    }
}
//需求使用for..of可以遍历person对象中的数组children
for(let v of person){
    console.log(v);
}

生成器

基本介绍

• 对于原来的异步编程，写法形式过于繁杂，不美观，生成器可以解决这样的问题
• 是异步编程的一种新的解决方案
• 使用next方法进行函数调用

//生成器本质上是一个特殊的函数
function* test() {
    console.log(123)
    yield '123'
    console.log(123)
    yield '23'
    console.log(123)
    yield '234'
}
//返回一个迭代器
let iterator = test()
//每一次调用next方法时候都会执行对应yield以上的方法，并返回yield值
// console.log(iterator.next())
// console.log(iterator.next())
// console.log(iterator.next())
// console.log(iterator.next())

//返回的是yield后面的内容
for (let v of iterator) {
    console.log(v)
}

参数传递

function* test() {

    let one = yield 'one'
    console.log(one)

    let two = yield 'two'
    console.log(two)
}
let iterator = test()
console.log(iterator.next())
//第二次调用next方法并传入参数将作为第一个yield的一个返回值
console.log(iterator.next('one'))
//第三次次调用next方法并传入参数将作为第二个yield的一个返回值
console.log(iterator.next('two'))

生成器函数的应用

• 解决回调地狱

//回调地狱演示案例
//需求：1s后控制台打印1，2s后打印2，3s后打印3
setTimeout(()=>{
    console.log(1)
    setTimeout(()=>{
        console.log(2)
        setTimeout(()=>{
            console.log(3)
        },3000)
    },2000)
},1000)

• 使用生成器解决

function one(){
    setTimeout(()=>{
        console.log(1)
        iterator.next()
    },1000)
}
function two(){
    setTimeout(()=>{
        console.log(2)
        iterator.next()
    },2000)
}
function three(){
    setTimeout(()=>{
        console.log(3)
        iterator.next()
    },3000)
}

function *gen(){
    yield one()
    yield two()
    yield three()
}
let iterator = gen()
iterator.next()

使用生成器模拟订单流程

//模拟订单流程
function getUser() {
    setTimeout(() => {
        let data = "用户数据"
        console.log(data)
        iterator.next(data)
    }, 1000)
}
function getOrder(user) {
    setTimeout(() => {
        let data = "订单数据"
        if (user !== undefined) {
            console.log(data)
            iterator.next(data)
        } else {
            console.log('用户数据丢失')
        }
    }, 1000)
}
function getGood(order) {
    setTimeout(() => {
        let data = "商品发货"
        if (order !== undefined) {
            console.log(data)
            iterator.next(data)
        } else {
            console.log('订单数据丢失')
        }
    }, 1000)
}
function* gen() {
    let user = yield getUser()
    let order = yield getOrder(user)
    let good = yield getGood(order)
}
let iterator = gen()
iterator.next()

Promise

Promise的介绍和基本使用

• Promise是ES6引入的异步编程的新的解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果

• Promise共有三种状态：pending（初始态），resolved（成功态）（fulfilled），rejected（失败态）

• Promise构造函数：Promise（excutor）{}

• Promise.prototype.then方法

• Promise.prototype.catch方法

const p = new Promise(function (resolve, reject) {
    setTimeout(() => {
        let data = '用户数据'
        data = null
        data ? resolve(data) : reject(data)
    }, 1000)
}).then(function (value) {
    console.log(value, '数据获取成功')
}, function (reson) {
    console.log(reson, '数据获取失败')
})
/*
1.promise构造函数接受一个函数
2.函数参数是两个函数，调用resolve表示异步执行成功，promise状态为成功，reject表示失败，promise状态为失败
3.在异步执行完成后，执行then方法，参数是两个函数
4.第一个函数异步执行成功时候执行，第二个函数异步执行失败时候执行
*/

使用Promise封装一个ajax请求

const p = new Promise(function (resolve, reject) {
    const xhr = new XMLHttpRequest()
    xhr.open('get', './data.json')
    xhr.send()
    xhr.onreadystatechange = function () {
        // 判断（服务端返回了所有的结果）
        if (xhr.readyState == 4) {
            // 判断响应码的状态码
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.responseText)
            }else{
                reject(xhr.status)
            }
        }
    }
})
p.then(function(value){
    console.log(value,'数据请求成功')
},function(reason){
    console.log(reason,'数据请求失败')
})

then方法的返回值

• 返回值是一个Promise对象

• 该Promise的状态由then方法中的回调函数决定

  • 如果函数返回非Promise相关的对象，则then的返回结果的Promise对象的状态为成功

  const p = new Promise(function(resolve,reject){
      
  })
  const result = p.then(function(value){
      //函数如果不返回值的话，默认返回undefined
  },function(reason){})
  console.log(result)//返回结果是Promise对象，状态为成功
  

  • 如果返回的是一个Promise对象，then的返回结果的状态由该Promise的状态决定

  const p = new Promise(function(resolve,reject){
      
  })
  const result = p.then(function(value){
      //返回的是一个Promise对象，则then的Promise的状态由该Promise对象决定
      retrun new Promise(function(resolve,reject){
          resolve(value)
      })
  },function(reason){})
  console.log(result)//返回结果是Promise对象，状态为成功
  

  const p = new Promise(function(resolve,reject){
      
  })
  const result = p.then(function(value){
      //返回的是一个Promise对象，则then的Promise的状态由该Promise对象决定
      retrun new Promise(function(resolve,reject){
          reject(value)
      })
  },function(reason){})
  console.log(result)//返回结果是Promise对象，状态为失败
  

使用then来进行链式编程

• 假设所有的异步请求都是成功的
• 需求是发送两个异步请求，并将结果合并为一个

const p = new Promise(function (resolve, reject) {
    //第一个异步请求
    const xhr = new XMLHttpRequest()
    xhr.open('get', './data.json')
    xhr.send()
    xhr.onreadystatechange = function () {
        // 判断（服务端返回了所有的结果）
        if (xhr.readyState == 4) {
            // 判断响应码的状态码
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.responseText)
            } else {
                reject(xhr.status)
            }
        }
    }
}).then(function (value) {
    return new Promise(function (resolve, reject) {
        //第二个异步请求
        const xhr = new XMLHttpRequest()
        xhr.open('get', './data1.json')
        xhr.send()
        xhr.onreadystatechange = function () {
            // 判断（服务端返回了所有的结果）
            if (xhr.readyState == 4) {
                // 判断响应码的状态码
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve(xhr.responseText+value)
                } else {
                    reject(xhr.status)
                }
            }
        }
    })
}).then(function(value){
    //返回的结果就是合并完成之后的结果
    console.log(value)
})

catch方法

• catch方法和then方法中的参数函数function(reason){}是一样的，只不过有了它，可以在then方法中只写一个成功的回调函数

const p = new Promise(function(resolve,reject){
	resolve('成功了')
})
.then(function(value){
    
})
.catch(function(reason){
    
})

Set

基本介绍

• es6提供了新的数据结构Set集合，它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用扩展运算符和for...of进行遍历

• Set集合中的属性和方法

  • new Set():构造函数中可以传入数组

  • size：返回集合的元素个数

  • add：添加一个新元素，返回当前集合

  • delete：删除元素，返回boolean值

  • has：检测集合中是否包含某个元素，返回boolean

  • clear：清空所有元素

//set集合会自动去重
const set = new Set(['1', '2', '3', '2'])
set.add(1)
set.delete(1)
let isHas = set.has('1')
console.log(isHas)
console.log(set.size)
set.clear()
console.log(set)

//使用for..of遍历集合
for(let v of set){
    console.log(v)
}

set集合的应用

const arr1 = [1,2,3,4,2,3]
const arr2 = [2,3,4,5,6]
//数组去重
const newarr1 = [...new Set(arr1)]
console.log(newarr1)
//数组的交集
const result = arr1.filter(item => new Set(arr2).has(item))
console.log([...new Set(result)])
//数组的差集
const result1 = arr1.filter(item => !(new Set(arr2).has(item)))
console.log([...new Set(result1)])
//数组的合并
const result3 = [new Set([...arr1,...arr2])]
console.log(result3)

Map集合

基本介绍

• 它类似于对象，也是键值对的集合，但是键的范围不限于字符串，各种类型的值（包括对象）都可以当做键。Map也实现了iterator接口，也可以使用扩展运算符和for..of来进行遍历
• Map的属性和方法
  • size：返回map集合的长度
  • set：添加元素
  • get：获取元素
  • delete: 删除指定键的元素
  • has：判断是否有某个元素
  • clear：清空所有的元素

const map = new Map()
//添加元素
map.set('name','clt')
map.set('age',21)
map.set('sayHi',function(){
    console.log('Hello,World')
})
//获取集合长度
console.log(map.size)
//删除指定键的元素
map.delete('name')
console.log(map)
//获取指定键的值
map.get('sayHi')()
//清空所有元素
// map.clear()
console.log(map)
//遍历map,结果为一个个的数组： ['age', 21]
for(let v of map){
    console.log(v)
}

class

基本介绍

• es6提供了更加接近传统语言的写法，引入了class类的概念，作为对象的模板。通过class关键字，可以定义类。基本上，es6的class可以看做只是一个语法糖，他的绝大部分功能，es5都可以做到，新的class写法只是让对象原型的写法更加清晰，更像面向对象编程的语法而已
• 知识点
  1. class声明类
  2. constructor定义构造函数初始化
  3. extends继承父类
  4. super调用父类构造方法
  5. static定义静态方法和属性
  6. 父类方法可以重写

对比使用es5和es6语法进行面向对象编程

//使用es5语法进行面向对象编程
function Phone(name, price) {
    this.name = name
    this.price = price
}
Phone.prototype.call = function () {
    console.log(this.name + '可以打电话')
}
const huawei = new Phone('华为', 1999)
huawei.call()

//使用es6语法class进行面向对象编程
class Phone {
    //类的构造函数，名称为固定的
    constructor(name, price) {
        this.name = name
        this.price = price
    }
    //方法的声明只能使用此语法，不能使用对象中的完整的语法
    call(){
        console.log(this.name + '可以打电话')
    }
}
const oppo = new Phone('Oppo','2000')
oppo.call()

静态属性和方法

function Phone(name,price){
    this.name = name
    this.price = price
}
//type和call方法都是静态属性和方法，只能通过构造函数访问，实例对象无法访问
Phone.type = '华为'
Phone.call = function(){
    console.log('华为手机可以打电话')
}

//上面的es5的写法和下面的es6写法相同
class Phone{
    constructor(name,price){
        this.name = name
        this.price = price
    }
    static type
    static call(){
        console.log('华为手机可以打电话')
    }
}

使用es6完成类的继承

//使用class完成继承
class Phone {
    constructor(name, price) {
        this.name = name
        this.price = price
    }
    call() {
        console.log('我可以打电话')
    }
}

class XiaoMi extends Phone {
    constructor(name, price, type, sing) {
        super(name, price)
        this.type = type
        this.sing = sing
    }
    other(){
        console.log('我可以干别的东西')
    }
}
let xioami1 = new XiaoMi('小米',799,'小小米','两只老虎')

console.log(xioami1)

重写父类的方法

//使用class完成继承
class Phone {
    constructor(name, price) {
        this.name = name
        this.price = price
    }
    call() {
        console.log('我可以打电话')
    }
}

class XiaoMi extends Phone {
    constructor(name, price, type, sing) {
        super(name, price)
        this.type = type
        this.sing = sing
    }
    other(){
        console.log('我可以干别的东西')
    }
    call(){
        console.log('我重写了父类的call方法')
    }
}
let xioami1 = new XiaoMi('小米',799,'小小米','两只老虎')

console.log(xioami1)
//重写了call方法后，调用call方法直接调用子类的call方法，也就是原型链
xiaomi1.call()

类的get和set方法

• get方法在获取值的时候被触发
• set方法在改变值的时候被触发
• 用于检测一个变化的值

class Person{
    get name(){
        console.log('值被获取了')
        return '12'
    }
    set name(newval){
        console.log('值被改变了',newval)
    }
}

const xiaoming = new Person()
xiaoming.name = '陈浪涛'
console.log(xiaoming)

数值增强

Number.EPSILON

• 这个是一个javascript的浮点数计算的误差范围
• 如果两个数相减的误差小于这个值，则认为这两个数相等

function equal(a, b) {
    return Math.abs((a - b)) < Number.EPSILON
}
let isequal = equal(0.1+0.2,0.3)
console.log(isequal)//结果为true

javascript的进制表示

//二进制
let b = 0b1010
//八进制
let o = 0o777
//十进制
let d = 100
//十六进制
let x = 0xff

Number.isFinite检测一个数是否无限

console.log(Number.isFinite(100))//true
console.log(Number.isFinite(100/0))//false

Number.parseInt和Number.parseFloat和Number.isInteger

console.log(Number.parseInt('21xx'))//和parseFloat一样
console.log(Number.parseFloat('2.2222xx'))//将字符串中的数字类型提取出来，为2.2222
console.log(Number.isInteger(2))//判断是否为整数

Math.trunc将小数点后面的数字直接抹掉

console.log(Math.trunc(2.2))//结果为2

Math.sign检测数字是负数，0，正数

console.log(Math.sign(100))//为正数返回1
console.log(Math.sign(0))//为0返回0
console.log(Math.sign(-100))//为负数返回-1

对象的增强

Object.is(val1,val2)

• 用于检测两个数字是否相等

Object.is(12,12)
console.log(Object.is(21,21))

Object.assign(obj1,obj2)

• 用于合并对象，存在相同的属性或者方法，obj2会覆盖obj1的

const schoolandcity = Object.assign(school,city)
console.log(schoolandcity)//{name: '九江市'}

Object.setPrototypeOf(obj1,obj2)

• 将obj1的原型对象设置为obj2

Object.setPrototypeOf(school,city)
console.log(school)

Object.getPrototypeOf(obj)

• 用于获取指定对象的对象原型

console.log(Object.getPrototypeOf(school))//获取的是school的对象原型，也就是Object的原型对象

模块化

基本介绍

• 模块化就是将一个大的程序文件，拆分为许多小的文件，然后将小文件组合起来
• 好处
  1. 防止命名冲突
  2. 代码复用
  3. 高维护性

在es6模块化规范出来之前的社区提供的模块化

• CommonJS => NodeJS,Browserify
• AMD => requireJS
• CMD => seaJS

Es6的模块化规范

• Es6的模块化功能主要由两个命令构成：export和import

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

• es6模块化开发初体验

export const school = '九江职业大学'
export function sayHi(){
    console.log('Hello,World')
}

<script type="module">
	//引入其他的模块时候，需要加上type="module"
    import * as test from '../js/test/js'
</script>

es6模块化开发中的暴露的几种方式

1. 分别暴露

   export const school = '九江职业大学'
   export function sayHi(){
       console.log('Hello,World')
   }
   

2. 集中暴露

   const school = '九江职业大学'
   function sayHi(){
       console.log('Hello,World')
   }
   export {
       school,
       sayHi
   }
   

3. 默认暴露

   const school = '九江职业大学'
   function sayHi(){
       console.log('Hello,World')
   }
   export default {
       school
       sayHi
   }
   

es6输入其他模块的功能的几种方式

1. 通用的输入方式

   import * as 别名 from '路径'
   

2. 使用解构的输入方式

   //对于分别暴露
   import {xx,xx,xx} from '路径'
   //对于集中暴露
   import {xx,xx,xx} from '路径'
   //对于默认暴露，需要注意的是，默认暴露必须有别名，使用as起别名
   import {default as test} from '路径'
   

3. 简便的输入方式(只能对于默认暴露)

   import 变量名 from '路径'
   

使用babel对es6的语法进行转换，适配更多浏览器

1. 安装工具babel-cli babel-preset-env browserify(和webpack功能一样，但是小)
2. 使用命令转换：npx babel src/js(原js) -d dist/js(转换后的js)
3. 打包：npx browserify dist/js/app.js -o dist/bundle.js
4. 最后引入bundle.js即可使用

es7新特性

Array.prototype.includes方法可以用来检测是否包含某个元素，返回布尔类型

//以前使用的是数组中的方法indexOf来判断一个数组中是否有某个元素
const arr = [1,2,3,4]
console.log(arr.includes(1))

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

console.log(2 ** 10)//计算的是2的10次方

es8新特性

async和await

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

async函数

• async函数的返回值为promise对象（区别于普通函数）
• promise对象的结果由async函数执行的返回值决定
• 返回值注意点
  1. 返回的是非promise对象就是成功态的Promise对象
  2. 返回的是Promise对象，状态由该Promise对象决定
  3. 抛出异常，返回的是失败态的Promise对象

await表达式

• await必须写在async函数中

• await右侧的表达式一般为promise对象

• await返回的是promise成功的值

  async function test() {
      let result = await new Promise(function (resolve, reject) {
          resolve('成功的数据')
      })
      console.log(result)//result的值就是 ‘成功的数据’
  }
  

• await的promise失败了，就会抛出异常，需要通过try..catch捕获处理

  const p = new Promise(function (resolve, reject) {
      resolve('成功的数据')
  })
  async function test() {
      try {
          let result = await new Promise(function (resolve, reject) {
              reject('失败的数据')
          })
          } catch (e) {
              console.log(e)
          }
  }
  

使用async和await组合简化异步请求的结果处理

function get(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('get', url)
        xhr.send()
        xhr.onreadystatechange = function () {
            // 判断（服务端返回了所有的结果）
            if (xhr.readyState == 4) {
                // 判断响应码的状态码
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve(xhr.responseText)
                } else {
                    reject(xhr.status)
                }
            }
        }
    })
}
//使用async和await组合简化代码
async function test(){
    let data = await get('./data.json')
    console.log(data)
}
test()

Object的增强

Object.values(对象)：可以获取指定对象的所有值

Object.keys(对象)：可以获取指定对象的所有属性名

Object.getOwnPropertyDescriptors(对象)：可以获取对象的描述对象

扩展运算符和rest参数

扩展运算符

• 可以将对象合并

const one = {
    name: 'one'
}
const two = {
    name: 'two'
}
const three = {
    name: 'three'
}
const all = {...one,...two,...three}

rest参数

function test({url,port,...user}){
    console.log(url)
    console.log(port)
    //user就是username和password的集合
    console.log(user)
}
test({
    url: '127.0.0.1',
    port: 3306,
    username: 'clt',
    password: 'root'
})

es9新特性

正则扩展

命名捕获分组

• 没有命名捕获分组提取字符串

//提取str字符串中的href值和文本
const str = '<a href="http:www.baidu.com">百度</a>'
const reg = /<a href="(.*)">(.*)<\/a>/
console.log(reg.exec(str))
console.log(reg.exec(str)[1])//为href的值
console.log(reg.exec(str)[2])//为文本百度
//缺点：如果后期还要在提取str中的某个值，则href和文本的获取的下标就会改变，出错

• 有命名捕获分组提取字符串

const str = '<a href="http:www.baidu.com">百度</a>'
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/
console.log(reg.exec(str))
//直接使用分组的属性名就可以解决问题
console.log(reg.exec(str).groups.url)
console.log(reg.exec(str).groups.text)

反向断言

• 提取字符串中指定位置的数字

let str = '123sss34dd'
//(?=d)表示匹配d的前面的数字
const reg = /\d+(?=d)/
console.log(reg.exec(str))

es10

对象增强方法

Object.fromEntries(集合或则数组)：将集合或者数组转换为对象

let set = new Map()
set.set('name','clt')
set.set('age',21)
//将集合或者数组转换为对象
let result = Object.fromEntries(set)
console.log(result)

//将对象转换为数组或者集合
const person = {
    name: 'clt',
    age: 21
}
let result2 = Object.entries(person)
console.log(result2)

字符串增强方法

trimEnd()和trimStart()方法

let str = '  Hello,  World!!  '
//去除字符串两侧的空格
console.log(str.trim())
//去除字符串左侧的空格
console.log(str.trimStart())
//去除字符串右侧的空格
console.log(str.trimEnd())

数组增强方法

flatMap()和flat(深度值)方法

• flat(深度值)：深度值表示降低几个维度，2表示可以将三维数组转换为一维数组
• flatMap()和map()方法差不多，但是对于改造值的返回结果为一维数组时候，可以转换为一维数组

//将多维数组转换为一维数组
const arr1 = [1,2,3,[1,2,[12,34,[123]]]]
console.log(arr1.flat(3))
//flatMap可以降一个维度
const arr2 = [[1],[2],[3]]
const result = arr2.flatMap(item => [item*10])
console.log(result)

Symbol增强属性

description属性

let s = Symbol('clt')
console.log(s.description)//值为clt

es11

私有属性

在类里面使用#修饰的变量就是私有属性

class Person {
    name
    //使用#修饰表示私有属性
    #age
    constructor(name, age) {
        this.name = name
        this.#age = age
    }
    //使用内部的方法来访问私有属性
    getAge(){
        return this.#age
    }
}
const xiaoming = new Person('xiaoming',21)
console.log(xiaoming.name)
console.log(xiaoming.getAge())

Promise增强

all和allSettled方法

• 两个方法都是接受promise对象的数组
• 返回值都是Promise对象
• 不同点
  • all方法只要promise对象数组中有一个失败就返回失败
  • allSettled方法永远返回成功，即使promise对象数组中有失败的
• 作用都是处理批量的异步任务

const p1 = new Promise((resolve, reject) => {
    resolve('数据成功')
})
const p2 = new Promise((resolve, reject) => {
    reject('数据成功')
})
//allSettled方法接受的是一个Promise对象的数组，永远返回成功，即使数组中的promise对象失败
let success = Promise.allSettled([p1, p2])
console.log(success)
//all方法不同的是，只要数组中有一个promise对象失败就返回失败
let success2 = Promise.all([p1, p2])
console.log(success2)

字符串增强

matchAll()：批量匹配

let str = `
      <ul>
        <li>username</li>  
        <li>password</li>
      </ul>
    `
let reg = /<ul>.*?<li>(.*)<\/li>.*?<li>(.*)<\/li>.*?<\/ul>/gs
for(let v of str.matchAll(reg)){
    console.log(v)
}

可选链操作符

• 解决层层判断问题
• 语法：?.

const person = {
    username: 'clt',
    age: 21,
    family: {
        father: 'cx',
        mother: 'tm'
    }
}
function getInfo(info) {
    //没有可选链操作符需要进行层层判断，确保函数不报错
    // let mother = info&&info.family&&info.family.mother
    let mother = info?.family?.mother
    console.log(mother)
}
getInfo(person)

动态import引入模块

• 语法

  import(模块路径).then(module =>{})

  • import(模块路径):返回的是一个Promise对象，成功回调中的参数就是那个模块

let button = document.createElement('button')
button.innerText = '弹出'
document.body.appendChild(button)

button.addEventListener('click',()=>{
    import('../js/test.js').then(module => {
        module.test()
    })
})

BigInt

• 大整形数据，用于js的超出最大安全数的运算
• BigInt只能和BigInt运算，否则报错
• 使用BigInt函数将普通整数转换为大整形数据

let max = Number.MAX_SAFE_INTEGER
console.log(max+1)
//当再向上加的时候就不能运算了
console.log(max+2)

//使用BigInt就可以运算
console.log(BigInt(max)+BigInt(1))
console.log(BigInt(max)+BigInt(2))

globalThis

• 全局对象，不受环境限制
• 浏览器下的globalThis指向Window对象
• nodejs环境下的global指向global

console.log(globalThis)