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

1、两个数组的交集

场景1：找出两个数组arr1的activityProdId值存在在arr2中，如果存在则放入新数组arr3中

场景条件：

arr1=[

        { activityProdId:23, name:"06", },

        { activityProdId:56, name:"07", },

        { activityProdId:78, name:"08", }

]

arr2=[26,23,34,3,8,78,4,7,75]

场景结果：

arr3=[23,78]

代码示例：

let arr1 = [  
  {  
    activityProdId: 23,  
    name: "06",  
  },  
  {  
    activityProdId: 56,  
    name: "07",  
  },  
  {  
    activityProdId: 78,  
    name: "08",  
  },  
];  
  
let arr2 = [26, 23, 34, 3, 8, 78, 4, 7, 75];  
let arr3 = [];  
  
// 遍历arr1  
arr1.forEach(item => {  
  // 检查arr2是否包含当前元素的activityProdId  
  if (arr2.includes(item.activityProdId)) {  
    // 如果包含，则将该activityProdId添加到arr3中  
    arr3.push(item.activityProdId);  
  }  
});  
  
console.log(arr3); // 输出: [23, 78]

场景2：遍历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、递归遍历数组，对指定层级对象进行特定操作

场景1：深度遍历arr数组，当存在对象depth属性的值为3时，立即return出去

场景条件：

arr=[

        { id:1, depth:1, children:[ { depth:2, children:null }, { depth:2, children:{ depth:3, children:null } }, ] },

        { id:2 depth:1, children:[ { depth:2, children:{ depth:3, children:null }, }, { depth:2, children:null }, ] }

]

代码示例：

function findDepthThree(arr) {  
  for (let item of arr) {  
    if (item.depth === 3) {  
      return true; // 立即返回true，因为找到了depth为3的对象  
    }  
    if (item.children && Array.isArray(item.children)) {  
      // 递归检查children数组中的每个元素  
      if (findDepthThree(item.children)) {  
        return true; // 如果在children中找到了depth为3的对象，则立即返回true  
      }  
    }  
  }  
  return false; // 如果没有找到depth为3的对象，则返回false  
}  
  
// 示例数组  
const arr = [  
  {  
    id: 1,  
    depth: 1,  
    children: [  
      { depth: 2, children: null },  
      {  
        depth: 2,  
        children: [
          {
            depth: 3,  
            children: null  
          }
        ]
      },  
    ]  
  },  
  {  
    id: 2, // 注意：这里缺少了一个逗号  
    depth: 1,  
    children: [  
      {  
        depth: 2,  
        children: [{  
          depth: 3,  
          children: null  
        }],  
      },  
      { depth: 2, children: null },  
    ]  
  },  
];  
// 调用函数  
console.log(findDepthThree(arr));//true

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

场景条件：

arr=[

{ name:'sfvg&