使用JavaScript遞歸函數(shù)封裝一個超級實用的轉換場景

更新時間：2024年11月01日 08:21:48 作者：前端霧戀

這篇文章主要為大家詳細介紹了如何使用JavaScript遞歸函數(shù)封裝一個超級實用的轉換場景,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下

場景

我相信很多同學都遇到過這樣的場景，如果一個數(shù)組中有一個name字段，但是我們在使用的時候需要的是title字段。如示例代碼：

const list = [{ name: '張三' }];
// 轉換為
const list = [{ title: '張三' }];

map方法

這是我們最簡單的方式，直接用map方法返回一個新數(shù)組即可，相當簡單；但是我們在想一想，如果每一個對象還有一個children子數(shù)組呢？這種情況map就不太好處理了。帶著這個考慮繼續(xù)往下看，這兒就不做太多介紹因為這太簡單了。

const list = [{ name: '張三' }];
console.log(list.map(v=>{
return { title: v.name }
}));

單場景版本

大家看以下代碼場景都寫了注釋的；

主要邏輯就是根據(jù)新值和舊值進行綁定然后賦值修改。然后我們在考慮這么一個場景？如果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值是生成新數(shù)組的值，value是舊數(shù)組的值
* */
function recursion(list, props) {
let data = [];
// 如果不是數(shù)據(jù)或者props為空就直接返回
if (!Array.isArray(list) || !props) return list; 
// .遍歷數(shù)組
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);
  // 如果子級是一個數(shù)組就遞歸賦值
  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);

適應絕大部門場景封裝

我們查看以下示例的代碼可以發(fā)現(xiàn)，不論是拿去對象內(nèi)對象的值還是對象里面的值都是可以的，基本上適用于絕大部分該類場景。大家在查看的時候可以針對代碼多看看都是有注釋的。

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值是生成新數(shù)組的值，value是舊數(shù)組的值
* */
function recursion(list, props) {
    let data = [];
    // 如果不是數(shù)據(jù)或者props為空就直接返回
    if (!Array.isArray(list) || !props) return list;
    // .遍歷數(shù)組
    for (let i = 0; i < list.length; i++) {
        // 保存一個對象
        let propsItem = {};
        // 遍歷修改值
        for (const key in props) {
            // 將字符串轉為數(shù)組
            const propsKey = props[key].toString().split('.');
            // 如果數(shù)組大于等于2取其對象里面的值，反之直接拿key值
            const propsChild = propsKey.length >= 2 ? list[i][propsKey[0]][propsKey[1]] :
                propsKey.length === 1 ? list[i][propsKey[0]] : null;
            // 如果為空跳槽循環(huán)
            if (!propsChild) continue;
            propsItem[key] = propsChild;
        }
        data.push(propsItem)
        // 如果子級是一個數(shù)組就遞歸賦值
        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遞歸函數(shù)封裝一個超級實用的轉換場景的文章就介紹到這了,更多相關JavaScript遞歸函數(shù)封裝轉換場景內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: