简介
在前端开发中，经常需要对对象或数组进行操作。其中，遍历对象或数组是十分常见的操作。而循环遍历的同时操作 key 和 value，是一个经常出现的需求。这时候，pathkey 这个 npm 包就能够满足我们的需求。
pathkey 可以将对象或数组扁平化为一个一维数组，每个元素包含该项的 key 和 value，便于循环遍历操作。
安装
在使用 pathkey 之前，首先需要安装该 npm 包。
使用 npm 安装：
--- ------- ------- ------
使用方法
基础用法
----- ------- - ------------------- -- ----------- ----- --- - - -- -- -- - -- - --- ----- ------ - ------------- -- -- - - ----- ------ ---- ---- ------ - -- - ----- ----- ----- ---- ---- ------ - - - -- ----------- ----- --- - - - -- - -- - -- - -- - ---- ----- ------- - ------------- -- -- - - ----- --- ----- ---- ---- ------ - -- - ----- --- ---- ----- ---- ---- ------ - - -
该方法会将对象或数组扁平化为一个一维数组，每个元素包含该项的 key 和 value，同时也包含了该项的完整路径。其中，path 属性表明了该元素在源对象中的路径信息，key 则表示该元素的键值，value 则表示该元素的值。
遍历操作
对于 pathkey 返回的结果数组，我们可以使用数组的 forEach 或 map 等方法对其进行遍历操作。和普通数组不同的是，pathkey 返回的结果数组每个元素都包含了该元素的完整路径，因此在遍历时可以直接使用该路径信息。
----- --- - - -- -- -- - -- - --- ----- ------ - ------------- ------------------- -- - -------------------------------- --------- ------------ -- -- - - - -- -- --- - - ---
在遍历时，我们通过 item.path.join('.') 将路径信息转化为了字符串形式，便于打印输出。
根据路径操作对象
pathkey 返回的结果包含了完整的路径信息，因此我们可以根据这些路径信息操作原对象，例如：
----- --- - - -- -- -- - -- - ---
----- ------ - -------------
------------------- -- -
------------------- --- -- -
--------------------------- - ---------- - -- -- - --- -----
-
---
----------------- -- -- - -- -- -- - -- - --该示例中，我们遍历了 pathkey 返回的结果数组，当该元素的 path 数组长度为2时（即 b.c 这个对象），我们将该对象中的值加1，最终输出结果为 { a: 1, b: { c: 3 }}。
总结
pathkey 这个 npm 包可以方便地将对象或数组扁平化为一个一维数组，每个元素都包含了该项在原对象中的路径信息，便于针对特定元素进行操作。同时，该 npm 包的使用也比较简单，只需要安装并按照示例代码正确使用即可。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/58444