JavaScript数组对象深度转换：从嵌套结构生成目标数组-js教程-PHP中文网

javascript数组对象深度转换：从嵌套结构生成目标数组

本教程详细阐述如何利用JavaScript的map和find方法，将两个复杂的嵌套数组（boxes和items）进行深度转换和数据关联，生成一个符合特定结构要求的新数组。文章将聚焦于如何根据嵌套对象的属性进行匹配查找，并提取所需数据，同时提供优化建议，确保代码的准确性与效率。

1. 数据转换需求分析

在前端开发中，我们经常需要对从后端获取或本地存储的复杂数据结构进行转换，以适应UI展示或进一步的数据处理需求。本例中，我们面临两个原始数组：

boxes 数组： 包含多个箱子（trolley）的信息，每个箱子内部有一个 trolleyItems 数组，列出了该箱子内的具体物品。
items 数组： 一个包含所有可用物品详情的源数组，每个物品有一个唯一的 _id 和 name。

我们的目标是生成一个名为 final 的新数组，其结构如下：

const final = [
    {
        "cartId": "full", // 来自 boxes 数组中每个对象的 cartType 字段
        "itemsCategory": [ // 这是一个数组，包含每个物品的 categoryId
            {
                "categoryId": "645bbe9141332374a05919d2" // 来自 items 数组中匹配物品的 _id
            },
            // ... 更多 categoryId 对象
        ]
    },
    // ... 更多 cartId 对象
];

登录后复制

具体转换规则如下：

final 数组的每个对象将从 boxes 数组的每个元素派生。
每个派生对象的 cartId 字段应取自 boxes 数组中对应元素的 cartType 字段。
每个派生对象的 itemsCategory 字段是一个数组，其内容需要通过以下方式生成：
- 遍历 boxes 数组中每个元素的 trolleyItems 数组。
- 对于 trolleyItems 中的每个 trolleyItem，使用其 name 字段去 items 数组中查找匹配的 item。
- 一旦找到匹配的 item，提取其 _id 字段作为 categoryId。

2. 核心JavaScript方法

为了实现上述复杂的嵌套数据转换和查找，我们将主要利用以下两个高阶数组方法：

立即学习“Java免费学习笔记（深入）”；

Array.prototype.map()： 用于创建一个新数组，其结果是调用 map 方法的数组中的每个元素都调用一次提供的函数后的结果。它非常适合进行一对一的数组元素转换。
Array.prototype.find()： 用于在数组中查找满足提供的测试函数的第一个元素。如果找到一个元素，find 方法会立即返回该元素的值，否则返回 undefined。它非常适合进行单次查找。

3. 实现步骤与示例代码

我们将分步构建解决方案，并提供完整的代码示例。

3.1 原始数据结构

首先，我们定义原始的 boxes 和 items 数组，以便于理解和测试。

const boxes = [
    {
        "trolleyNo": "345A",
        "trolleyItems": [
            { "key": "02f2c8e0-cd40-11ed-8563-092a964acecc", "name": "Bar Cart - Liquor, Liqueur", "value": "Bar Cart - Liquor, Liqueur", "label": "Bar Cart - Liquor, Liqueur" },
            { "key": "02f2c8e0-cd40-11ed-8563-092a964acecc", "name": "Bar Cart - Beer & Wine", "value": "Bar Cart - Beer & Wine", "label": "Bar Cart - Beer & Wine" },
            { "key": "02f2c8e0-cd40-11ed-8563-092a964acecc", "name": "Bread Basket & Tongs", "value": "Bread Basket & Tongs", "label": "Bread Basket & Tongs" },
            { "key": "02f2c8e0-cd40-11ed-8563-092a964acecc", "name": "Crew Store - Cookies, juices, etc", "value": "Crew Store - Cookies, juices, etc", "label": "Crew Store - Cookies, juices, etc" }
        ],
        "cartType": "fullCart",
        "index": "FC-093"
    },
    {
        "trolleyNo": "560S",
        "trolleyItems": [
            { "key": "02f2c8e0-cd40-11ed-8563-092a964acecc", "name": "Bar Cart - Beer & Wine", "value": "Bar Cart - Beer & Wine", "label": "Bar Cart - Beer & Wine" },
            { "key": "02f2c8e0-cd40-11ed-8563-092a964acecc", "name": "Bread Basket & Tongs", "value": "Bread Basket & Tongs", "label": "Bread Basket & Tongs" },
            { "key": "02f2c8e0-cd40-11ed-8563-092a964acecc", "name": "Crockery - Full Plates", "value": "Crockery - Full Plates", "label": "Crockery - Full Plates" }
        ],
        "cartType": "halfCart",
        "index": "FC-093"
    }
];

const items = [
    { "_id": "646d96f669cad73dc5d14a25", "name": "Bar Cart - Beer & Wine", "customerId": "02f2c8e0-cd40-11ed-8563-092a964acecc" },
    { "_id": "646d96f669cad73dc5d14a24", "name": "Bar Cart - Liquor, Liqueur", "customerId": "02f2c8e0-cd40-11ed-8563-092a964acecc" },
    { "_id": "646d96f669cad73dc5d14a2b", "name": "Bread Basket & Tongs", "customerId": "02f2c8e0-cd40-11ed-8563-092a964acecc" },
    { "_id": "646d96f669cad73dc5d14a2d", "name": "Crew Meals", "customerId": "02f2c8e0-cd40-11ed-8563-092a964acecc" },
    { "_id": "646d96f669cad73dc5d14a31", "name": "Crew Store - Cookies, juices, etc", "customerId": "02f2c8e0-cd40-11ed-8563-092a964acecc" },
    { "_id": "646d96f669cad73dc5d14a32", "name": "Crockery - Full Plates", "customerId": "02f2c8e0-cd40-11ed-8563-092a964acecc" },
];

登录后复制

3.2 完整代码示例

const final = boxes.map(box => {
    return {
        cartId: box.cartType,
        itemsCategory: box.trolleyItems.map(titem => {
            // 在 items 数组中查找与 titem.name 匹配的 item
            const matchedItem = items.find(item => item.name === titem.name);
            return {
                // 如果找到匹配项，则使用其 _id；否则为 undefined
                categoryId: matchedItem ? matchedItem._id : undefined
            };
        })
    };
});

console.log(JSON.stringify(final, null, 2));

登录后复制

运行上述代码，将得到符合预期的 final 数组：

[
  {
    "cartId": "fullCart",
    "itemsCategory": [
      {
        "categoryId": "646d96f669cad73dc5d14a24"
      },
      {
        "categoryId": "646d96f669cad73dc5d14a25"
      },
      {
        "categoryId": "646d96f669cad73dc5d14a2b"
      },
      {
        "categoryId": "646d96f669cad73dc5d14a31"
      }
    ]
  },
  {
    "cartId": "halfCart",
    "itemsCategory": [
      {
        "categoryId": "646d96f669cad73dc5d14a25"
      },
      {
        "categoryId": "646d96f669cad73dc5d14a2b"
      },
      {
        "categoryId": "646d96f669cad73dc5d14a32"
      }
    ]
  }
]

登录后复制

4. 代码解析

外层 map (boxes.map(...))：
- 我们首先对 boxes 数组调用 map 方法。这意味着对于 boxes 数组中的每一个 box 对象，我们都会执行一个回调函数，并根据其返回值构建 final 数组的一个新元素。
- 在回调函数内部，我们直接将 box.cartType 赋值给新对象的 cartId 属性。
内层 map (box.trolleyItems.map(...))：

即构数智人
即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情
- 对于每个 box 对象，我们又对其内部的 trolleyItems 数组调用了 map 方法。
- 这个内层 map 的目的是为每个 trolleyItem 生成一个 { categoryId: '...' } 格式的对象，并最终组成 itemsCategory 数组。
items.find(item => item.name === titem.name)：
- 这是数据关联的核心。在内层 map 的回调函数中，对于每一个 trolleyItem（简写为 titem），我们使用 find 方法在全局的 items 数组中查找匹配项。
- 查找条件是 item.name === titem.name，即 items 数组中某个 item 的 name 属性必须与当前 trolleyItem 的 name 属性完全一致。
- 重要提示： 原始问题描述要求通过 name 字段进行匹配，而提供的答案代码使用了 customerId === titem.key。但根据数据结构分析，key 和 customerId 似乎代表的是客户ID，而不是物品的唯一标识。如果使用 customerId === titem.key 进行匹配，由于示例数据中所有 trolleyItems.key 和 items.customerId 都是相同的，find 方法将总是返回 items 数组中的第一个匹配项，导致所有 categoryId 都相同，这与按 name 匹配的意图不符。因此，这里我们修正为 item.name === titem.name，以确保正确地根据物品名称进行查找。
matchedItem ? matchedItem._id : undefined：
- find 方法如果找到匹配项，会返回该对象；如果没有找到，则返回 undefined。
- 我们使用三元运算符 matchedItem ? matchedItem._id : undefined 来安全地获取 _id。如果 matchedItem 存在，就取其 _id；否则，categoryId 将被设置为 undefined。这是一种健壮的处理方式，可以避免在没有匹配项时访问 _id 属性导致错误。

5. 注意事项与优化

5.1 匹配逻辑的准确性

本教程强调了根据问题描述使用 name 字段进行匹配的重要性。在实际开发中，务必仔细核对数据模型和业务需求，确保选择正确的字段进行关联查找。错误的匹配逻辑会导致数据转换结果不准确。

5.2 性能考量

上述解决方案对于 boxes 和 items 数组规模较小的情况非常有效且易于理解。然而，如果 items 数组非常庞大（例如，包含数万甚至数十万个物品），在内层 map 中每次都对 items 数组执行 find 操作会导致性能问题。因为 find 的时间复杂度在最坏情况下是 O(N)（N 是 items 数组的长度）。如果 boxes 数组和 trolleyItems 数组也很长，总复杂度可能会达到 O(M * K * N)，其中 M 是 boxes 长度，K 是 trolleyItems 的最大长度。

为了优化性能，我们可以考虑在转换开始前，将 items 数组预处理成一个哈希表（或 Map 对象），以 name 作为键，_id 作为值。这样，后续的查找操作就可以从 O(N) 降低到平均 O(1) 的时间复杂度。

优化示例：

// 步骤1: 预处理 items 数组，创建 Map 进行快速查找
const itemsMap = new Map();
items.forEach(item => {
    itemsMap.set(item.name, item._id);
});

const finalOptimized = boxes.map(box => {
    return {
        cartId: box.cartType,
        itemsCategory: box.trolleyItems.map(titem => {
            // 从 Map 中直接获取 categoryId，查找速度更快
            const categoryId = itemsMap.get(titem.name);
            return {
                categoryId: categoryId // 如果找不到，get() 返回 undefined
            };
        })
    };
});

console.log(JSON.stringify(finalOptimized, null, 2));

登录后复制

通过这种优化，我们将查找 categoryId 的操作从线性搜索变成了常数时间查找，显著提升了大数据量下的性能。

5.3 缺失匹配处理

当 trolleyItem.name 在 items 数组中没有找到对应项时，matchedItem 将为 undefined，从而 categoryId 也会是 undefined。根据业务需求，您可能需要不同的处理方式：

过滤掉： 如果不希望包含没有 categoryId 的项，可以在内层 map 之后添加 filter。

itemsCategory: box.trolleyItems.map(titem => {
    const categoryId = itemsMap.get(titem.name);
    return { categoryId: categoryId };
}).filter(item => item.categoryId !== undefined) // 过滤掉 categoryId 为 undefined 的项

登录后复制