使用JavaScript递归函数封装一个超级实用的转换场景
作者：前端雾恋
这篇文章主要为大家详细介绍了如何使用JavaScript递归函数封装一个超级实用的转换场景,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
场景
我相信很多同学都遇到过这样的场景，如果一个数组中有一个name字段，但是我们在使用的时候需要的是title字段。如示例代码：
const list = [{ name: '张三' }];
// 转换为
const list = [{ title: '张三' }];
map方法
这是我们最简单的方式，直接用map方法返回一个新数组即可，相当简单；但是我们在想一想，如果每一个对象还有一个children子数组呢？这种情况map就不太好处理了。 带着这个考虑继续往下看，这儿就不做太多介绍因为这太简单了。
const list = [{ name: '张三' }];
console.log(list.map(v=>{
return { title: v.name }
}));
单场景版本
大家看以下代码场景都写了注释的；
主要逻辑就是根据新值和旧值进行绑定然后赋值修改。然后我们在考虑这么一个场景？如果list里面的name在obj中，这种场景我们有应该怎么做？
const list = [
{
name: '张三',
id: 6,
children: [
{ name: '张三-第一个儿子', id: 1 },
{ name: '张三-第二个儿子', id: 2 },
]
},
{
name: '李四',
id: 5,
children: [
{ name: '李四-第一个儿子', id: 3 },
{ name: '李四-第二个儿子', id: 4 },
]
}
];
/**
* props 示例: { title: 'name', children: 'children' }，
* key值是生成新数组的值，value是旧数组的值
* */
function recursion(list, props) {
let data = [];
// 如果不是数据或者props为空就直接返回
if (!Array.isArray(list) || !props) return list;
// .遍历数组
for (let i = 0; i < list.length; i++) {
// 保存一个对象
let propsItem = {};
// 遍历修改值
for (const key in props) {
if (!list[i][props[key]]) continue;
propsItem[key] = list[i][props[key]];
}
data.push(propsItem);
// 如果子级是一个数组就递归赋值
if (propsItem.children && Array.isArray(propsItem.children)) {
data[i]['children'] = recursion(propsItem.children, props);
}
};
return data;
};
const res = recursion(list, {
title: 'name',
children: 'children'
});
console.log('66', res);
适应绝大部门场景封装
我们查看以下示例的代码可以发现，不论是拿去对象内对象的值还是对象里面的值都是可以的，基本上适用于绝大部分该类场景。大家在查看的时候可以针对代码多看看都是有注释的。
const list = [
{
id: 6,
obj: { name: '张三' },
children: [
{ obj: { name: '张三-第一个儿子', }, id: 1 },
{ obj: { name: '张三-第二个儿子', }, id: 2 },
]
},
{
obj: { name: '李四' },
id: 5,
children: [
{ obj: { name: '李四-第一个儿子', }, id: 1 },
{ obj: { name: '李四-第二个儿子', }, id: 2 },
]
}
];
/**
* props 示例: { title: 'obj.name', children: 'children' }，
* key值是生成新数组的值，value是旧数组的值
* */
function recursion(list, props) {
let data = [];
// 如果不是数据或者props为空就直接返回
if (!Array.isArray(list) || !props) return list;
// .遍历数组
for (let i = 0; i < list.length; i++) {
// 保存一个对象
let propsItem = {};
// 遍历修改值
for (const key in props) {
// 将字符串转为数组
const propsKey = props[key].toString().split('.');
// 如果数组大于等于2取其对象里面的值，反之直接拿key值
const propsChild = propsKey.length >= 2 ? list[i][propsKey[0]][propsKey[1]] :
propsKey.length === 1 ? list[i][propsKey[0]] : null;
// 如果为空跳槽循环
if (!propsChild) continue;
propsItem[key] = propsChild;
}
data.push(propsItem)
// 如果子级是一个数组就递归赋值
if (propsItem.children && Array.isArray(propsItem.children)) {
data[i]['children'] = recursion(propsItem.children, props);
}
};
return data;
};
const res = recursion(list, {
title: 'obj.name',
children: 'children'
});
console.log('66', res);到此这篇关于使用JavaScript递归函数封装一个超级实用的转换场景的文章就介绍到这了,更多相关JavaScript递归函数封装转换场景内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！