Js基础_ES7~ES11

系列文章目录

一、ES7

1.Array.prototype.includes

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

// includes
// 数组的indexOf方法也可以判断，如果存在返回数组下标，不纯在返回-1
let person = ['白人','黄人','黑人']
console.log(person.includes('白人'))//true
console.log(person.includes('美国人'))//false

2.指数操作符

描述：[**]用来进行幂运算，功能与Math.pow解构相同

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

二、ES8

1.async和await函数

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

具体实现请移步至：Js拓展_promise

async函数

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

await表达式

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

2.对象方法的拓展

Object.values和Object.entries

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

// 声明对象
const person = {
  name: '人',
  race: ['白人', '黄人', '黑人'],
  blood: ['O型', 'A型', 'B型', 'AB型']
}
// 获取所有的键
console.log(Object.keys(person))

// 获取所有的值
console.log(Object.values(person))

//entries 返回三个数组
console.log(Object.entries(person))
// 用Map方法处理
const m = new Map(Object.entries(person))
console.log(m.get('race'))

Object.getOwnPropertyDescriptors

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

// 声明对象
const person = {
  name: '人',
  race: ['白人', '黄人', '黑人'],
  blood: ['O型', 'A型', 'B型', 'AB型']
}

// Object.getOwnPropertyDescriptors 返回的是对象属性的描述
// 可以对对象进行一个深层次的克隆
console.log(Object.getOwnPropertyDescriptors(person))

三、ES9

1.扩展运算符

Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过ES6中只针对于数组。

在ES6中为对象提供了像数组一样的 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'
})

const person = {
  name: '人',
}
const per = {...person}
console.log(per)//{name：'人'}

2.正则扩展

命名捕获分组

普通正则获取：

// 普通正则获取
let str = '百度'
// 提取url和标签文本
const reg = /(.*)<\/a>/
// 定义结果集
const result = reg.exec(str)
console.log(result)
console.log(result[1])//http://www.baidu.com

命名捕获分组：
描述：会将捕获分组的数据存入到groups中，可以方便提取捕获数据和日后维护更加方便

// 命名捕获分组
let str = '百度'
// 提取url和标签文本
const reg = /(?.*)<\/a>/
// 定义结果集
const result = reg.exec(str)
console.log(result)
console.log(result.groups.url)//http://www.baidu.com

反向断言

// 正向断言 根据777后面的一个值找777
let str = 'JS1231发财777是我'
let num = /\d+(?=是)/
let result = num.exec(str)
console.log(result[0])//777

// 反向断言 根据777前面的一个值找777
let str1 = 'JS1231发财777是我'
let num1 = /(?<=财)\d+/
let result1 = num1.exec(str1)
console.log(result1[0])//777

dotAll模式

. 元字符：可以替换除换行符意外的任意单个字符

// dotAll模式 dot . 元字符 除换行符意外的任意单个字符
let str = `

    

        你不知道的javascript
        
出版日期:2016
    
    

        嵌入式技术基础于实践
        
出版日期:2021
    

`
//声明正则
const reg = /
\s+(.*?)<\/a>\s+
(.*?)<\/p>/;
// 元字符替换
const reg1 = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
// console.log(reg1.exec(str))
let result
let data = []
while (result = reg1.exec(str)){
  // console.log(result)
  data.push({title:result[1],time:result[2]})
}
console.log(data)

四、ES10

1.对象方法拓展

Object.fromEntries：接收一个二维数组或Map返回一个对象

// 二维数组
let result = Object.fromEntries([
  ['name','发财'],
  ['skill','study','work','dance']
])
console.log(result)//返回一个对象

// Map
let map = new Map()
map.set('name','发财')
let result1= Object.fromEntries(map)
console.log(result1)//返回一个对象

// entries 传入对象返回二维数组
let array = Object.entries({
  name:'发财'
})
console.log(array)

2.对象的拓展方法

trimStart：指定清除字符串左侧的空白字符
trimEnd：指定清除字符串右侧的空白字符

let str = '        I wish mother a happy Women\'s Day            '
console.log(str)
console.log(str.trim())
console.log(str.trimStart())
console.log(str.trimEnd())

3.数组拓展方法

flat：将多维数组转化为地位数组
flatMap：数组的所有元素都执行一遍flatMap中的方法返回一个数组

// flat 将多维数组转化为低位数组
//二维数组
let array = [[1, 2, 3, 4], [5, 6]]
console.log(array.flat())
//三维数组
let array1 = [[[1, 2, 3], [1, 2, 3], [1, 2, 3]]]
// flat中的数字为深度
console.log(array1.flat(2))

//flatMap 数组的所有元素都执行一遍flatMap方法返回一个数组
let array2 = [1, 2, 3, 4]
let result = array2.flatMap(item => [item * 10])
console.log(result)

4.Symbol.prototype.description

描述：获取Symbol的字符串描述

// 获取Symbol的字符串描述
// 创建Symbol
let s = Symbol('发财')
console.log(s.description)// 发财

五、ES11

1.私有属性

class Person {
  // 公有属性
  name
  // 私有属性
  #age
  #weight

  //构造方法
  constructor(name, age, weight) {
    this.name = name
    this.#age = age
    this.#weight = weight
  }

  main() {
    console.log(this.name)
    console.log(this.#age)
    console.log(this.#weight)
  }
}

let man = new Person('发财', '22', '140kg')
console.log(man)
console.log(man.name)
// 私有方法必须出现在类中
console.log(man.#age)//Uncaught SyntaxError: Private field '#age' must be declared in an enclosing class

man.main()// 发财 22 140kg

2.Promise.allsettled

描述：接收一个数组，返回一个promise对象

PS：返回结果永远是成功的状态，成功的值是promise的每一个对象和结果

// 接收一个数组，返回一个promise对象
// 返回结果永远是成功的状态，成功的值是promise的每一个对象和结果
let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('我是一号')
  }, 1000)
})
let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('失败了')
  }, 1000)
})

// 调用allSettled方法
let result = Promise.allSettled([p, p1])
console.log(result)

// 调用all方法
let result1 = Promise.all([p,p1])
console.log(result1)

3.String.prototype.matchAll

描述：获取正则批量匹配的结果，返回的是一个可迭代对象（可以使用for…of，也可以使用拓展运算符…）

let str = `

    

        你不知道的javascript
        
出版日期:2016
    
    

        嵌入式技术基础于实践
        
出版日期:2021
    

`
// 元字符替换
const reg1 = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
// while 循环匹配
let result
let data = []
while (result = reg1.exec(str)){
  data.push({title:result[1],time:result[2]})
}
console.log(data)

// 调用result方法 获取正则批量匹配的结果，返回的是一个可迭代对象
let result1 = str.matchAll(reg1)
console.log(...result1)

4.可选链操作符

描述：用于应对层级深度较深的对象类型参数

// ?.
function main(config) {
  let result = config && config.db && config.db.host
  // 可选链操作符
  let result1= config?.db?.host
  console.log(result)
  console.log(result1)
}

//调用函数传入对象
main({
  db: {
    host: '192.168.0.1',
    username: 'root',
  },
  cache: {
    host: '192.168.1.1',
    username: 'admin',
  },
})

5.动态import

静态import：不管需不需要，先导入
动态import：当需要了才会导入，不需要就不导入

Html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button>点我</button>
</body>
<script src="./index.js" type="module"></script>
</html>

js代码：

//静态全局导入
import * as hello from './hello.js'

const btn = document.querySelector('button')
btn.onclick = function() {
  //静态调用
  hello.hello()
  //动态导入
  import('./hello.js').then(module => {
    // console.log(module) //返回的是hello方法
    module.hello()
  })
}

需要调用的js代码：

export function hello(){
  console.log(123)
  alert('hello')
}

6.BigInt数据类型

描述：通常用于大整数的运算

//BigInt 大整形
let n = 123n
console.log(n,typeof n)// 123n bigint

// 可以吧普通的整数转化为大整数值
let m = 123
console.log(BigInt(m))//123n
console.log(BigInt(1.2))// 报错,该数不是整数

// 大数值运算
let max = Number.MAX_SAFE_INTEGER
console.log(max)//9007199254740991
console.log(max+1)//9007199254740992
console.log(max+2)//9007199254740992
// 可以发现max+1和max+2的值是一样的

console.log(BigInt(max)+BigInt(1))//9007199254740992n
console.log(BigInt(max)+BigInt(2))//9007199254740993n

7.globalThis

描述：始终指向全局对象，node当中指向node，html当中指向Window

console.log(globalThis)