如何在JavaScript中实现数组的flag与后续元素映射？

需求说明 #

给定如下模拟数组（实际为对象数组，其中数值100、200、300、400代表单字段标记对象（flag），其余为多字段对象）：

[100,2,3,4,200,35,42,300,4,4,4,6,7,400,2]

需要生成如下结构的映射数组（每个flag对应其后续所有非flag元素，一一生成{key: flag值, value: 后续元素}格式的对象）：

[
   { key: 100, value: 2 },
   { key: 100, value: 3 },
   { key: 100, value: 4 },

   { key: 200, value: 35 },
   { key: 200, value: 42 },

   { key: 300, value: 4 },
   { key: 300, value: 4 },
   { key: 300, value: 4 },
   { key: 300, value: 6 },
   { key: 300, value: 7 },

   { key: 400, value: 2 }
]

注：实际判断flag的规则是对象的键数量为1，非flag对象的键数量大于1。

尝试的代码 #

let flagAndFollowingValues = new Map();
let j=0;
let followingElementsArray = [];
console.log(itemsToBeCheckedArray[j]);
for(let i=0; i<bigArray.length; i++){
    if(Object.keys(bigArray[i]).length > 1)
    {
        followingElementsArray.push(bigArray[i]);
    }else if(Object.keys(bigArray[i]).length === 1){
        if(i===0){
            j++;
            flagAndFollowingValues.set(itemsToBeCheckedArray[j], followingElementsArray);
            followingElementsArray=[];
        }else{
            flagAndFollowingValues.set(itemsToBeCheckedArray[j], followingElementsArray);
            followingElementsArray=[];
        }
    }
}

正确实现方案 #

核心思路 #

1. 遍历数组时，先记录当前遇到的flag值
2. 遇到非flag元素时，直接生成对应的{key, value}对象并加入结果数组
3. 遇到新的flag时，更新当前flag值即可

代码实现 #

// 假设bigArray是你的实际对象数组
const bigArray = [/* 你的对象数组 */];
const result = [];
let currentFlag = null;

// 判断是否为flag的工具函数
const isFlag = (obj) => Object.keys(obj).length === 1;
// 获取flag的唯一值（适配单字段对象结构，比如{id:100}则取100）
const getFlagValue = (obj) => Object.values(obj)[0];

for (const item of bigArray) {
    if (isFlag(item)) {
        currentFlag = getFlagValue(item);
    } else {
        // 确保当前已有flag才生成映射，避免数组开头非flag元素报错
        if (currentFlag !== null) {
            result.push({ key: currentFlag, value: item });
        }
    }
}

console.log(result);

代码说明 #

• 用isFlag函数统一判断标记对象，逻辑清晰易维护
• getFlagValue函数提取flag的实际值，适配{type:200}这类单字段对象格式
• 遍历过程中实时生成目标结构对象，无需额外存储临时数组，效率更高
• 加入currentFlag !== null的判断，避免数组开头非flag元素导致的无效映射

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