แบนอ็อบเจกต์ซ้อน (Flatten Object) แบบเรียกซ้ำ (Recursive) ใน JavaScript

เราต้องเขียนฟังก์ชันที่ทำการแปลงดังนี้:

ถ้าอ็อบเจกต์อินพุตคือ:

const input = {
  a: 0,
  b: {x: {y: 1, z: 2}},
  c: 3
};

ผลลัพธ์ของฟังก์ชันควรเป็น:

const output = {
  a: 0,
  'b.x.y': 1,
  'b.x.z': 2,
  c: 3
}

โดยพื้นฐานเราต้องเขียนฟังก์ชันที่แบน (flatten) อ็อบเจกต์ซ้อน เราจะทำผ่าน recursion โค้ดสำหรับทำสิ่งนี้จะเป็นดังนี้:

ตัวอย่างโค้ด

const obj = {
  a: 1,
  b: {x: {y: 1, z: 2}},
  c: 3
};
const obj1 = {
  a: 0,
  b: 0,
  c: 0
};
const object = { a: 0, b: { x: { y: 1, z: 2 } }, c: 3 };

const stringifyKeys = (obj, str = '', fresh = {}) => {
  const keys = Object.keys(obj);
  for (let i = 0; i < keys.length; i++) {
    if (typeof obj[keys[i]] === "object" && !Array.isArray(obj[keys[i]]) && obj[keys[i]]) {
      stringifyKeys(obj[keys[i]], str + `${keys[i]}.`, fresh);
    } else {
      fresh[str + keys[i]] = obj[keys[i]];
    }
  }
  return fresh;
};

console.log(stringifyKeys(obj));
console.log(stringifyKeys(object));
console.log(stringifyKeys(obj1));

ผลลัพธ์

ผลลัพธ์ในคอนโซลจะเป็นดังนี้:

{ a: 1, 'b.x.y': 1, 'b.x.z': 2, c: 3 }
{ a: 0, 'b.x.y': 1, 'b.x.z': 2, c: 3 }
{ a: 0, b: 0, c: 0 }