在 JS 中循環循環一個物件 - util 函數 #1

目前，我正在開發一些個人項目，我認為分享一些我需要的程式碼以及我一路上學到的一些東西是個好主意，所以我將分享更多很快。我希望你也覺得它很有用！ ？

今天我與您分享一個實用函數來幫助您循環遍歷嵌套對象，在對象的每次迭代中您可以運行回調並獲取有用的數據。

用例範例：

• 過濾或排序物件的資料
• 幫助您瀏覽以物件表示的三個 UI 目錄
• 處理 UI 中的巢狀選項
• 處理類別和子類別
• 從資料庫擷取資料時循環存取

LoopObj實用函數

您只需複製並貼上這些函數即可

/**
 * Loops an object recurrently
 * @param {Object} obj the object to be looped
 * @param {Function} callback a function that will run on each iteration
 */
function loopObj(obj, callback, path = [], nestLevel = 0){
  // validate params (`path` and `nestLevel` are added automatically)
  if(getType(obj) != "object"){
    throw TypeError("The `obj` argument is not an object")
  }
  if(getType(callback) != "function"){
    throw TypeError("The `callback` argument is not a function")
  }

  // Loop the object
  for (let key in obj){
    // Run the callback
    callback(key, obj[key], obj, path, nestLevel)
    // Loop a nested object
    if(getType(obj[key]) == "object") loopObj(obj[key], callback, [...path, key], nestLevel + 1)
  }
}

/**
 * A method to detect data types more accurately
 * Credits: Chris Ferdinandi, https://gomakethings.com/
 * @param {*} data the data to be verified
 * @returns {String} the data type
 */
function getType(data){
  return Object.prototype.toString.call(data).toLowerCase().slice(8, -1)
}

/**
 * License: MIT, https://opensource.org/license/mit
 * Copyright (c) 2024 Rodrigo Isaias Calix
 */

使用方法：

範例片段：

// example object
const products = {
  computers: {
    laptop: 20,
    desktop: 15,
    mini: 8
  },
  cameras: 20,
  externalDevices: {
    keyboard: {
      usb: 45,
      bluetooth: 25,
    }
  }
}

// calling the function
loopObj(products, (key, value, obj, path, nestLevel)=>{
  console.log(key, value, path, nestLevel)
});

這將輸出如下內容：

呼叫loopObj函數時，您必須傳遞要循環的物件作為第一個參數，第二個參數是回呼。在每次迭代中，回呼將按以下順序傳遞 5 個參數：

• key (string), 物件目前的鍵屬性
• value（任意），該屬性的值（例如嵌套物件或它具有的任何其他值）
• obj (object)，目前正在循環的物件（可以是父對象，也可以是巢狀物件）
• path (array)，目前循環item的路徑
• NestLevel（數字），從0（根）開始，它告訴你目前循環的等級有多深。

如果您覺得這有用，我將在 DEV 上分享更多類似的內容！

您也可以在 X 上找到我：https://x.com/schemetastic

記得保存以供日後使用？

以上是在 JS 中循環循環一個物件 - util 函數 #1的詳細內容。更多資訊請關注PHP中文網其他相關文章！