简介
@kingjs/descriptor.nested.array.for-each 是一个基于 Object 类型的 JavaScript/npm 包，它提供了一种方便的方式来遍历嵌套的数组元素，并使用所提供的回调函数对它们进行处理。
本文将深入介绍 @kingjs/descriptor.nested.array.for-each 包的使用方法和示例，以及一些有关嵌套数组的基础知识。
安装和导入
安装 @kingjs/descriptor.nested.array.for-each 包：
npm install @kingjs/descriptor.nested.array.for-each
使用 require 或 import 将其引入到您的项目中供使用：
const forEach = require('@kingjs/descriptor.nested.array.for-each');
// Or
import forEach from '@kingjs/descriptor.nested.array.for-each';使用方式
@kingjs/descriptor.nested.array.for-each 函数的签名如下：
-- -------------------- ---- -------
------- -------- --------
----------- ----
------ -
------ ----
------- ------
------ -------
------ -------
------------ ------
- -- -----
--------- -
----------------- -------
--------------- --------
----------- --------
------------------- --------
--------------------- --------
----------------- --------
------------ --------
-
-- -----其中：
descriptor：需要遍历的嵌套属性对象；visit：在遍历每个元素时需要进行的回调函数；options（可选）：提供了一些关于如何遍历属性树的配置参数。
下面将更详细地介绍每个参数。
descriptor
该参数是需要遍历的嵌套属性对象，可以每个元素都是数组或嵌套的对象。以下是一个基本示例：
const descriptor = {
a: ['foo', 'bar', { c: 'baz' }]
};在此示例中，descriptor 对象具有一个属性 a，它是一个数组，其中包含了三个元素：'foo'、'bar' 和一个包含另一个属性 c 的对象，其值为 'baz'。
visit
该参数是一个函数，它会在每个元素上调用一次，作为第一个参数传入。以下是它的签名：
( value: any, parent: any[], field: string, index: number, parentIndex: number ) => void
其中：
value：当前遍历到的元素；parent：表示当前元素的父元素集合，可能是一个数组或对象（在对象上的属性值中）；field：当前元素在其父元素集合上的键，如果当前元素是一个数组中的元素，则该参数为数字字符串；index：当前元素在其父元素的数组中的索引，如果不是数组中的元素，则该参数为空；parentIndex：如果当前元素是数组中的一个元素，则该参数表示当前元素在其父元素数组中的索引，否则为 null。
其中，parent 数组在遍历时反映其上级元素的层次关系，通常可以用于生成元素树或路径，从而方便了解当前元素在整个对象中的位置。
options
options 是一个可选的对象，用于配置遍历行为和重写默认值。以下是可选属性参数：
childrenProperty：如果值为字符串，默认情况下，将嵌套在元素对象的属性名。如果值为 true，则总是尝试遍历所有嵌套的数据结构默认值为children。fromEnumerable：如果设置为 true，则仅遍历可枚举属性。默认为 false。depthFirst：如果设置为 true，则首先访问当前元素的深度遍历子元素，否则自上而下广度优先访问。默认为 false。visitNonEnumerable：如果设置为 true，则即使属性当前为非可枚举，也会访问属性。默认为 false。visitNonConfigurable：如果设置为 true，则即使属性当前为不可配置，也会访问属性。默认为 false。visitNonWritable：如果设置为 true，则即使属性当前为非可写，也会访问属性。默认为 false。requiresOwn： 如果设置为 true，则仅处理 directly-owned properties，即仅访问对象实例上的属性，而忽略任意继承的属性。默认为 false。
示例
下面将为您演示如何使用 @kingjs/descriptor.nested.array.for-each 包遍历嵌套数组元素。首先，我们将创建一个基本的嵌套数组元素：
const descriptor = {
a: ['01', '02', {
b: ['03', '04']
}]
};示例代码如下：
-- -------------------- ---- -------
----- ------- - ----------------------------------------------------
----- ---------- - -
-- ------ ----- -
-- ------ -----
--
--
----- -------- - ------- ------- ------ ------ ------------ -- -
-------------
------
-------
------
------
------------
---
--
------------------- ----------运行上面的示例，您将在控制台中看到以下输出，其中显示了每个元素和它的属性路径：
value: '01', parent: [Array], field: 'a', index: '0', parentIndex: null
value: '02', parent: [Array], field: 'a', index: '1', parentIndex: null
value: { b: [ '03', '04' ] }, parent: [Array], field: 'a', index: '2', parentIndex: null
value: '03', parent: [Array, Object], field: 'b', index: '0', parentIndex: '2'
value: '04', parent: [Array, Object], field: 'b', index: '1', parentIndex: '2'在这里，我们使用了一个 logVisit 函数作为回调函数，将遍历到的元素和位置信息输出到控制台。
接下来，我们将介绍如何使用 @kingjs/descriptor.nested.array.for-each 配置参数进行定制遍历行为。首先，我们将使用以下示例，并使用 fromEnumerable 属性选项只输出可枚举属性：
-- -------------------- ---- -------
----- ------- - ----------------------------------------------------
----- ---------- - -----------------------
-- ------ ----- -
-- ------ -----
--
-- --------- -
------ ------- ----------
----------- -----
---
----- -------- - ------- ------- ------ ------ ------------ -- -
-------------
------
-------
------
------
------------
---
--
------------------- --------- -
--------------- ----
---运行上面的示例，您将在控制台中看到以下输出，其中忽略了标记为 enumerable: false 的属性：
value: '01', parent: [Array], field: 'a', index: '0', parentIndex: null
value: '02', parent: [Array], field: 'a', index: '1', parentIndex: null
value: { b: [ '03', '04' ] }, parent: [Array], field: 'a', index: '2', parentIndex: null
value: '03', parent: [Array, Object], field: 'b', index: '0', parentIndex: '2'
value: '04', parent: [Array, Object], field: 'b', index: '1', parentIndex: '2'接下来，我们将使用 depthFirst 属性选项，以深度优先遍历子元素，来列举子成员的位置信息：
-- -------------------- ---- -------
----- ------- - ----------------------------------------------------
----- ---------- - -
-- ------ ----- -
-- ------ -----
--
--
----- -------- - ------- ------- ------ ------ ------------ -- -
-------------
------
-------
------
------
------------
---
--
------------------- --------- -
----------- ----
---运行上面的示例，您将在控制台中看到以下输出，其中首先访问最深的 b 的子元素：
value: '01', parent: [Array], field: 'a', index: '0', parentIndex: null
value: '02', parent: [Array], field: 'a', index: '1', parentIndex: null
value: '03', parent: [Array, Object, Array], field: '0', index: '0', parentIndex: '2'
value: '04', parent: [Array, Object, Array], field: '1', index: '1', parentIndex: '2'
value: { b: [ '03', '04' ] }, parent: [Array], field: 'a', index: '2', parentIndex: null结论
@kingjs/descriptor.nested.array.for-each 包提供了一种方便的方式来遍历嵌套的数组元素，它具有许多配置选项，可以用于定制遍历行为。本文提供了容易理解和使用的示例，并详细介绍了包的用法和一些嵌套对象和数组的基础知识。希望这篇文章能够帮助您更好地了解和学习该包的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5351ab1864dac6690c