提取嵌套数组并修改对象属性：forEach未生效问题排查

尝试提取数组中对象内部的子数组，并修改该子数组内对象的属性。本以为操作很简单，但不清楚为何forEach没有更新对象。据了解forEach会修改原数组，为何此处不生效？

预期结果 #

[
    {
        "label": "400 mg",
        "value": "400 mg"
    },
    {
        "label": "600 mg",
        "value": "600 mg"
    },
    {
        "label": "800 mg",
        "value": "800 mg"
    }
]

现有代码 #

const array1 = [
    {
        "Name": "IBU (oral - tablet)",
        "Strength": [
            {
                "Strength": "400 mg",
                "NDC": "55111068201"
            },
            {
                "Strength": "600 mg",
                "NDC": "55111068301"
            },
            {
                "Strength": "800 mg",
                "NDC": "55111068401"
            }
        ]
    },          
];

let newA = array1.map((item) => item.Strength).flatMap((item) => item)

newA.forEach((str) => ({label: str.Strength ,value: str.Strength}))

console.log(newA)

forEach的回调函数里你只是创建了一个新的对象字面量，但并没有对原数组newA里的元素做任何修改。forEach本身不会自动替换数组中的元素，它只是遍历数组执行你传入的回调逻辑——你现在的回调只是返回了新对象，却没有把这个新对象赋值给数组的对应项，也没有修改原对象的属性。

另外，forEach能修改原数组的前提是你在回调里直接操作了数组元素的引用类型属性（比如给对象添加/修改属性），而不是返回新对象。

方法1：修改原数组元素的属性（用forEach） #

如果要保留原对象引用并修改属性，可以在forEach里直接给每个str添加label和value属性，同时可以删除不需要的原属性：

let newA = array1.map((item) => item.Strength).flatMap((item) => item)

newA.forEach((str) => {
    str.label = str.Strength;
    str.value = str.Strength;
    // 可选：删除不需要的原属性
    delete str.Strength;
    delete str.NDC;
})

console.log(newA)

方法2：用map生成新数组（更推荐） #

如果你不需要保留原对象，而是想要全新的数组元素，用map更合适，因为map会返回一个新数组，每个元素是回调返回的结果：

let newA = array1
    .map((item) => item.Strength)
    .flatMap((item) => item)
    .map((str) => ({
        label: str.Strength,
        value: str.Strength
    }))

console.log(newA)

方法3：简化提取+转换逻辑 #

可以把提取子数组和转换合并成一步，用flatMap直接处理：

let newA = array1.flatMap(item => 
    item.Strength.map(str => ({
        label: str.Strength,
        value: str.Strength
    }))
)

console.log(newA)

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