npm 包 @types/match-sorter 的使用教程

简介

@types/match-sorter 是一个用于字符串排序和过滤的 npm 包。它可以接受一个字符串数组和一个字符串作为输入,返回一个按照匹配程度排序的字符串数组。@types/match-sorter 提供了一些可自定义的选项,比如排序方向、排序规则等等。

安装

你可以通过 npm 来安装该包:npm install @types/match-sorter --save-dev。需要注意的是,@types/match-sorter 仅仅提供了 TypeScript 类型声明文件,而 match-sorter 本身的主体代码需要另外安装。

基本用法

下面是一个简单的使用示例:

------ ----------- ---- ---------------

----- ---- - --------- --------- ------ ------ ------ -------
----- ------ - ----------------- -----
--------------------
-- ------------ --------- ------ ------

这个示例中,我们先定义了一个字符串数组 data,然后将其和一个匹配字符串 'a' 传入 matchSorter,得到一个按照匹配程度排序后的数组 result。根据我们的设定,只有以 'a' 开头的字符串才会被返回。

选项

@types/match-sorter 提供了多个可选的选项,以便你对匹配和排序进行更精确的控制。下面是一份常用的选项列表:

  • keys:一个字符串或字符串数组,指定输入数据集的哪些属性需要被匹配。当输入数据集中的元素是一个对象时,可以使用这个选项来指定其中的某个属性作为匹配字符串的来源。默认为 'label'
  • threshold:一个数字或捆绑对象,用以控制匹配字符串和数据集中每个元素的匹配程度。检查匹配程度的方式可以通过 thresholdBy 选项指定,详见下文。默认为 0.2
  • thresholdBy:一个字符串或字符串数组,指定检查匹配程度的方式。默认为 'everyChar'。可选的值包括:
    • 'everyChar':包含匹配字符串中的每一个字符则认为匹配度为 1,否则为 0
    • 'string':将匹配字符串视为整个字符串,只有当匹配字符串与数据集中的某个元素完全相等时匹配度为 1,否则为 0
    • 'word':将匹配字符串分解为单词,只有当匹配字符串中的所有单词都可以在数据集中某个元素中找到时匹配度为 1,否则为 0
    • (input: string, item: T) => number:自定义匹配度检查函数。
  • minRanking:一个数字,表示只有排名在这个数字以上的元素才会被返回。默认为 0
  • maxRanking:一个数字,表示只有排名在这个数字以下的元素才会被返回。默认为 Infinity
  • keepDiacritics:一个布尔值,指定是否将重音标识符视为不同的字符。默认为 false

自定义排序规则

除了上述选项外,@types/match-sorter 还提供了多个用于自定义排序规则的函数。

rankings

rankings 是一个匹配字符串与数据集中每个元素的匹配程度的比较函数数组。默认情况下,@types/match-sorter 会使用该数组中第一个返回非负值的函数,将元素根据匹配程度进行排序。你可以通过传入一个自定义的 rankings 数组来修改这个行为。示例:

------ ---------- ---- ---------------

----- ---- - -------- ----- ------ ------ ---------- -------
----- ------ - ----------------- ---- ---------- --- -- --- --------------------------
--------------------
-- ---------- ------ ----- ----------

这个示例中,我们通过传入一个自定义的 rankings 数组来让函数首先使用一个“固定值 10”的比较函数,然后再使用一个区分大小写的比较函数。因此,只有以 'c' 开头的字符串中排名在前四位、即 'car''cat''ca''chicken' 这四个字符串会被返回。

comparator

comparator 函数可以用于进一步精确控制排序行为。comparator 函数接受两个元素 ab,返回一个数字,该数字表示 a 应该排在 b 的前面还是后面。你可以通过传入一个自定义的 comparator 函数来修改排序行为。示例:

------ ------------ ---- ---------------

--------- ------ -
  ----- -------
  ---- -------
-

----- ---- - -
  ------ -------- ---- ----
  ------ ------ ---- ----
  ------ ---------- ---- ----
--
----- ------ - ----------------- ---- -
  ----- ---------
  --------- ---------------------
  ----------- --- ------- -- ------- -- ----- - ------
---
--------------------
-- ---------- ------ ---- ---- ------ -------- ---- ---- ------ ---------- ---- ----

这个示例中,我们首先使用 keys 选项指定了我们只关心数据集中的 'name' 属性。然后使用 rankings 选项指定了只有匹配程度最高的串匹配函数 rankings.substring。最后,我们传入一个自定义的 comparator 函数,它会先比较年龄,然后再使用 rankings.substring 函数进行排名。由于 comparator 函数是首先比较年龄,而 'Bob' 升龄段排在前面,因此最后的输出结果是以 'Bob''Alice''Charlie' 的顺序排列的。

总结

@types/match-sorter 可以让你轻松实现各种字符串排序和过滤的功能,具有很高的灵活性和可定制性。在实际项目中,你可以根据自己的需求,选择恰当的选项和函数来实现最佳的匹配效果。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/types-match-sorter


猜你喜欢

  • npm 包 restana 使用教程

    介绍 restana 是一个基于 Node.js 和 Express 的快速、轻量级和灵活的 Web 服务框架。它能够以无服务器、微服务和函数即服务(FaaS)的方式工作,支持 HTTP 和 HTTP...

    4 年前
  • npm 包 polka 使用教程

    polka 是一个轻量级的 Node.js Web 服务器,它能够快速、简便地创建 Web 应用程序。本篇文章将为您详细阐述如何使用 npm 包 polka 来构建自己的前端 Web 应用,包括 po...

    4 年前
  • npm 包 lambda-log 使用教程

    介绍 Lambda-log 是一个为 AWS Lambda 函数设计的轻量级日志库,支持多种日志级别、具有灵活的配置选项,并且可以很方便地使用在 AWS CloudWatch Logs。

    4 年前
  • npm 包 inversify-express-utils 使用教程

    前言 在进行 Web 开发过程中,很多时候我们需要使用到依赖注入的技术来解耦代码、提高可维护性,而 inversify-express-utils 就是一个基于 InversifyJS 实现的专门为 ...

    4 年前
  • npm 包 @loopback/rest 使用教程

    简介 @loopback/rest 是一个基于 Node.js 的微服务框架,专为构建高度可扩展的 RESTful 应用程序而设计。它使用现代的、可维护的设计模式和最佳实践增加开发人员的工作效率。

    4 年前
  • npm 包 graphql-cli 使用教程

    GraphQL 是一种查询语言,它可以让客户端和服务器之间的数据请求更加高效和精确。GraphQL 的使用已经在前端开发中成为一个趋势,因为它可以大大减少不必要的网络请求以及提供更好的开发体验。

    4 年前
  • npm 包 prisma-binding 使用教程

    简介 Prisma-binding 是一个可用于连接 Prisma 数据库服务的 npm 包。它提供了一个 GraphQL 查询引擎,允许开发人员将 Prisma 数据操作集成到他们的应用程序中。

    4 年前
  • npm 包 graphql-binding 使用教程

    GraphQL-binding 是一个用来生成 GraphQL Schema 具体实现的npm包。它可以帮助开发者快速地生成可维护的 GraphQL Schema。

    4 年前
  • npm 包 @botsbotsbots/common 使用教程

    在前端开发中,我们常常需要使用一些工具来加快开发速度,提高开发效率。其中,npm 包就是一种很常见的工具。在这篇文章中,我将介绍如何使用 @botsbotsbots/common npm 包。

    4 年前
  • npm 包 aws-lambda 使用教程

    NPM(Node Package Manager)是 Node.js 的官方包管理工具,它可以帮助我们更方便地管理依赖包和模块。aws-lambda 是一个基于 Node.js 的 AWS Lambd...

    4 年前
  • npm 包 @types/aws-iot-device-sdk 使用教程

    AWS IoT 是一个基于云服务的物联网平台,它提供了设备连接、身份认证、消息传递、规则匹配和数据存储等功能。AWS IoT Device SDK 是一个用于在物联网设备上开发应用程序的框架,它提供了...

    4 年前
  • NPM 包 Slack Payload 使用教程

    Slack Payload 是一款在前端技术中被广泛使用的 npm 包,它可以让开发者在 Slack 上构建自己的应用,并将数据以定义的格式抛送到特定渠道。本文将介绍如何使用 Slack Payloa...

    4 年前
  • npm包slack-hawk-down使用教程

    简介 slack-hawk-down是一个npm包,它是用于Slack集成的一个中间件,它可以在Slack应用程序中捕获入站Webhooks并使用签名验证进行身份验证。

    4 年前
  • npm 包 html-to-mrkdwn 使用教程

    随着前端技术的不断发展,越来越多的工具被开发出来,可以帮助我们更好地完成各种任务。其中,npm 包是前端开发中常用的工具之一。本文介绍的 npm 包 html-to-mrkdwn 就是一个将 HTML...

    4 年前
  • npm包alagarr使用教程

    简介 alagarr是一个通过Canvas元素绘制漂亮图标的npm包。该包可以在任何现代Web浏览器上使用,并且易于集成进你的现有项目中。 在这篇教程中,我们将会学习如何安装alagarr,如何使用它...

    4 年前
  • npm 包 @1password/import-sort-style 使用教程

    介绍 在前端开发中,提高代码的可维护性和可读性是很重要的,而一个好的代码风格和文件结构是实现这个目标的重要手段。然而,对于大型项目,关注细节往往会分散开发者的注意力并导致可读性下降。

    4 年前
  • npm 包 @1password/front-end-style 使用教程

    前端开发需要具备良好的代码规范和风格,这样可以保证代码的可读性、可维护性和可扩展性。为了满足前端开发中这一需求,1Password 公司推出了一个针对前端开发的 npm 包 @1password/fr...

    4 年前
  • npm 包 aurelia-loader-webpack 使用教程

    在前端开发中,我们常常需要使用一些 npm 包来提升代码效率以及减少工作量。其中,aurelia-loader-webpack 是一个非常实用的工具,它可以帮助开发者快捷地完成 JavaScript ...

    4 年前
  • npm 包 @polymer/tools-common 使用教程

    什么是 @polymer/tools-common @polymer/tools-common 是一个 Polymer 项目的通用工具包,它包含了各种用于开发 Polymer 应用的辅助工具。

    4 年前
  • npm 包 @t2ym/web-component-tester 使用教程

    前言 在前端开发过程中,我们不可避免地需要测试我们所开发的 Web 组件,而如何进行有效的 Web 组件测试一直是一个困扰着前端开发者的问题。而 @t2ym/web-component-tester ...

    4 年前

相关推荐

    暂无文章