Gelungkan objek secara berulang dalam JS - guna fungsi #1

Pada masa ini, saya sedang mengusahakan beberapa projek peribadi dan saya fikir adalah idea yang baik untuk berkongsi beberapa kod yang saya perlukan untuk mereka, dan juga beberapa perkara yang saya pelajari sepanjang perjalanan, jadi saya akan berkongsi lebih banyak lagi itu tidak lama lagi. Saya harap anda mendapati ia berguna juga! ?

Hari ini saya berkongsi dengan anda fungsi utiliti untuk membantu anda menggelung melalui objek bersarang, pada setiap lelaran objek anda boleh menjalankan panggilan balik dan mendapatkan data yang berguna.

Gunakan contoh kes:

• Tapis atau isih data objek
• Untuk membantu anda menavigasi melalui tiga UI direktori yang diwakili dalam objek
• Kendalikan pilihan bersarang dalam UI
• Kendalikan kategori dan subkategori
• Melongok melalui data apabila ditarik daripada pangkalan data

fungsi utiliti loopObj

Anda hanya boleh salin dan tampal fungsi ini

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

Cara menggunakannya:

Contoh coretan:

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

Ini akan mengeluarkan sesuatu seperti ini:

Apabila memanggil fungsi loopObj, sebagai hujah pertama anda mesti lulus objek yang anda mahu gelung, dan sebagai yang kedua, panggilan balik. Pada setiap lelaran, panggil balik akan menghantar 5 argumen dalam susunan ini:

• kunci (rentetan), sifat kunci semasa objek
• nilai (mana-mana), nilai harta itu (cth. objek bersarang atau nilai lain yang dimilikinya)
• obj (objek), objek yang sedang digelung (sama ada induk atau objek bersarang)
• laluan (tatasusunan), laluan item semasa yang digelung
• nestLevel (nombor), bermula dari 0 (akar), ia memberitahu anda betapa dalam tahap gelung semasa.

Jika anda mendapati ini berguna, saya akan berkongsi lebih banyak kandungan seperti ini di DEV!

Anda juga boleh mencari saya di X: https://x.com/schemetastic

Dan ingat untuk menyimpannya untuk kemudian ?

Atas ialah kandungan terperinci Gelungkan objek secara berulang dalam JS - guna fungsi #1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!