简介
随着现代 Web 开发的深入，前端技术已经不再局限于渲染页面和简单的交互，而是成为了和后端一样独立的完整的开发栈。同时，前端领域的开源社区日益壮大，为我们提供了各种各样的库和工具来简化我们的工作。
@canner/canner-functions 就是其中之一，它是一个前端函数库，提供了各种常用的函数。本文将介绍它的使用方法，帮助读者更快地使用它，提高工作效率。
安装
使用 npm 安装：
npm install @canner/canner-functions
使用
需求背景
本文章我们就以一个需求为例：现在有一个产品列表数据，需要对数据进行筛选和排序。排序有三种方式：按照价格升序、按照价格降序、按照折扣价格由高到低。
筛选
筛选功能常见于不同类型的数据，只有满足特定条件的数据才会在结果集中被返回。以产品列表数据为例，如果我们要筛选出所有价格低于 30 元的产品，该怎么做？
我们可以使用 @canner/canner-functions 中的 filter 方法来完成：
-- -------------------- ---- ------- ------ - ------ - ---- -------------------------- --- ----------- - - - ----- -------- --- ------ -- -- - ----- -------- --- ------ -- -- - ----- -------- --- ------ -- -- - ----- -------- --- ------ -- -- - ----- -------- --- ------ -- - - --- ------------ - ------------------- ---- -- ---------- - --- ------------------------- -- -- ----- -------- --- ------ -- -- -- - ----- -------- --- ------ -- --展开代码
在上面的代码中，我们首先从 @canner/canner-functions 中引入 filter 方法，并定义一个 productList 数组，表示产品列表数据。然后，我们可以使用 filter 方法对 productList 进行筛选，只返回价格低于 30 元的产品列表。
filter 方法的第一个参数为被筛选的数组，第二个参数为求值函数。求值函数的作用是对数组的每个元素进行求值，如果求值结果为真，则该元素将被返回。本例中，我们使用箭头函数 item => item.price < 30 作为求值函数，当价格小于 30 元时，该函数求值结果为真。
排序
排序是指将一个数据集合按照某个属性的值进行从小到大或者从大到小的排列。以产品列表数据为例，如果我们要按照价格升序排列，该怎么做？
我们可以使用 @canner/canner-functions 中的 sortBy 方法来完成：
-- -------------------- ---- ------- ------ - ------ - ---- -------------------------- --- ----------- - - - ----- -------- --- ------ -- -- - ----- -------- --- ------ -- -- - ----- -------- --- ------ -- -- - ----- -------- --- ------ -- -- - ----- -------- --- ------ -- - - --- ---------- - ------------------- ---- -- ----------- ----------------------- -- -- ----- -------- --- ------ -- -- -- - ----- -------- --- ------ -- -- -- - ----- -------- --- ------ -- -- -- - ----- -------- --- ------ -- -- -- - ----- -------- --- ------ -- --展开代码
在上面的代码中，我们首先从 @canner/canner-functions 中引入 sortBy 方法，并定义一个 productList 数组，表示产品列表数据。然后，我们可以使用 sortBy 方法对 productList 进行排序，按照价格从小到大的顺序。
sortBy 方法的第一个参数为被排序的数组，第二个参数为求值函数。求值函数的作用是对数组的每个元素进行求值，求值结果将被用于排序。本例中，我们使用箭头函数 item => item.price 作为求值函数，表示以价格作为排序标准。
sortBy 和 filter 方法的求值函数可以自己写，只需要满足要求即可。
多重排序
如果我们要对产品列表数据进行多重排序，以价格升序、折扣价格由高到低、名字字母顺序排列为例，该怎么做？
我们可以使用 @canner/canner-functions 中的 sortByMultiple 方法来完成：
-- -------------------- ---- ------- ------ - -------------- - ---- -------------------------- --- ----------- - - - ----- -------- --- ------ --- --------- - -- - ----- -------- --- ------ --- --------- - -- - ----- -------- --- ------ --- --------- - -- - ----- -------- --- ------ --- --------- -- -- - ----- -------- --- ------ --- --------- - - - --- ---------- - --------------------------- - - ---- -------- ------ ----- -- - ---- ----------- ------ ------ -- - ---- ------- ------ ----- - -- ----------------------- -- -- ----- -------- --- ------ --- --------- -- -- -- - ----- -------- --- ------ --- --------- - -- -- - ----- -------- --- ------ --- --------- - -- -- - ----- -------- --- ------ --- --------- - -- -- - ----- -------- --- ------ --- --------- - --展开代码
在上面的代码中，我们首先从 @canner/canner-functions 中引入 sortByMultiple 方法，并定义一个 productList 数组，表示产品列表数据。然后，我们可以使用 sortByMultiple 方法对 productList 进行多重排序，按照价格升序、折扣价格由高到低、名字字母顺序排列。
sortByMultiple 方法的第一个参数为被排序的数组，第二个参数为排序条件数组。排序条件数组中每个对象表示一个排序条件，包括 key 和 order 两个属性。key 表示排序关键字，order 表示排序顺序。本例中，我们使用了三个排序条件，因此排序条件数组中包括三个对象，分别表示价格升序、折扣价格由高到低、名字字母顺序排列。
总结
在本文中，我们介绍了 @canner/canner-functions 这个前端函数库，并且通过一个产品列表数据的筛选和排序的实例，说明了它具体的使用方法。我们可以看到 @canner/canner-functions 提供了丰富的函数，包括了常用的数组函数、表单函数、字符串函数、日期函数等等，可以帮助我们完成很多常见的任务。如果读者在日常工作中遇到了类似的问题，可以尝试使用 @canner/canner-functions，会有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/154481
