props中的children屬性 組件標簽只用有子節點的時候,props就會有該屬性; children的屬性跟props一樣的,值可以是任意值;(文本,React元素,組件,函數) 組件: <ClassCom> 傳遞的數據 </ClassCom> 這樣的組件標簽中就會有子節點 props中的ch ...
/** * @param {Array} dataList 完整數據(必傳) * @param {Sting/Int} keyName 對哪個欄位進行與targetID對比(必傳) * @param {Sting/Int} targetID 目標數據的唯一標識符(必傳) * @param {Sting/Int} fieldName 目標數據的某個欄位的欄位名(可預設) * @return {Object/String/Int/Array} 返回的目標數據, 目標數據類型根據 fieldName 欄位的類型確定,預設返回Object */ function functionRecursive({ dataList, keyName, targetID, fieldName }) { let target_data = {} let targetID_type = ['string', 'number'] if (!Array.isArray(dataList) || !dataList.length) { alert('傳入的數據格式需為數組且不能為空...') return target_data } if (!keyName || typeof keyName !== 'string') { alert('未傳入對比欄位名稱...') return target_data } if (!targetID) { alert('未傳入目標數據的唯一標識符...') return target_data } let ID_type = typeof targetID if (!targetID_type.includes(ID_type)) { alert('目標數據唯一標識符應為數字或字元串...') return target_data } // 遞歸過程 let get_target_data = item => { if (item[keyName] == targetID) { target_data = item } else { if (item.children && item.children.length) { for (let i = 0; i < item.children.length; i++) { if (Object.keys(target_data).length) break // 如果已經找到了目標數據,記得break get_target_data(item.children[i]) } } } } // for迴圈傳入的 dataList 數據並開始遞歸 for (let i = 0; i < dataList.length; i++) { if (Object.keys(target_data).length) break // 同上 get_target_data(dataList[i]) } // 返回目標數據 if (fieldName && typeof fieldName == 'string') { if (target_data.hasOwnProperty(fieldName)) { return target_data[fieldName] } else { alert('欄位名應為字元串或目標數據中無此欄位...') return {} } } else { return target_data } } export default functionRecursive
調用示例(找到 this.tree_data 中 id 欄位值為 13 的數據): let data = { dataList: this.tree_data, keyName: 'id', targetID: 13, fieldName: '', } console.time('run-time') let target_data = functionRecursive(data) console.timeEnd('run-time') console.log(target_data) // 目標數據
ps:this.tree_data數據參考上一篇文章。