如何判斷一個js物件是否存在迴圈引用

林恒發表於2024-05-07
JS物件

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

如何判斷一個js物件是否存在迴圈引用

一、背景

在前端JSON.stringfy是我們常用的一個方法，可以將一個物件序列化。 例如將如下物件序列化

const person = { name: 'kalory', age:18}

JSON.stringfy(person)
// 結果
'{"name":"kalory","age":18}'

將一個陣列序列化

const arr = [1,2,3,4,5]
// 結果
'[1,2,3,4,5]'

const persons = [{ name: 'kalory', age:18},{ name: 'jack', age:48}]
// 結果
'[{"name":"kalory","age":18},{"name":"jack","age":48}]'

我們發現上面物件是可以使用JSON.stringfy序列化的。

  • 但是如果一個物件存在迴圈引用，序列化會報錯，如下 person物件的owner屬性指向了自己，存在迴圈引用
const person = { name: 'kalory', age:18}
person.onwer = person

我們對上面這個物件進行JSON.stringfy,結果如下，會報錯：

我們發現他說不能轉化一個“圈結構體為JSON”,是因為這個物件的owner屬性指向了自己。在轉化的時候會變成死迴圈。

  • 那麼我們如果判斷一個物件有沒有環呢？

二、實現

2.1 思路

我們判斷一個物件有沒有迴圈引用，我們其實並不需要在乎物件的key是什麼，只需要判斷物件的value。如果value是引用資料型別的時候，有沒有指向物件的某一值。

所以我們可以先使用Object.values()拿到物件所有values,然後定義一個cache變數用來儲存values中的引用資料型別，然後遍歷values。

如果cache中存在，那麼說明這個物件有環 return true，如果不存在並且是引用資料型別，那麼我們就加入cache。當values遍歷完都沒有reutrn那麼說明沒有環return false

2.2 遞迴實現

function existCircular(obj) {
  let cache = new Set(); 
  function helper(obj) {
    let values = Object.values(obj);
    for (let i = 0; i < values.length; i++) {
      if (cache.has(values[i])) {
        return true;
      }
      
      // 不是引用資料型別，直接跳過
      if(typeof values[i] !== 'object' || values[i] === null) continue
      cache.add(values[i]);
      
      let flag = helper(values[i]);
      // 如果 flag 是 false, 那麼繼續遍歷，如果是 true,說明已經存在環了， 直接 return true
      if (flag) {
        return true;
      }
    }
    return false;
  }

  return helper(obj);
}

// 測試
const person = { name: 'kalory', age:18}
person.onwer = person

existCircular(person) // true

2.3 BFS實現

const existCircularBFS = (obj) => {
  let cache = new Set();
  let values = [obj];

  while(values.length) {
    const item =  values.shift()
    if (cache.has(item)) {
        return true;
    }
    // 基本資料型別跳過
    if(typeof item !== 'object' || item === null) continue
    cache.add(item);
    // 主要這裡 Object.values 拿到的是一個陣列，我們需要展開push到values
    // 如果直接 push Object.values(item) 會造成死循話
    values.push(...Object.values(item))
  }
  
  return false;
}

本文轉載於:

https://juejin.cn/post/7343867039022071859

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。

如何判斷一個js物件是否存在迴圈引用

相關文章