昨日、JS でオブジェクトを繰り返しループするユーティリティ関数を共有しました。その機能の 1 つは、ネストされたオブジェクトへのパスを含む配列を取得できることです。現在ループ中です。ただし、ネストされたオブジェクトを操作するときは、いつでも特定のパスからデータを取得または検証することが必要になる場合があります。これが、今日のユーティリティ関数の機能です。
このコードを自由にコピーして貼り付けてください
/** * 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"]))
ユーティリティコード:
/** * 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
でも私を見つけることができます。後で使うために忘れずに保存してください ?
以上がネストされたオブジェクト内のパスを取得して検証する - util 関数 #2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。