简介
在前端开发中，我们经常需要对一组数据进行过滤和筛选，npm包breadth-filter就是一个可以很好地帮助我们完成这项工作的工具库。breadth-filter提供了一种深度和广度优先遍历的思路，能够高效地过滤任何结构的数据。在使用时，我们只需要安装该包，然后在代码中使用即可。
安装
在终端中输入以下命令，即可安装breadth-filter：
npm install breadth-filter --save
使用
1. 导入
在代码中导入breadth-filter：
const breadthFilter = require('breadth-filter');2. 遍历数组
遍历数组时，可以将数组作为第一个参数传入breadthFilter函数中，然后再传入一个函数作为第二个参数，该函数对数组的每个元素进行判断，返回true或false，breadthFilter函数会将结果为true的元素保存到结果数组中返回。
const arr = [1,2,3,4,5,6,7,8,9,10];
const filteredArr = breadthFilter(arr, (item) => {
return item % 2 === 0;
});
console.log(filteredArr); //[ 2, 4, 6, 8, 10 ]3. 遍历对象
对于对象的遍历，需要将对象作为第一个参数传入breadthFilter函数中，然后再传入一个函数作为第二个参数，该函数对对象的每个属性值进行判断，返回true或false，breadthFilter函数会将结果为true的属性保存到结果对象中返回。
-- -------------------- ---- ------- ----- --- - - ----- ------ ---- --- ------- ------- ------- --- -- ----- ----------- - ------------------ ------- -- - ------ ------ ----- --- --------- --- ------------------------ -- - ----- ------ ------- ------ -
4. 指定遍历深度
默认情况下，breadthFilter会遍历整个数据结构，如果我们只希望遍历到一定深度，可以通过第三个参数depth来指定。
-- -------------------- ---- -------
----- --- - -
----- ------
---- ---
------- -------
------- -
-------- ---------
-
--
----- ----------- - ------------------ ----- -- -
------ ------ --- --- ---------
-- ---
------------------------ -- - ----- ------ ---- --- ------- ------ -5. 指定遍历方式
breadthFilter提供了深度遍历和广度遍历两种遍历方式，可以通过第四个参数mode来指定，默认为广度遍历。以下是广度遍历和深度遍历的区别：
广度遍历：先将同一级的数据全部遍历一遍，再遍历下一级数据。
深度遍历：先将一棵树的最深处全部遍历一遍，然后再遍历一层，一层一层往上遍历。
-- -------------------- ---- -------
----- --- - -
-- -
-- -
-- -------
-
--
-- -
-- -
-- -------
-
-
--
----- ----------- - ------------------ ----- -- -
------ ------ --- --- ---------
-- -- ---------
------------------------- --- -- -------- -- ------- -
----- ------------ - ------------------ ----- -- -
------ ------ --- --- ---------
-- -- -----------
-------------------------- --- -- -------- -- ------- -总结
简单总结一下，我们可以通过npm包breadth-filter来高效地过滤任何结构的数据，它提供了深度遍历和广度遍历两种遍历方式，可以灵活地应用到不同的场景中。在使用时，我们可以将数据结构和过滤函数作为参数传入breadthFilter函数中，该函数会将结果保存到结果数组或结果对象中并返回。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae18b5cbfe1ea0610d73