Javascript如何實現對象扁平化實例詳解

Posted on by

前言

數組扁平化相信大傢已經耳熟能詳瞭，在被面試官問到如何實現數組扁平化你就偷著樂吧，但是相信有不少大佬在面試一些國內頂尖的大廠時，被面試官問到如何實現對象扁平化，筆者在學習過程中對此也感興趣，讓我們一起看看如何實現對象扁平化吧

例題詳情

// 實現一個 flatten 函數，實現如下的轉換功能
const obj = {
  a: 1,
  b: [1, 2, { c: true }],
  c: { e: 2, f: 3 },
  g: null,
};

// 轉化為扁平化之後的對象
let objRes = {
  a: 1,
  "b[0]": 1,
  "b[1]": 2,
  "b[2].c": true,
  "c.e": 2,
  "c.f": 3,
  g: null,
};

扁平化

扁平化概念的核心意義是：去除冗餘、厚重和繁雜的裝飾效果。而具體表現在去掉瞭多餘的透視、紋理、漸變以及能做出3D效果的元素，這樣可以讓“信息”本身重新作為核心被凸顯出來。同時在設計元素上，則強調瞭抽象、極簡和符號化。

對象實現扁平化，從需要轉化的結果可以看出，我們需要對整個對象進行遍歷，對象裡面嵌套對象或者數組都需要扁平化，將嵌套的內層對象的屬性值依次輸出。

我認為本題的核心就在於傳入對象的 key 和 value，對value進行遞歸遍歷，找到所有嵌套的屬性值。

代碼實現

function flattenObj(obj) {
  let res = {}
  for (let key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {  
      flatten(res,obj[key],`${key}`)
    } else {
      res[key] = obj[key]
    }
  }
      

  function flatten (res, obj ,keyname) {
    for(let key in obj) {
      if (typeof obj[key] === 'object' && obj[key] !== null) {  
        flatten(res,obj[key],`${keyname}.${key}`)
      }else {
        res[`${keyname}.${key}`] = obj[key]
      }
    }
  }
  return res
}

實現思路:首先聲明一個結果對象，遍歷我們需要扁平化的對象，判斷遍歷到的 key 的 value 是不是對象或者數組，代碼部分我使用的是typeof方法，來判斷是基礎類型還是引用類型 （使用typeof方法可以可以準確判斷出除瞭null之外的所有的基本數據類型（註：typeof null // "object" 是javascript這門語言的歷史遺留問題，需要記憶）），滿足(typeof obj[key] === 'object' && obj[key] !== null)時，說明此時我們遍歷到的value是一個引用類型，我們需要將她身上的所有屬性都掛到結果對象身上去，所以我又定義瞭一個用來遍歷深層屬性的函數flatten； 如果是原始類型，那就將原對象身上的key value 直接掛載到結果對象res身上，flatten的功能也是判斷是否還有深層嵌套的對象或數組，用遞歸遍歷來實現扁平化。

運行結果：

總結

到此這篇關於Javascript如何實現對象扁平化的文章就介紹到這瞭,更多相關js對象扁平化內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：