JS에서 객체를 반복적으로 반복합니다 - 유틸리티 함수 #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 함수를 호출할 때 첫 번째 인수로 루프하려는 개체를 전달해야 하고, 두 번째 인수로 콜백을 전달해야 합니다. 각 반복에서 콜백은 다음 순서로 5개의 인수를 전달합니다.

• key(문자열), 객체의 현재 키 속성
• value(any), 해당 속성의 값(예: 중첩된 객체 또는 그 속성이 갖고 있는 다른 값)
• obj(객체), 현재 루프 중인 객체(부모 또는 중첩 객체)
• 경로(배열), 반복되는 현재 항목의 경로
• NestLevel(숫자)은 0(루트)부터 시작하여 현재 루프의 레벨이 얼마나 깊은지 알려줍니다.

이 내용이 유용했다면 DEV에서 이와 같은 콘텐츠를 더 많이 공유하겠습니다!

X: https://x.com/schemetastic

에서도 저를 만나실 수 있습니다.

나중을 위해 저장해두세요 ?

위 내용은 JS에서 객체를 반복적으로 반복합니다 - 유틸리티 함수 #1의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!