前言

随着 Web 技术的日新月异，JavaScript 也在不断地吸收新的特性和技术，以满足日益复杂和多样化的开发需求。在 2024 年，JavaScript 迎来了一系列令人瞩目的新功能，这些功能不仅提升了开发者的效率，也极大地丰富了 Web 应用的表现力和交互性。

在接下来的内容中，我们将逐一介绍这些新功能，并探讨它们如何在实际开发中发挥作用，以及它们如何继续引领前端开发的未来。

Object.groupBy

它是一个新的 JavaScript 方法，它可以根据提供的回调函数返回的字符串值对给定可迭代对象中的元素进行分组。返回的对象具有每个组的单独属性，其中包含组中的元素的数组。

当我们想要根据数组中对象的一个或多个属性的名称对数组元素进行分类时，此方法非常有用。

语法

Object.groupBy(items, callbackFn)

参数

  • items
    ：一个将进行元素分组的可迭代对象
  • callbackFn
    ：对可迭代对象中的每个元素执行的函数。它应该返回一个值，可以被强制转换成属性键（字符串或
    symbol
    ），用于指示当前元素所属的分组。该函数被调用时将传入以下参数：
    • element：数组中当前正在处理的元素
    • index：正在处理的元素在数组中的索引

返回值

一个带有所有分组属性的
null
原型对象
，每个属性都分配了一个包含相关组元素的数组。

对数组中的元素进行分组

我们可能经常需要对数据库中的项目进行分组并通过 UI 将它们显示给用户。使用
Object.groupBy()
就可以简化此类项目的分组。

比如有这样一堆数据：

const arr = [
  { product: "iPhone X", quantity: 25, color: "black" },
  { product: "Huawei mate50", quantity: 6, color: "white" },
  { product: "xiaomi 13", quantity: 0, color: "black" },
  { product: "iPhone 13", quantity: 10, color: "white" },
  { product: "Huawei P50", quantity: 5, color: "black" },
]

然后我们希望将这些设备根据颜色进行分类

const newArr = Object.groupBy(arr, (item) => item.color)

console.log('【newArr】', newArr)

上面的代码按产品的属性值
color
对产品进行分组，每次调用回调函数时，都会返回与每个对象的属性（“黑色”或“白色”）相对应的键。然后使用返回的键对数组的元素进行分组。

有条件地对数组中的元素进行分组

还是上面的数据，如果我们想要分成iphone和国产品牌两类，可以这么来实现：

const arr = [
  { product: "iPhone X", quantity: 25, color: "black" },
  { product: "Huawei mate50", quantity: 6, color: "white" },
  { product: "xiaomi 13", quantity: 0, color: "black" },
  { product: "iPhone 13", quantity: 10, color: "white" },
  { product: "Huawei P50", quantity: 5, color: "black" },
]

const list = Object.groupBy(arr, (item) => {
  return item.product.includes('iPhone') ? 'iPhone' : '国产品牌'
})

console.log('【list】', list)

扩展

注意：
Object.groupBy()
最初是作为典型的数组方法实现的。它最初的用途是这样的：

let myArray = [a, b, c]
myArray.groupBy(callbackFunction)

然而，由于
ECMAScript
技术委员会在实现该方法 时遇到了
Web 兼容性问题
，因此他们决定将其实现为静态方法 ( )。

Object.groupBy()
只需两个参数即可简化数组中对象分组的过程：数组本身和回调函数。

在过去，您必须编写一个自定义函数来对数组元素进行分组或从外部库导入分组方法。

可用性：
Object.groupBy()
现在所有主要浏览器平台都支持

正则表达式v标志

大家可能熟悉正则表达式 Unicode 标志 (
u
)，它允许启用对 Unicode 字符的支持。该
v
标志是
u
标志大部分功能的扩展。

它除了主要向后兼容该
u
标志之外，还引入了以下新功能：

交集运算符

交集运算符可以匹配两个字符集中必须存在的字符。其语法为
[operand-one&&operand-two]
，其中
&&
表示交集运算符，
operand-one
和
operand-two
表示各自的字符集。

const str = 'My name is nanjiu'

const strReg = /[[a-z]&&[^aeiou]]/gv
const strArr = str.match(strReg)
console.log('【strArr】', strArr)

// 【strArr】 ['y', 'n', 'm', 's', 'n', 'n', 'j']
  • [a-z]
    上面的代码定义了一个匹配小写字母和非元音字符的交集的正则表达式
    [^aeiuo]
    。
  • 运算
    &&
    符确保仅匹配两个集合共有的字符。
  • 这些
    gv
    标志启用全局搜索（查找所有匹配项）和正则表达式 v 模式。

差异运算符

差异运算符由两个连续的连字符 (
--
) 表示，提供了一种在正则表达式中指定排除项的便捷方法。正则表达式引擎将忽略
--
后面的任何字符集

查找非 ASCII 表情符号字符：

let myEmojis = "

标签: none

添加新评论