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);

总结

别因今天的懒惰，让明天的您后悔。输出文章的本意并不是为了得到赞美，而是为了让自己能够学会总结思考；当然，如果有幸能够给到你一点点灵感或者思考，那么我这篇文章的意义将无限放大。