js各种实际场景的使用案例合集（一）

1、filter()、some()、map()联合使用

场景1：遍历checkGroup数组的所有值，当值存在与allTagsList数组的任何一个对象的属性name值一样时，则将值对应的对象属性tagId存入一个新数组arr中

场景条件：

allTagsList = [

        { name:'dfbg', tagId:456, },

        { name:'bn', tagId:75, },

        { name:'nh', tagId:76, }

]

checkGroup = ['nh','dfbg']

场景结果：arr = [76,456]

代码示例：

let allTagsList = [  
    {  
        name: 'dfbg',  
        tagId: 456,  
    },  
    {  
        name: 'bn',  
        tagId: 75,  
    },  
    {  
        name: 'nh',  
        tagId: 76,  
    },  
];  
  
let checkGroup = ['nh', 'dfbg'];  
  
// 使用 filter() 和 some() 来实现  
let arr = allTagsList.filter(item => 
    checkGroup.some(name => item.name === name)
).map(item => item.tagId);  
  
console.log(arr); // 输出: [76, 456]

方法解析：

• filter()方法：用于创建一个新数组，测试 allTagsList 中的每个对象，是否满足某个条件
• some()方法：检查 filter() 中的每个对象与 checkGroup 数组中是否至少有一个元素与当前对象的name属性相等。如果some()返回true（即至少找到一个匹配的name），则 filter() 会保留这个对象
• map()方法：遍历 filter() 返回的数组，并提取每个对象的 tagId 属性，放入一个新的数组arr

2、递归遍历数组，获取指定层级对象，并进行特定操作

场景2：遍历arr数组，将depth属性值为2的对象的id等于指定变量ids1的对象插入新数组newArr2，将depth属性值为3的对象id等于指定变量ids2的对象插入新数组newArr3，

场景条件：

arr=[

{ name:'sfvg', depth:1, id:3, text:'gbfh', children:

        [

                { name:'gt', depth:2, id:13, text:'gbfh', children:

                [

                        { name:'yujnd', depth:3, id:16, text:'gbfh', }

                 ]

        }

] },

{ name:'tyyjr', depth:1, id:65, text:'unm', children:

        [

                { name:'brbtb', depth:2, id:19, text:'aervr', children:

                [

                        { name:'btyb', depth:3, id:75, text:'r', }

                ]

         }

] } ]

ids1=13

ids2=75

场景结果：

newArr2=[ { name:'gt', depth:2, id:13, text:'gbfh', children:[ { name:'yujnd', depth:3, id:16, text:'gbfh' } ] } ]

newArr3=[ { name:'btyb', depth:3, id:75, text:'r' } ]

代码示例：

// 原始数组
let arr = [...];  
let ids1 = 13;  
let ids2 = 75;  
let newArr2 = [];  
let newArr3 = [];  
  
function findObjects(objects, depthLists, parentId = null) {  
    objects.forEach(obj => {  
        if (obj.depth === 2 && obj.id === ids1) {  
            // 仅将depth为2且id匹配的对象添加到newArr2  
            // 注意：这里我们没有添加其子对象  
            newArr2.push({ ...obj, children: [] }); // 如果不想包含children，可以这样操作  
            // 如果要包含整个子树，则直接push原对象即可，无需修改children  
            // newArr2.push(obj);  
        } else if (obj.depth === 3 && obj.id === ids2) {  
            // 将depth为3且id匹配的对象添加到newArr3  
            newArr3.push(obj);  
        }  
  
        // 递归检查子对象  
        if (obj.children && obj.children.length > 0) {  
            findObjects(obj.children, depthLists, obj.id); // 这里的parentId可能用于更复杂的情况，但在这个简单示例中未使用  
        }  
    });  
}  
  
findObjects(arr, [newArr2, newArr3]); // 注意：depthLists参数在此示例中未使用，但为了保持函数通用性而保留  
  
console.log("newArr2:", newArr2);  
console.log("newArr3:", newArr3);

3、递归遍历数组，获取指定层级对象，放入新数组

场景3：遍历arr数组，将属性depth值为1的对象插入到数组alist，将属性depth值为2的对象插入到数组blist，将属性depth值为3的对象插入到数组clist

场景条件：

arr=[ {

        depth:1,

        children:[ {

                depth:2,

                children:[ {

                        depth:3

                 } ]

         } ]

}, {

        depth:1,

        children:[ {

                depth:2,

                children:[ {

                        depth:3,

                        text:'r'

                } ]

        } ]

}]

场景结果：

alist=[{ depth:1,children:[ { depth:2, children:[ { depth:3} ] } ]},{ depth:1,children:[ { depth:2, children:[ { depth:3,text:'r'} ] } ]}]

blist=[{ depth:2,children:[ { depth:3} ] },{ depth:2, children:[ { depth:3,text:'r'} ] }]

clist=[{ depth:3},{ depth:3,text:'r'}]

代码示例：

// 原始数据
let arr = [];  
  
let alist = [];  
let blist = [];  
let clist = [];  
  
function distributeObjects(objects, depthLists) {  
    objects.forEach(obj => {  
        // 根据depth将对象添加到相应的列表  
        switch (obj.depth) {  
            case 1:  
                depthLists[0].push(obj);  
                break;  
            case 2:  
                depthLists[1].push(obj);  
                break;  
            case 3:  
                depthLists[2].push(obj);  
                break;  
            // 可以添加更多的case来处理其他depth值  
        }  
  
        // 如果对象有children，则递归处理它们  
        if (obj.children && obj.children.length > 0) {  
            distributeObjects(obj.children, depthLists);  
        }  
    });  
}  
  
// 调用函数，传入arr和包含目标数组的数组  
distributeObjects(arr, [alist, blist, clist]);  
  
// 打印结果以验证  
console.log("alist:", alist);  
console.log("blist:", blist);  
console.log("clist:", clist);