ES7 新特新

Array.prototype.includes

includes 方法用于检测数组中是是否包含某一个元素，返回布尔类型值。类似于typeof 但是返回值是数字，因此引入includes ，对判断更加方便

指数操作符

在 ES7 中引入指数运算符 【**】，用来实现幂运算，功能与 Math.pow 相同

console.log(2 ** 10) //logs 1024 ，2的10次方

console.log(Math.pow(2,10))

ES8 新特新

ES8 引入了 async await 两种语法，结合可以让异步代码像同步代码一样

async 函数

  1. async 函数返回值为 promise 对象
  2. promise 对象的结果由 async 函数执行的返回值决定
1
2
3
4
5
6
7
8
9
10
11
12
//声明 async 函数
async function fn(){
  //返回的结果不是一个 Promise 类型的对象，返回结果就是成功 Promise 对象
  return 'SimpleLife'
  
  throw new Error('错误') //抛出异常，返回结果是失败的 Promise
  
  // 返回结果是 Promise对象，由该对象决定返回的成功 还是失败
  return new Promise((resolve,reject)=>{
    resolve('成功数据') //fn返回就是成功的promise ，且值就是 resolve 传的值
  })
}

await 表达式

  1. await 必须写在 async 函数中
  2. await 右侧的表达式一般为 promise 对象
  3. await 返回的是 promise 成功的值
  4. await 的 promise 失败了，就会抛出异常，需要通过 try … catch 捕获异常
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 创建 Promise 对象
const p = new Promise((resolve,reject)=>{
  //resolve('成功的数据')
  reject('失败了')
})

// await 要放在 async 函数中
async function fn(){
  // 使用 try...catch 捕获成功和异常
  try{
		let result = await p;// await 后面是接收 Promise 对象成功的值
    console.log(result) // 如果 Promise 成功了 打印成功的数据
  } catch(e){
    console.log(e) // 如果 Promise 失败，打印异常
  }
}

fn(); // 调用函数

对象方法的扩展

Object.values

1
2
3
4
5
6
7
8
9
const simplelife(){
  name: 'simplelife',
  age: 18,
  height: '1.88'
}
// 获取对象所有的键
let keysname = Object.keys(simplelife)
// 获取对象所有的值
let values = Object.values(simplelife)

Object.entries

返回结果是一个数组，每一个成员也是数组。数组第一个是键名，第二个是值

Object.getOwnPropertyDescriptors

返回结果是对象属性的描述对象

1
2
3
4
5
6
7
8
9
10
11
// 描述对象
const obj = Object.create(null,{
	name:{
    // 设置值
    value: 'SimpleLife',
    // 属性特性
    writable: true,
    configurable: true,
    enumberable: true
  }
})

ES9 新特新

rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和 spread 扩展运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function connect({host,port,username,password}){
  console.log(host)
  console.log(port)
  console.log(username)
  console.log(password)
}
connect({
  host: '127.0.0.1',
  port: 3306,
  username: 'root',
  password: 'root'
})

// 使用 rest 参数
function connect({host,port,...user}){
  console.log(host)
  console.log(port)
  console.log(user)
}
// 除了 host port 其它值都存入 user，user是一个
1
2
3
4
5
6
7
8
9
10
11
12
// 使用扩展运算符 对对象进行合并
const one = {
  one: 'oneoneone'
}
const two = {
  two: 'twotwotwo'
}
// ...one 的结果是去掉了花括号 =》 one: 'oneoneone'
// 对one two对象进行合并到three对象
const three = {
  ...one,...two
}

正则扩展：命名捕获分组

1
2
3
4
5
6
7
8
9
10
11
12
// 声明一个字符串
let blogurl = '<a href="http://www.noti.top">SimpleLife</a>'

// 提取 URL 与 标签文本
const reg = /<a href="(.*)">(.*)<\/a>/

// 执行
const result = reg.exec(blogurl)

//通过result索引获取相应的值，[0]获取字符串全部内容，[1]获取第一处捕获，[2]获取第二处捕获
console.log(result[1])
console.log(result[2])

1
2
3
4
// 对获取进行命名分组
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/

// 结果不同是 之前groups 值是undefined。现在是包含一个url 和text的值

正则扩展：反向断言

1
2
3
4
5
6
7
8
// 正向断言，通过后面来确认前面是否合法
let str = 'JS5211314你知道么555啦啦啦'
const reg = /\d+(?=啦啦啦)/
const result = reg.exec(str)
console.log(result)

// 反向断言
const reg = /(?<=么)\d+/

正则扩展：dotAll 模式

通过 .* 能够匹配任意字符，.*? 只匹配一次

1
2
3
4
5
6
7
8
9
10
// /s 匹配结果只有一条
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/s;

// /gs 全局匹配
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg;

// 通过while循环，可以将匹配结果存入数组
while(result = reg.exec(str)){
  // ...
}

正则扩展：.* 和 .*? 的区别

表达式 .* 就是单个字符匹配任意次，即贪婪匹配。

表达式 .*? 是满足条件的情况只匹配一次，即最小匹配.

ES10 新特新

Object.fromEntries

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 二维数组
const result = Object.fromEntries([
  ['name','simplelife'],
  ['blog','JS,HTML,CSS']
])

console.log(result);// 结果是对象，将二维数组转换成了对象，键值对的方式

// Map
const m = new Map()
m.set('name','Simplelife')
const result2 = Object.fromEntries(m)
console.log(result2)

// ES8 Object.entries
const arr = Object.entries({
	name: 'Simple'
})
console.log(arr) //结果是二维数组

trimStart 与 trimEnd：指定清除左侧和右侧的空白

1
2
3
let str = '   simplelife   '
console.log(str.trimStart()) //logs 'simplelife   '左侧空白被清楚
console.log(str.trimEnd()) //logs '   simplelife' 右侧空白被清楚

数组扩展

flat

1
2
3
4
5
6
7
8
9
// 将多维数组转化为低维数组，默认深度1
const arr = [1,2,3,[5,6]]
console.log(arr.flat()) //logs [1,2,3,4,5,6]

const arr = [1,2,3,[5,6,[7,8,9]]]
console.log(arr.flat()) //logs [1,2,3,4,5,6,[7,8,9]]

const arr = [1,2,3,[5,6,[7,8,9]]]
console.log(arr.flat(2)) //logs [1,2,3,4,5,6,7,8,9] //falt传入值2 深度为2

flatMap

1
2
3
4
const arr = [1,2,3,4]
const result = arr.map(item => [item*10]) // result 的成员是数组，使用flatMap 直接降维

const result = arr.flatMap(item => [item*10])

Symbol 扩展

Symbol.prototype.description

1
2
3
// 创建 Symbol
let s = Symbol('SimpleLife')
console.log(s.description) // 获取symbol值

ES11 新特性

私有属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Person{
  // 公有属性
  name;
  // 私有属性
  #age;
  #weight;
  
  // 构造方法
  constructor(name,age,weight){
		this.name = name
    this.#age = age
    this.#weight = weight
  }
}

// 实例化
const girl = new Person('xiaohong',18,'45kg')

// 无法获取私有属性，只能在类内部获取
console.log(girl.#age) // 报错
console.log(girl.#weight)

Promise.allSettled

1
2
3
4
5
6
7
8
9
10
// 伪代码写两个 Promise对象
const p1 = new Promise(()={})

const p2 = new Promise(()={})

// 调用 allSettled 方法
const result = Promise.allSettled([p1,p2]) // result结果一直成功了，会记录p1 p2的状态，且把它们的值保存
                                           //在一个数组里面
// 调用 all 方法
const res = Promise.all([p1,p2]) // 当Promise对象存在一个返回错误，那么res就是错误的

可选链操作符：?.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function main(config){
  //const dbHost = config.db.host // 这样直接获取可能报错，因此没用判断是否传入
  
  const dbHost = config?.db?.host //如果有config 读取db，如果有db 读取 host
  
  console.log(dbHost) // 如果没有传入值，那么dbHost 就是 undefined值
}
main({
  db:{
    host: '192.168.1.100',
    username: 'root'
  },
  cache:{
    host: '192.168.1.200',
    username: 'admin'
  }
})

动态加载 import

1
2
3
4
5
6
7
8
const btn = document.getElementById('btn')

btn.onclick = function(){
  // 动态使用hello.js，懒加载的方式
	import('./hello.js').then(module =>{
    module.hello()
  })
}

新数据类型 BigInt

1
2
3
4
5
6
7
// 大整形
let n = 521n //在普通整形后面加 n
console.log(n,typeof(n)) //logs 521n 'bigint'

// 函数
let n = 123
console.log(BigInt(n)) // 将普通整形转化成大整形

应用

1
2
3
4
5
6
7
8
9
10
11
// 大数值运算
let max = Number.MAX_SAFE_INTEGER
console.log(max)
console.log(max+1)
console.log(max+2) // 无法再继续加，达到最大值

// 使用 BigInt 去转化
console.log(BigInt(max))
console.log(BigInt(max) + BigIng(1))
console.log(BigInt(max) + BigIng(2)) // 相加的数值类型也必须是 bigint
// 现在相加，就可以正常显示值了

globalThis 始终指向全局 this