递归扁平化对象时控制台重复输出三次，求错误原因及解决方法

我在使用递归实现对象扁平化时，控制台会三次输出newObj，但预期只输出一次最终的扁平化对象，麻烦帮忙排查问题。

数据输入 #

const data = {
    id: 09,
    email: 'abc@test.com',
    contactInfo: {
        name: 'Test1',
        address: {
            city: 'Berlin',
            country: 'Germany'
        }
    }
}

原实现代码 #

const newObj = {}

const getFlattenObj = (data) => {
    Object.keys(data).forEach(key => {
        if (typeof data[key] === 'object') {
            getFlattenObj(data[key]);
        } else {
            newObj[key] = data[key]
        }
    })

    console.log(newObj);
}

getFlattenObj(data);

问题原因 #

你的console.log(newObj)写在了递归函数内部，每次调用getFlattenObj（包括递归处理子对象的调用）执行完遍历逻辑后，都会触发这个打印语句。
你的数据结构一共有三层对象：最外层data、contactInfo子对象、address子对象，所以递归函数会被调用三次，自然就会输出三次结果。

修正方案 #

把打印语句移到递归函数外面，只在整个扁平化操作完成后打印最终的newObj。另外还有两个细节需要修正：

• 原代码里id: 09是无效的JS写法（以0开头的数字会被解析为八进制，但八进制不能包含9），建议改成数字9或者字符串'09'；
• 原判断typeof data[key] === 'object'会把数组也识别为对象，如果你的场景不需要处理数组，建议加上数组排除判断。

修正后的代码 #

const data = {
    id: 9, // 修正无效数字写法
    email: 'abc@test.com',
    contactInfo: {
        name: 'Test1',
        address: {
            city: 'Berlin',
            country: 'Germany'
        }
    }
}

const newObj = {}

const getFlattenObj = (data) => {
    Object.keys(data).forEach(key => {
        // 排除数组，避免误处理数组类型的值
        if (typeof data[key] === 'object' && !Array.isArray(data[key])) {
            getFlattenObj(data[key]);
        } else {
            newObj[key] = data[key]
        }
    })
}

getFlattenObj(data);
console.log(newObj); // 仅在扁平化完成后打印最终结果

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