JS でオブジェクトを繰り返しループする - util 関数 #1

現在、私はいくつかの個人プロジェクトに取り組んでいます。そのプロジェクトに必要なコードと、その過程で学んでいることを共有するのが良いと思いました。そのため、さらに共有するつもりです。それについてはすぐに。あなたにも役立つことを願っています! ?

今日は、ネストされたオブジェクトをループするのに役立つユーティリティ関数を紹介します。オブジェクトの反復ごとにコールバックを実行して有用なデータを取得できます。

使用例:

• オブジェクトのデータをフィルターまたは並べ替えます
• オブジェクトで表されるディレクトリ 3 の 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 関数を呼び出すときは、最初の引数としてループするオブジェクトを渡し、2 番目の引数としてコールバックを渡す必要があります。各反復で、コールバックは次の順序で 5 つの引数を渡します:

• key (文字列)、オブジェクトの現在のキープロパティ
• value (任意)、そのプロパティの値 (例: ネストされたオブジェクトまたはそれが持つその他の値)
• obj (オブジェクト)、現在ループされているオブジェクト (親オブジェクトまたはネストされたオブジェクト)
• path (配列)、ループされている現在の項目のパス
• ネストレベル (数値) は 0 (ルート) から始まり、現在のループのレベルがどのくらい深いかを示します。

これが役立つと思われた場合は、DEV でこのようなコンテンツをさらに共有します!

X: https://x.com/schemetastic

でも私を見つけることができます。

後で使うために忘れずに保存してください ?

以上がJS でオブジェクトを繰り返しループする - util 関数 #1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。