/* 实现数据的平铺
flatten*/
const options = [
{
value: "330000",
label: "浙江省",
children: [
{
value: "330100",
label: "杭州市",
children: [
{
value: "330106",
label: "西湖区",
},
{
value: "330107",
label: "余杭区",
},
],
},
{
value: "330200",
label: "温州市",
children: [
{
value: "330206",
label: "龙湾区",
},
],
},
],
},
{
value: "120000",
label: "新疆维吾尔自治区",
children: [
{
value: "120100",
label: "博尔塔拉蒙古自治州",
children: [
{
value: "120111",
label: "阿拉山口市",
},
],
},
],
},
];
/**
* 实现函数平铺上面的树形结构,预期结果如下:flattenTree(options)
[
[{ "value": "330000", "label": "浙江省"},{ "value": "330100", "label": "杭州市",},{ "value": "330106", "label": "西湖区"}],
[{ "value": "330000", "label": "浙江省",},{ "value": "330100", "label": "杭州市",},{ "value": "330107", "label": "余杭区"}],
[{ "value": "330000", "label": "浙江省",},{ "value": "330200", "label": "温州市",},{ "value": "330206", "label": "龙湾区"}],
[{ "value": "120000", "label": "新疆维吾尔自治区",},{ "value": "120100", "label": "博尔塔拉蒙古自治州",},{ "value": "120111", "label": "阿拉山口市"}]
]
*/
// console.log( options )
/* 实现数据的平铺
可能会有非常多条件的判断 */
var arr = []
/* options 第一次进入是一个数组
options这个值 既可以是数组又可以是对象*/
function flattenTree(options, list) {
// 只在第一次函数执行 后面不会执行了 根据数据创建对应的分组
// 第一次执行 只是为了新建浙江和新疆这两个数组
if (arr.length == 0) {
// 遍历数组 遍历出两个对象
for (let i = 0; i < options.length; i++) {
if (!arr[i]) arr[i] = [];//创建list
// options第二次进入是一个对象
flattenTree(options[i], arr[i]);
}
}
// 第一次执行 根本不会执行这一句 第二次执行时 递归执行时 这个时候list是有值的了
if (list) {
list.push({
value: options.value,
label: options.label,
})
if (!options.children) return;
for (let j = 0; j < options.children.length; j++) {
flattenTree(options.children[j], list)
}
}
// console.log(arr)
}
flattenTree(options)
/*
1、先将数据的结构看懂 , 也就是先将题或者需求给它看懂;
*/
console.log(arr);
// localStorage.setItem('maplist', JSON.stringify(arr))
let list1 = [
[
{ "value": "330000", "label": "浙江省" },
{ "value": "330100", "label": "杭州市" },
{ "value": "330106", "label": "西湖区" },
{ "value": "330107", "label": "余杭区" },
{ "value": "330200", "label": "温州市" },
{ "value": "330206", "label": "龙湾区" }
],
[
{ "value": "120000", "label": "新疆维吾尔自治区" },
{ "value": "120100", "label": "博尔塔拉蒙古自治州" },
{ "value": "120111", "label": "阿拉山口市" }
]
]
console.log(options)
递归处理数据,进行数据扁平化
最新推荐文章于 2023-08-07 19:50:24 发布