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

今天我與您分享一個(gè)實(shí)用函數(shù)來(lái)幫助您循環(huán)遍歷嵌套對(duì)象，在對(duì)象的每次迭代中您可以運(yùn)行回調(diào)並獲取有用的數(shù)據(jù)。

用例範(fàn)例：

• 過(guò)濾或排序物件的資料
• 幫助您瀏覽以物件表示的三個(gè) UI 目錄
• 處理 UI 中的巢狀選項(xiàng)
• 處理類別和子類別
• 從資料庫(kù)擷取資料時(shí)循環(huán)存取

LoopObj實(shí)用函數(shù)

您只需複製並貼上這些函數(shù)即可

/**
 * 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
 */

使用方法：

範(fàn)例片段：

// 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)
});

這將輸出如下內(nèi)容：

呼叫l(wèi)oopObj函數(shù)時(shí)，您必須傳遞要循環(huán)的物件作為第一個(gè)參數(shù)，第二個(gè)參數(shù)是回呼。在每次迭代中，回呼將按以下順序傳遞 5 個(gè)參數(shù)：

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

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

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

記得保存以供日後使用？

以上是在 JS 中循環(huán)循環(huán)一個(gè)物件 - util 函數(shù) #1的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！