后端返回给我们的数据接口中,如果是个对象,对象中有嵌套二级或二级以上的属性,这个时候我们去获取的话,需要一层层去获取。
举例:
数据如下:
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就可以拿到值了。