前言

數(shù)組扁平化相信大家已經(jīng)耳熟能詳了，在被面試官問到如何實(shí)現(xiàn)數(shù)組扁平化你就偷著樂吧，但是相信有不少大佬在面試一些國(guó)內(nèi)頂尖的大廠時(shí)，被面試官問到如何實(shí)現(xiàn)對(duì)象扁平化，筆者在學(xué)習(xí)過程中對(duì)此也感興趣，讓我們一起看看如何實(shí)現(xiàn)對(duì)象扁平化吧

例題詳情

// 實(shí)現(xiàn)一個(gè) flatten 函數(shù)，實(shí)現(xiàn)如下的轉(zhuǎn)換功能
const obj = {
  a: 1,
  b: [1, 2, { c: true }],
  c: { e: 2, f: 3 },
  g: null,
};

// 轉(zhuǎn)化為扁平化之后的對(duì)象
let objRes = {
  a: 1,
  "b[0]": 1,
  "b[1]": 2,
  "b[2].c": true,
  "c.e": 2,
  "c.f": 3,
  g: null,
};

扁平化

扁平化概念的核心意義是：去除冗余、厚重和繁雜的裝飾效果。而具體表現(xiàn)在去掉了多余的透視、紋理、漸變以及能做出3D效果的元素，這樣可以讓“信息”本身重新作為核心被凸顯出來。同時(shí)在設(shè)計(jì)元素上，則強(qiáng)調(diào)了抽象、極簡(jiǎn)和符號(hào)化。

對(duì)象實(shí)現(xiàn)扁平化，從需要轉(zhuǎn)化的結(jié)果可以看出，我們需要對(duì)整個(gè)對(duì)象進(jìn)行遍歷，對(duì)象里面嵌套對(duì)象或者數(shù)組都需要扁平化，將嵌套的內(nèi)層對(duì)象的屬性值依次輸出。

我認(rèn)為本題的核心就在于傳入對(duì)象的 key 和 value，對(duì)value進(jìn)行遞歸遍歷，找到所有嵌套的屬性值。

代碼實(shí)現(xiàn)

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
}

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

運(yùn)行結(jié)果：

總結(jié)

到此這篇關(guān)于Javascript如何實(shí)現(xiàn)對(duì)象扁平化的文章就介紹到這了,更多相關(guān)js對(duì)象扁平化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論