使用场景:
使用的layui 树形组件,这个组件需要一个数据源,名称显示默认是title,而后台返回的数据对应项为name,所以想把后台返回数据中的name换成title。于是封装了一个方法,可以随意的替换我们想要替换的属性名
修改之前的数据是:
const packages = [ { id: '641a1690-6c8b-4ada-ae97-8d82cc4fe7a3', name: 'com.sample', children: { id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f', name: 'child.computer.com', children: { id: 'e4ab-4a86-0f66cc32f560', name: 'child.com' } } }, { id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f560', name: 'computer.com' }, { id: 'ca7f972e-64ee-4cb0-80b9-1036fac69d32', name: 'java.util' } ];
想要的效果是:
{ key: '641a1690-6c8b-4ada-ae97-8d82cc4fe7a3', title: 'com.sample', children: { key: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f', title: 'child.computer.com', children: { key: 'e4ab-4a86-0f66cc32f560', title: 'child.com' } } }
实现的方法:递归实现
检查来自Object#entries()
调用的[key-value]对的值是否为对象。
如果是这样,请再次递归调用transformObj
函数以获取该值。否则按原样返回值。
最后使用[key-value]将[key-value]对数组转换回一个对象:
const packages = [{ id: '641a1690-6c8b-4ada-ae97-8d82cc4fe7a3', name: 'com.sample', children: { id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f', name: 'child.computer.com', children: { id: 'e4ab-4a86-0f66cc32f560', name: 'child.com' }}}, { id: 'd7384f60-e4ab-4a86-8e2e-0f66cc32f560', name: 'computer.com' }, { id: 'ca7f972e-64ee-4cb0-80b9-1036fac69d32', name: 'java.util' }]; const replacer = { "id": "key", "name" :"title"}; const transformObj = (obj) => { if(obj && Object.getPrototypeOf(obj) === Object.prototype){ return Object.fromEntries( Object.entries(obj) .map(([k, v]) => [replacer[k] || k, transformObj(v)]) ); } //Base case, if not an Object literal return value as is return obj; } console.log(packages.map(o => transformObj(o)));