CodeVortex | CodeVortex

class 类的使用

// 类
class Father {
  constructor(name) {
    console.log(name);
    
  }
}

// extends 继承父类
class Son extends Father {
  constructor(name) {
    // 调用父类的构造函数 super 
    super(`${name}的爸爸`)
    this.name = name
  }
}

new Son('lhc')

ES9 新增

正则 - 命名捕获分组

const str = '<a href="https://www.baidu.com/">百度</a>'

// 普通正则，提取url和其中的标签文本
const reg = /<a href="(.*)">(.*)<\/a>/  // (.*)的部分就是提取处

// 正则命名分组，
const reg2 = /<a href="(?<url>.*)">(?<text>.*)<\/a>/   // (?<{{name}}>.*)  {{name}}处起别名

// exec 方法是用来执行正则表达式的
const result = reg2.exec(str)

// console.log(result)
// [
//   '<a href="https://www.baidu.com/">百度</a>',
//   'https://www.baidu.com/',
//   '百度',
//   index: 0,
//   input: '<a href="https://www.baidu.com/">百度</a>',
//   groups: undefined
// ]

console.log(result.groups)
// { url: 'https://www.baidu.com/', text: '百度' }

正则 - 断言

const str = '你好12321321我是文字999000结束了'

// 提取出其中的数字 999000
// 正向断言
const reg = /\d+(?=结)/
const result = reg.exec(str)
console.log(result);
// [
//   '999000',
//   index: 14,
//   input: '你好12321321我是文字999000结束了',
//   groups: undefined
// ]

const reg2 = /(?<=字)\d+/
const result2 = reg2.exec(str)
console.log(result2);

正则 - dotAll模式

// dot . 元字符，除换行符以外的任意单个字符
let str = `
<ul>
  <li>
    <div>姓名</div>
    <p>sky</p>
  </li>
  <li>
    <div>性别</div>
    <p>男</p>
  </li>
</ul>`

// 需求，取出其中ul内每个li内div标签和p标签中的内容
// 普通正则，规定其中一个li标签
const reg1 = /<li>\s+<div>(.*?)<\/div>\s+<p>(.*?)<\/p>/;
// 执行
const result = reg1.exec(str)
console.log(result[1]) // '姓名'
console.log(result[2]) // 'sky'


// dotAll模式，末尾加s，「.」可以匹配任意字符，全局匹配再加g
const reg = /<li>.*?<div>(.*?)<\/div>.*?<p>(.*?)<\/p>/gs
let result2 = []
const data = []
while(result2 = reg.exec(str)) {
  console.log(result2);  // 依次打印输出2组数据
  data.push({ type: result2[1], value: result2[2]})
}
console.log(data)
// [{type: '姓名', value: 'sky'}, {type: '性别', value: '男'}]

ES10

Object.fromEntries

可以将二维数组或Map转为对象

// Object.entries 他俩相反
const result = Object.fromEntries([
  ['foo', 'bar'],
  ['baz', 42],
])
console.log(result)

// 转换 Map
const map = new Map()
map.set('foo', 'bar')
map.set('baz', 42)
const result2 = Object.fromEntries(map)
console.log(result2)

trimStart和trimEnd

去除字符串前面或后面的空格

const str = '  hello  '
console.log(str) // '    字符串   '

// ES5中字符串的方法trim
console.log(str.trim()) // '字符串'

// trimStart
console.log(str.trimStart()) // '字符串   '

// trimEnd
console.log(str.trimEnd()) // '    字符串'

flat(多维转低维)

// flat 将多维数组转化为低维数组
const arr = [1, 2, 3, 4, [5, 6]]
const arr2 = [1, 2, 3, 4, [5, 6, [7, 8, 9]]]

console.log(arr.flat()) // [ 1, 2, 3, 4, 5, 6 ]

// 可传入参数，参数为深度，默认值为1
console.log(arr2.flat(1)) // [1, 2, 3, 4, 5, 6, [7, 8, 9]]
console.log(arr2.flat(2)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr2.flat(Infinity))  // 多少层级都可以转化成低维数组

flatMap

（map函数功能 + 转换低维数组） 拥有map函数的功能，但可以将返回结果转化为低维数组（深度只有1）

// 这个方法不实用，开发时最好自己处理
const arr = [1, 2, [3, 4], [5, 6]]
const result = arr.map(item => [item * 10])
const result2 = arr.flatMap(item => [item * 10])

console.log(result) // [[10], [20], [30], [40]]
console.log(result2) // [10, 20, 30, 40]

Symbol

// Symbol.prototype.description（获取Symbol的描述对象）
// 创建Symbol，'sky'为此Symbol的描述对象
let s = Symbol('sky')
const a = Symbol([1, 2, 3, 4, 'lhc'])

// 使用description获取描述对象
console.log(s.description) // 'sky'
console.log(typeof a.description === 'string'); // true

ES11

类的私有属性

class Person {
  // 公有属性
  name
  // 私有属性 + #
  #age
  #weight
  // 构造函数
  constructor(name, age, weight) {
    this.name = name
    this.#age = age
    this.#weight = weight
  }
  fn() {
    console.log(this.name, this.#age, this.#weight)
  }
}

const boy = new Person('张三', 18, 60)
console.log(boy)  //  { name: '张三' }
// console.log(boy.#age)   // 报错，不能通过类外部的方法获取这个属性

// 执行类Person内部的fn函数，可以正常输出
boy.fn()
// 张三 18 60

Promise.allSettled

执行allSettled方法需要传入一个数组作为参数，数组内每个元素需要为Promise对象

allSettled方法执行后返回一个Promise对象，结果有两个值：

返回状态，此状态不受数组中promise对象的状态影响
返回值，一个包含方法中所有promise对象执行结果及返回值的数组

// 声明两个Promise对象
const p1 = new Promise((resolve, reject)=>{
  setTimeout(()=>{
  	resolve('数据1')
  },1000)
})

const p2 = new Promise((resolve, reject)=>{
  setTimeout(()=>{
    reject('失败了')
  },1000)
})

// 即使有失败的 Promise 也继续执行不会中断
Promise.allSettled([p1, p2]).then(res => {
  console.log(res)
  // [
  //   { status: 'fulfilled', value: '数据1' },
  //   { status: 'rejected', reason: '失败了' }
  // ]
})

String.prototype.matchAll

正则批量匹配

// 声明一个字符串
let str = `
<ul>
  <li>
    <div>姓名</div>
    <p>sky</p>
  </li>
  <li>
    <div>性别</div>
    <p>男</p>
  </li>
</ul>`

// 声明正则
const reg = /<li>.*?<div>(.*?)<\/div>.*?<p>(.*?)<\/p>/gs

const result = str.matchAll(reg)
// console.log(result)

// 方法一：result是个可迭代对象，其中有next方法，因此此处可以使用for...of循环
const data = []
for (const item of result) {
  data.push({type: item[1], value: item[2]})
}
console.log(data)  // [ { type: '姓名', value: 'sky' }, { type: '性别', value: '男' } ]

// 方法二：result是个数组，因此此处可以扩展运算符 ...
const data2 = [...result]
console.log(data2)

可选链操作符 ?.

function fn(goods){
  // 普通做法，设置商品标题，一层一层判断是否传入
  const goodsTitle = goods && goods.mainInfo && goods.mainInfo.title
  console.log(goodsTitle) // 只要有一层没传入，则报错

  // 可选链操作符
  const goodsTitle2 = goods.mainInfo?.title
  console.log(goodsTitle2) // 如果最后的title未传入，则为undefined，不会报错
}

fn({
  info: {
  	title: '标题',
  	type: '类型'
  }
})

动态 import 加载

需求：点击按钮，alert 内容 'hello'

html

<!-- index.html -->
<button id="btn">按钮</button>
<script src="./js/app.js" type="module"></script>

// hello.js 文件
export function hello(){
  alert('hello')
}

// app.js
// 传统导入方式，无论用不用，都先导入
// import * as j1 from "./hello.js"
const btn = document.getElementById('btn')

btn.onClick = function(){
  // 传统导入方式的使用方式
  // j1.hello()
  
  // 动态import加载，import函数
  // 该函数执行结果是一个promise对象
  import('./hello.js').then(res=>{
    console.log(res) // res里面包含所有hello.js内暴露的对象
    res.hello()
  })
}

BigInt 大整数

新的数据类型-BigInt 大整数（用于更大的数值运算）

// 大整数
let n = 111n
console.log(n, typeof n);  // 111n bigint

// 函数
let m = 123
console.log(BigInt(m)) // 123n
// console.log(BigInt(1.1))  // 报错，BigInt不能用于浮点数

// 更大的数值运算
let max = Number.MAX_SAFE_INTEGER  // js 内最大的安全整数
console.log(max)  // 9007199254740991
console.log(max + 1) // 9007199254740992
console.log(max + 2) // 9007199254740992

// 可以看出，正常运算方式已经无法再往上计算
// 这边可以使用BigInt来进行计算
console.log(BigInt(max)) // 9007199254740991n
console.log(BigInt(max) + BigInt(1))  // 9007199254740992n
console.log(BigInt(max) + BigInt(2))  // 9007199254740993n
console.log(BigInt(max).toString())   // '9007199254740991'

class 类的使用 ​

ES9 新增 ​

正则 - 命名捕获分组 ​

正则 - 断言 ​

正则 - dotAll模式 ​

ES10 ​

Object.fromEntries ​

trimStart和trimEnd ​

flat(多维转低维) ​

flatMap ​

Symbol ​

ES11 ​

类的私有属性 ​

Promise.allSettled ​

String.prototype.matchAll ​

可选链操作符 ?. ​

动态 import 加载 ​

BigInt 大整数 ​

class 类的使用

ES9 新增

正则 - 命名捕获分组

正则 - 断言

正则 - dotAll模式

ES10

Object.fromEntries

trimStart和trimEnd

flat(多维转低维)

flatMap

Symbol

ES11

类的私有属性

Promise.allSettled

String.prototype.matchAll

可选链操作符 ?.

动态 import 加载

BigInt 大整数