因為在開發中需要用到省市區資料，但是后端只回傳最里層城市的code值
頻繁百度找不到很好的方法，很多都是寫了好幾個方法去呼叫，并且多次呼叫導致很難理解；
這里分享一下我根據自己的思路所完成的一個方法，
（方法未經過長久測驗，會有未知bug，并且可能會在不同資料體下也會有誤差！）
廢話：
在城市資料中我們知道，基本由以下三個欄位構成：code、name、children
code是省市區的唯一代碼，name則是省市區的名稱，children則是省市區下的子項，
我們在只查找回傳code對應的省市區的名稱時很簡單，普通的遞回就可以實作；
但是如果我們也想要去獲取上一層的資料，該怎么拿呢？
思路：
很簡單，在遞回中，除了第一層的回圈，內回圈均向下傳入父級資料，
第一層回圈不傳入是因為如果不打斷，就會卡死回圈，
這個時候我們只能拿到兩層資料，當前級和上一級，
那如果還想往上查找，還記得我們傳入的父級資料嗎，父級的code就起到了作用
重復呼叫遞回方法，注意，此時呼叫必須傳入源資料，也就是一開始的那一大串資料，這個時候呼叫查找到的就是父級的code和name
方法會一直回圈遍歷查詢，直到已經達到最外層，
我們把我們所需要的資料用一個陣列存放起來，并且return出去，
代碼：
/**
* 根據code查詢城市
* 并查出所有父級
* 原理 ===>
* 通過遞回查找code與傳入code相同
* 且在查找相同code的同時，將上級內容傳遞進下級回圈中
* 如果code相同了，上級內容自然就能拿到
* 因為不知道有多少個上級
* 所以在查找到之后繼續進行遞回源資料（這里注意，并不是當前回圈資料，而是最根本的資料）
* 這個時候不需要傳遞當前級的內容，否則無限回圈卡死
*/
function getArea(json, code) {
let names = [];
let codes = [];
function findCity(list, code, father) {
const index = list.findIndex(ev => ev.code == code);
if (index > -1) {
const child = list[index];
names.unshift(child.name);
codes.unshift(child.code);
father && names.unshift(father.name) && codes.unshift(father.code);
father && findCity(json || [], father.code);
return;
}
list.map(item => {
if (item.children) {
findCity(item.children || [], code, item);
}
})
}
findCity(json, code);
names = [...new Set(names)];
codes = [...new Set(codes)];
return { codes, names };
}
const list = getArea(cityJson, parseInt(code));
console.log(list);轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301292.html
標籤：其他
下一篇：canvas畫圖簡單版