休养了一年, 去年的ES15新特性我今年再来看看,晚吗?

91 阅读3分钟

Object.groupBy()

object.groupBy()函数返回一个无原型的对象,该对象的每个属性都是一个组。

语法
Object.groupBy(items, callbackFn)
// items:一个可迭代对象(如数组),包含你想要分组的元素。
// callbackFn:一个回调函数,对每个元素执行。这个函数应该返回一个可以转换为属性键(字符串或符号)的值,指示当前元素所属的组。
使用
const groupBy = () => {
    const products = [
        { name: 'Product A', price: 10, inStock: true },
        { name: 'Product B', price: 20, inStock: false },
        { name: 'Product C', price: 15, inStock: true },
        { name: 'Product D', price: 25, inStock: false },
        { name: 'Product E', price: 18, inStock: true },
    ]
    return Object.groupBy(products, ({ price }) => price)
}
 console.log(groupBy()) // {10: Array(1), 15: Array(1), 18: Array(1), 20: Array(1), 25: Array(1)}
注意
  1. Object.groupBy 使用时,传递给它的回调函数应该返回一个字符串或 Symbol 类型的值。如果回调函数返回其他类型的值,它将被强制转换为字符串
console.log(Object.keys(groupBy()))  // ['10', '15', '18', '20', '25']
  1. 由于返回的是无原型的对象这样会导致在分组后无法使用对象的一些方法如:hasOwnProperty 或 toString
 console.log(groupBy().hasOwnProperty('10')) //TypeError: groupBy(...).hasOwnProperty is not a function
兼容性

高版本浏览器支持。某些浏览器低版本中认为此方法被实现为Array.prototype.groupBy()方法 不是作为Object的静态方法 ,当遇到兼容性问题 可使用 lodashde groupBy函数

Promise.withResolvers

Promise.withResolvers() 允许创建一个新的 Promise,并同时获得 resolve 和 reject 函数。可以更加灵活的管理promise状态,减少了变量申明增强代码可读性。

使用

const withPromiseUseage = () => {
    const { promise, resolve, reject } = Promise.withResolvers()
    // 模拟异步
    setTimeout(() => {
        resolve('Success')
    })
    promise.then((res) => {
        console.log(res)
    })
}
withPromiseUseage() // // 输出:'Success'

模拟异步任务
const asyncTask = () => {
    const task1 = Promise.withResolvers()
    const task2 = Promise.withResolvers()
    // 模拟异步任务
    setTimeout(() => task1.resolve('Task 1 Complete'), 1000)
    setTimeout(() => task2.reject('Task 2 Failed'), 2000)
    Promise.allSettled([task1.promise, task2.promise]).then((results) =>
        console.log(results)
    ) // 输出:[  { status: "fulfilled", value: "Task 1 Complete" },  { status: "rejected", reason: "Task 2 Failed" }]
}

Atomics.waitAsync()

Atomics.waitAsync()静态方法异步等待共享内存的特定位置并返回一个Promise。与Atomics.wait()不同,waitAsync是非阻塞的且可用于主线程。此操作仅适用于基于 SharedArrayBuffe 的Int32Array或BigInt64Array视图


Atomics.waitAsync(typedArray, index, value)
Atomics.waitAsync(typedArray, index, value, timeout)

//typedArray
基于 SharedArrayBuffe 的Int32ArrayBigInt64Array
//index 
typedArray 中要等待的位置
//value 
期望值
//timeout
等待时间,以毫秒为单位。NaN(以及会被转换为NaA的值)会被转为Infinity .负数会被转换为0


返回值
一个Object包含以下属性:
1.async 一个布尔值,表示value属性是否为Promise
2. value  如果asyncfalse ,value的值为'not-equal''timed-out' d、的字符串。如果async的值为true 它将是一个Promise其兑现值为'ok'或者'timed-out'的字符串这个promise永远不会被拒绝。
   

Atomics.waitAsync()操作仅适用于基于SharedArrayBuffer的 Int32Array或 BigInt64Array 视图

ArrayBuffer.prototype.resize 和 ArrayBuffer.prototype.transfer

这2个特性针对Buffer做了性能升级。Buffer是用于存储应用程序生成的临时数据的微型数据存储区。它们使在pipeline的各个阶段传输和处理数据变得异常简单。

  • ArrayBuffer 实例的 resize() 方法将 ArrayBuffer 调整为指定的大小,以字节为单位,前提是该 ArrayBuffer 是可调整大小的并且新的大小小于或等于该 ArrayBuffer 的 maxByteLength。
  • transfer() 方法执行与结构化克隆算法相同的操作。它将当前 ArrayBuffer 的字节复制到一个新的 ArrayBuffer 对象中,然后分离当前 ArrayBuffer 对象,保留了当前 ArrayBuffer 的大小可调整性。

String.prototype.isWellFormed() 和 String.prototype.toWellFormed()

  • isWellFormed() 让你能够测试一个字符串是否是格式正确的(即不包含单独代理项)
  • toWellFormed() 方法返回一个字符串,其中该字符串的所有单独代理项都被替换为 Unicode 替换字符 U+FFFD