更新注:项目中代码已重构,更清晰规范,如有帮助请 star。
起因
省市区联动,或者城市名称匹配,是很常用的功能。在实现他们的时候,经常会出现这样的情况:拿到的行政区划数据 和 渲染所需要的结构 不相符。通常我会用JS把它们处理成合适的结构。
核心思路
遍历其子元素或属性,在遍历的回调函数中,通过临时对象,将数据重新组织成需要的结构,再将其push进一个新构建的数组中。遍历完成后,该数组就是想要的最后结果。
两种套路:数组 VS 对象。
对于数组和对象,有不同的遍历方式。
-
对于数组,视情况可用
map()
,forEach()
,filter()
等方法; -
对于对象,可以结合使用
for in
与Object.keys()
来遍历其属性。
注:
Object.keys()
可以返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。
例子
1 数组:
test.js
const fs = require('fs')
//现有如下数组
const province = [{"code":"110000","name":"北京市"},{"code":"120000","name":"天津市"},{"code":"130000","name":"河北省"},{"code":"140000","name":"山西省"},{"code":"150000","name":"内蒙古自治区"},{"code":"210000","name":"辽宁省"},{"code":"220000","name":"吉林省"},{"code":"230000","name":"黑龙江省"},{"code":"310000","name":"上海市"},{"code":"320000","name":"江苏省"},
... ...
]
//用于放结果的空数组
let finalProvince = []
//要把数组改成这种格式
// let options = [{
// value: '123435',
// label: 'Zhejiang',
// isLeaf: false,
// }, {
// value: 'jiangsu',
// label: 'Jiangsu',
// isLeaf: false,
// }];
province.map(
item => {
let tempObj = {}
tempObj.label = item.name
tempObj.value = item.code
tempObj.isLeaf = false
finalProvince.push(tempObj)
}
);
console.log(finalProvince);
fs.writeFile('temp.js', JSON.stringify(finalProvince), (err) => {
if (err) throw err;
console.log('The file has been saved!');
})
运行
node test.js
temp.js
中得到所需的json格式的文件