嵌套数组元素与分类文件名对象关联的程序设计概念咨询

嘿，我明白你要做的事了——把那个二维数组里的每个数字和JSON里不同分类的图片文件对应起来对吧？这属于典型的数据映射需求，我给你梳理两种最常见的实现思路和代码示例，你可以根据实际需求调整：

场景1：按数组索引绑定分类文件位置 #

假设你想让数组的每一行对应JSON里的一个分类（比如第一行对应main、第二行对应corner），数组的列索引对应分类下文件的顺序，那可以用索引映射的方式实现：

// 你的嵌套数组
const set = [[28, 12, 14], [34, 83, 89], [78, 34, 29]];
// 已解析完成的JSON数据（假设你已经通过fs或fetch读取并解析）
const jsonData = {
  "main": [ {"id": "main001", "src": "main001.png"}, {"id": "main002", "src": "main002.png"}, {"id": "main003", "src": "main003.png"} ],
  "corner": [ {"id": "corner001", "src": "corner001.png"}, {"id": "corner002", "src": "corner002.png"}, {"id": "corner003", "src": "corner003.png"} ],
  // 可以根据需要添加更多分类
  "extra": [ {"id": "extra001", "src": "extra001.png"}, {"id": "extra002", "src": "extra002.png"}, {"id": "extra003", "src": "extra003.png"} ]
};

// 定义数组行与JSON分类的对应关系
const rowCategoryMap = ['main', 'corner', 'extra'];

// 生成关联后的结果
const mappedData = set.map((row, rowIndex) => {
  // 获取当前行对应的分类
  const targetCategory = rowCategoryMap[rowIndex];
  const categoryFiles = jsonData[targetCategory];
  
  return row.map((number, colIndex) => {
    // 将数组中的数字与对应位置的文件绑定
    return {
      value: number,
      associatedFile: categoryFiles[colIndex] || null // 防止索引越界返回null
    };
  });
});

// 查看结果
console.log(mappedData);

场景2：按数字匹配文件ID后缀 #

如果数组里的数字是文件ID的后缀（比如数字28对应main028.png或corner028.png），那可以先把所有文件按数字后缀建立映射表，再匹配数组中的数字：

const set = [[28, 12, 14], [34, 83, 89], [78, 34, 29]];
const jsonData = { /* 你的JSON数据 */ };

// 先构建数字到文件的映射表
const numberFileMap = {};

// 遍历所有分类下的文件
Object.keys(jsonData).forEach(category => {
  jsonData[category].forEach(file => {
    // 提取ID中的数字部分（比如从"main028"提取28）
    const fileNumber = parseInt(file.id.replace(/^\D+/, ''), 10);
    
    // 如果该数字还没有对应的数组，就初始化一个
    if (!numberFileMap[fileNumber]) {
      numberFileMap[fileNumber] = [];
    }
    
    // 将文件信息和分类一起存入映射表
    numberFileMap[fileNumber].push({
      category: category,
      id: file.id,
      src: file.src
    });
  });
});

// 关联数组中的数字
const mappedData = set.map(row => {
  return row.map(number => {
    return {
      value: number,
      matchedFiles: numberFileMap[number] || [] // 返回所有匹配该数字的文件，无匹配则返回空数组
    };
  });
});

console.log(mappedData);

自定义规则补充 #

如果你的关联逻辑和上面两种都不一样（比如数字代表分类编号、或者有其他业务规则），可以把具体的匹配规则告诉我，我再帮你调整代码～

内容的提问来源于stack exchange，提问作者monsto