>웹 프론트엔드 >JS 튜토리얼 >중첩된 객체의 경로 가져오기 및 확인 - 유틸리티 함수 #2

중첩된 객체의 경로 가져오기 및 확인 - 유틸리티 함수 #2

Linda Hamilton
Linda Hamilton원래의
2024-11-19 21:19:03975검색

Get and verify paths in a nested object - util functions #2

어제 JS에서 객체를 반복적으로 반복하는 유틸리티 함수를 공유했습니다. JS의 특징 중 하나는 중첩된 객체에 대한 경로가 포함된 배열을 얻을 수 있다는 것입니다. 현재 루팅 중입니다. 그러나 중첩된 객체로 작업할 때 특정 순간에 특정 경로에서 데이터를 검색하거나 확인하고 싶을 수 있는데, 이것이 오늘날의 유틸리티 기능이 하는 일입니다.

  • getDataFromObj(obj, path): 객체의 지정된 경로에서 데이터를 검색합니다
  • isValidObjPath(obj, path): 주어진 경로가 객체에 존재하는지 확인

getDataFromObj(obj, 경로)

이 코드를 자유롭게 복사하여 붙여넣으세요

/**
 * Retrieves data from an object on a given path
 * @param {Object} obj the object to get the data from
 * @param {string[]} path an array of strings containing the keys of the object to look at
 * @returns {*} the retrieved data or a Reference Error if not found
 */

function getDataFromObj(obj, path){
  // Validate arguments
  if(getType(obj) != "object"){
    throw TypeError("The `obj` argument is not an object");
  }
  if(getType(path) != "array"){
    throw TypeError("The `path` argument is not an array");
  }

  // Get the data or a ReferenceError if not found
  const data = (()=>{
    let currentData = obj;

    for(let i = 0; i < path.length; i +=1 ){
      if(Object.keys(currentData).includes(path[i])){
        currentData = currentData[path[i]];
        continue;
      } else{
        currentData = ReferenceError("The object path is not defined");
        break;
      }
    }
    return currentData;
  })();

  return data;
}

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

용법:

2개의 인수를 전달해야 합니다:
obj: 데이터를 검색하려는 개체
path: 따라야 할 시퀀스를 나타내는 배열

경로가 존재하면 값을 반환하고(값이 정의되지 않은 경우에도) 경로가 존재하지 않으면 ReferenceError 개체를 반환하며 오류를 발생시키지 않고 오류 개체만 반환합니다.

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

// This would log 25
console.log(getDataFromObj(products, ["externalDevices", "keyboard", "bluetooth"]))

// this would return a ReferenceError object (not a throw, just the error object)
console.log(getDataFromObj(products, ["externalDevices", "mouse"]))

// this would return `undefined`
console.log(getDataFromObj(products, ["externalDevices", "keyboard", "other"]))

isValidObjPath(obj, 경로)

유틸리티 코드:

/**
 * verify if an object has an specific path
 * @param {Object} obj the object to be verified
 * @param {string[]} path an array of strings containing the keys of the object to look at
 * @returns {Boolean} `true` if found, otherwise `false`
 */
function isValidObjPath(obj, path){
  // Validate arguments
  if(getType(obj) != "object"){
    throw TypeError("The `obj` argument is not an object");
  }
  if(getType(path) != "array"){
      throw TypeError("The `path` argument is not an array");
  }

  // shallow copy of the object to be verified
  let currentData = obj;

  // Verify the path
  for(let i = 0; i < path.length; i +=1 ){
    if(Object.keys(currentData).includes(path[i])){
      currentData = currentData[path[i]];
      continue;
    } else{
      return false;
    }
  }

  return true;
}

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

용법:

2개의 인수를 전달해야 합니다:
obj: 경로가 존재하는지 확인하려는 객체
path: 따라야 할 시퀀스를 나타내는 배열

검색 중인 경로가 존재하면 true를 반환하고, 그렇지 않으면 false를 반환합니다

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

// This would log true
console.log(isValidObjPath(products, ["externalDevices", "keyboard", "bluetooth"]))

// this would log false
console.log(isValidObjPath(products, ["externalDevices", "mouse"]))

// this would log true
console.log(isValidObjPath(products, ["externalDevices", "keyboard", "other"]))

슬래시나 점이 있는 문자열 대신 경로를 배열로 사용하는 이유는 무엇입니까? (예: "컴퓨터.노트북")

객체 속성 이름은 점을 포함하는 광범위한 문자 집합이 포함된 문자열일 수도 있으므로 예를 들어 "computers.laptop": {[...]}는 유효한 객체인 배열입니다. 유연성과 정확성이 향상됩니다.


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

X: https://x.com/schemetastic

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

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

위 내용은 중첩된 객체의 경로 가져오기 및 확인 - 유틸리티 함수 #2의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.