实现一个有二级对象属性的对象的扁平化

231 阅读1分钟

后端返回给我们的数据接口中,如果是个对象,对象中有嵌套二级或二级以上的属性,这个时候我们去获取的话,需要一层层去获取。

举例:

数据如下:

const data = {
  b: 1,
  b2: "gg",
  b3: [1, 2, { m: 1 }, { m: 2 }],
  b4: true,
  b5: null,
  b6: undefined,
  c: {
    d: 2,
    d2: [6, { m: 1 }, { m: 2 }],
    e: {
      f: 3,
      f2: "dd",
    },
  },
  d: {
    g: 1,
    g2: 8,
  },
};

要获取 data下面的c属性的e属性的f字段,写法 data.c.e.f

比较繁琐,能不能通过一层key名称就拿到呢 比如 data["c.e.f"]

经过我一番努力,实现了一个如下方法:

// 把对象中的二级属性 扁平化到一级属性
// {a:1,b:{c:2}} => {a:1,b:{c:2}, "b.c":2}

const addProperty = (obj, property) => {
  if (!obj || !property) return;

  const arr = property.split(".");

  let val = obj;
  arr.forEach((key) => {
    val = val ? val[key] : null;
  });

  if (!val || !(val instanceof Object)) return;

  for (const k in val) {
    obj[property + "." + k] = val[k];
  }
};

用法:

addProperty(data, "b3"); // 数组也可以
addProperty(data, "c");
addProperty(data, "c.e");
addProperty(data, "g"); // 测试异常
addProperty(data, "g.h");

返回值如下

{
  b: 1,
  b2: 'gg',
  b3: [ 1, 2, { m: 1 }, { m: 2 } ],
  b4: true,
  b5: null,
  b6: undefined,
  c: { d: 2, d2: [ 6, [Object], [Object] ], e: { f: 3, f2: 'dd' } },
  d: { g: 1, g2: 8 },
  'b3.0': 1,
  'b3.1': 2,
  'b3.2': { m: 1 },
  'b3.3': { m: 2 },
  'c.d': 2,
  'c.d2': [ 6, { m: 1 }, { m: 2 } ],
  'c.e': { f: 3, f2: 'dd' },
  'c.e.f': 3,
  'c.e.f2': 'dd'
}

使用场景:比如数据的展示,主要是一层key就可以拿到值了。