快捷導(dǎo)航

使用JavaScript遞歸函數(shù)封裝一個(gè)超級(jí)實(shí)用的轉(zhuǎn)換場(chǎng)景

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

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

場(chǎng)景

我相信很多同學(xué)都遇到過這樣的場(chǎng)景，如果一個(gè)數(shù)組中有一個(gè)name字段，但是我們?cè)谑褂玫臅r(shí)候需要的是title字段。如示例代碼：

const list = [{ name: '張三' }];
// 轉(zhuǎn)換為
const list = [{ title: '張三' }];

map方法

這是我們最簡(jiǎn)單的方式，直接用map方法返回一個(gè)新數(shù)組即可，相當(dāng)簡(jiǎn)單；但是我們?cè)谙胍幌?，如果每一個(gè)對(duì)象還有一個(gè)children子數(shù)組呢？這種情況map就不太好處理了。帶著這個(gè)考慮繼續(xù)往下看，這兒就不做太多介紹因?yàn)檫@太簡(jiǎn)單了。

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

單場(chǎng)景版本

大家看以下代碼場(chǎng)景都寫了注釋的；

主要邏輯就是根據(jù)新值和舊值進(jìn)行綁定然后賦值修改。然后我們?cè)诳紤]這么一個(gè)場(chǎng)景？如果list里面的name在obj中，這種場(chǎng)景我們有應(yīng)該怎么做？

const list = [
{
  name: '張三',
  id: 6,
  children: [
    { name: '張三-第一個(gè)兒子', id: 1 },
    { name: '張三-第二個(gè)兒子', id: 2 },
  ]
},
{
  name: '李四',
  id: 5,
  children: [
    { name: '李四-第一個(gè)兒子', id: 3 },
    { name: '李四-第二個(gè)兒子', 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++) {
  // 保存一個(gè)對(duì)象
  let propsItem = {};
  // 遍歷修改值
  for (const key in props) {
    if (!list[i][props[key]]) continue;
    propsItem[key] = list[i][props[key]];
  }
  data.push(propsItem);
  // 如果子級(jí)是一個(gè)數(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);

適應(yīng)絕大部門場(chǎng)景封裝

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

const list = [
    {
        id: 6,
        obj: { name: '張三' },
        children: [
            { obj: { name: '張三-第一個(gè)兒子', }, id: 1 },
            { obj: { name: '張三-第二個(gè)兒子', }, id: 2 },
        ]
    },
    {
        obj: { name: '李四' },
        id: 5,
        children: [
            { obj: { name: '李四-第一個(gè)兒子', }, id: 1 },
            { obj: { name: '李四-第二個(gè)兒子', }, 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++) {
        // 保存一個(gè)對(duì)象
        let propsItem = {};
        // 遍歷修改值
        for (const key in props) {
            // 將字符串轉(zhuǎn)為數(shù)組
            const propsKey = props[key].toString().split('.');
            // 如果數(shù)組大于等于2取其對(duì)象里面的值，反之直接拿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)
        // 如果子級(jí)是一個(gè)數(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);

到此這篇關(guān)于使用JavaScript遞歸函數(shù)封裝一個(gè)超級(jí)實(shí)用的轉(zhuǎn)換場(chǎng)景的文章就介紹到這了,更多相關(guān)JavaScript遞歸函數(shù)封裝轉(zhuǎn)換場(chǎng)景內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: