前言

本文仅为记录，通过尾递归的方式，将嵌套JSON扁平化，前文是代码实现，后文是个人学习记录，适合帮助新手了解代码块。写得不太好，有不合理的地方，欢迎指正，不清楚的，可以在评论区交流。

注意：递归要设终止条件，否则会造成堆栈溢出。切记，慎用递归！慎用递归！慎用递归！

代码实现

嵌套JSON对象

const zhCommon = {
    "menu": {
        "system": {
            "role": "角色",
            "setting": "设置"
        },
        "home": "首页"
    }
}

代码块

const res = (function toArr(obj, kyes = []) {
  return Object.entries(obj).reduce(
    (acc, [key, val]) =>
      Object.assign(acc, val instanceof Object ? toArr(val, kyes.concat(key)) : { [kyes.concat(key).join('.')]: val }),
    {}
  )
})(zhCommon)
console.log(res)

输出结果

{
    menu.home: "首页",
    menu.system.role: "角色",
    menu.system.setting: "设置"
}

学习记录

以下仅为上述代码块的解析，不作相关方法的详细介绍。

1. 三目运算

判断val的类型是否为对象类型，为true则继续递归，即继续执行toArr方法，否则返回扁平后的obj对象。

concat()和join()应该不用写了吧

val instanceof Object ? toArr(val, kyes.concat(key)) : { [kyes.concat(key).join('.')]: val

2. Object.assign()

Object.assign()将三目运算返回的obj对象复制到acc，acc初始值为reduce()方法的入参{}。

Object.assign(acc, val instanceof Object ? toArr(val, kyes.concat(key)) : { [kyes.concat(key).join('.')]: val })

3. Array.reduce()

reduce()方法接收一个函数callbackfn作为累加器（accumulator），并接收一个初始值initValue。数组中的每个值（从左到右）开始合并，最终为一个值。

语法

array.reduce(callbackfn, initValue)
// callbackfn = function(preValue, curValue, curIndex, arr) 写法相同
array.reduce(function(preValue, curValue, curIndex, arr), initValue)

代码解析

此处的callbackfn返回的是obj对象，初始值initValue是{}，callbackfn的入参分别为acc和[key,val]，其中acc对应preValue，如无上一个值时，preValue等于initValue，[key,val]对应当前值curValue，key和 val分别对应obj对象的key、value。

Object.entries(obj).reduce(
    (acc, [key, val]) =>
      Object.assign(acc, val instanceof Object ? toArr(val, kyes.concat(key)) : { [kyes.concat(key).join('.')]: val }),
    {}
  )

4. Object.entries()

Object.entries()  方法返回一个数组，包含给定对象自有的可枚举字符串键属性的键值对。如：

const obj = {
  menu: {
      home: "首页"
  }
}
console.log(Object.entries(zhCommona))

输出结果为

[
    [
        "menu",
        {
            "home": "首页"
        }
    ]
]

其结果就是将原来的obj对象，转为数组，其值分别为原对象的key和value，如上图所示，新数组的值有俩：menu和{"home": "首页"}，分别对应[key,val]中的key和val，此处的val为Object类型，则回到三目运算，继续执行toArr方法，进入循环。