js对象扁平化处理

在工作中是否遇到这种情况，需要将很多层级对象平铺处理， 如图

原始数据

转换后

代码

const data = {
  app: {
    form: {
      inputPlaceholder: '请输入',
      selectPlaceholder: '请选择'
    },
    modal: {
      title: '弹框标题',
      content: '弹框内容',
      footer: '弹框底部'
    }
  },
  mes: {
    workCenter: '工作中心',
    batch: '批次'
  },
  qms: {
    defCode: '缺陷代码',
    qms: {
      qms: '1111'
    }
  },
  systemName: 'xxx后台管理系统'
};

/**
 * 对象扁平化
 * @param {Object} source
 * @param {String|Function} joinChar
 * @returns {Object}
 */
function objectFlat(source, joinChar = ".") {
  const Utils = {
    // 对象
    isObject: d => {
      return ({}).toString.call(d) === '[object Object]';
    },
    // 获取key的路径
    getKeyPath: (key, path, value) => {
      if (typeof joinChar === 'function') {
        return joinChar(key, path, value);
      }
      return path.length > 0 ? path.join(joinChar) + joinChar + key : key;
    }
  };

  // 执行方法
  function _walk(data, keyPath = []) {
    let result = {};
    for (let key in data) {
      const value = data[key];
      // 如果为对象，则需要继续递归往下找，同时需要传递当前路径给下级使用；
      if (Utils.isObject(value)) {
        const childrenData = _walk(value, [...keyPath, key]);
        result = Object.assign({}, result, childrenData);
      } else {
        const _keyPath = Utils.getKeyPath(key, keyPath, value);
        result[_keyPath] = value;
      }
    }
    return result;
  }
  const res = Utils.isObject(source) ? _walk(source, []) : {};
  return res
}

const resultData = objectFlat(data, "·"); // 第二个参数为分割字符，可以传函数自定义
console.log(resultData); // { a.b.c: '1111', c: 'xxx', a.c.d: '张三' }

最后

觉得可以的点个赞吧，3q~