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

五秒法则

已于 2024-07-30 16:05:20 修改

阅读量78

点赞数 4

分类专栏： JavaScript进阶-数据算法篇文章标签： javascript 前端

于 2024-07-30 13:43:14 首次发布

本文链接：https://blog.csdn.net/qq_51478745/article/details/140734197

版权

JavaScript进阶-数据算法篇专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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：遍历merchantList数组每个值，当merchantList值等于数组list的value属性的值时，则将list的label插入到str字符串，每个label值用,隔开

场景条件：

merchantList=[23,43]

list=[{value:54,label:'测试1'},{value:23,label:'测试4'},{value:54,label:'测试46'},{value:43,label:'测试566'}]

场景结果：

str='测试4,测试566'

代码示例：
// 给定的数组  
const merchantList = [23, 43];  
const list = [  
  { value: 54, label: '测试1' },  
  { value: 23, label: '测试4' },  
  { value: 54, label: '测试46' },  
  { value: 43, label: '测试566' }  
];  
  
// 初始化结果字符串  
let str = '';  
  
// 遍历 merchantList  
merchantList.forEach(merchantId => {  
  // 查找 list 中 value 等于 merchantId 的对象  
  const foundItem = list.find(item => item.value === merchantId);  
    
  // 如果找到了匹配的对象，则将其 label 添加到 str 中  
  if (foundItem) {  
    // 如果 str 已经是空字符串或者不是以逗号结尾，则先添加一个逗号  
    if (str && !str.endsWith(',')) {  
      str += ',';  
    }  
    str += foundItem.label;  
  }  
});  
  
// 输出结果  
console.log(str); // 输出: "测试4,测试566"

2、页面动态滑动

场景1：点击按钮，动态下滑至指定目标

场景条件：滚动到页面模块2的位置

场景结果：

代码示例1：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
      margin-left: 20px;
    }
    .box1{
      width: 100px;
      height: 980px;
      background-color: rgb(245, 155, 155);
    }
    .box2{
      width: 100px;
      height: 1200px;
      background-color: antiquewhite;
    }
  </style>
</head>
<body>
  <button onclick="scrollToPosition()">到模块2</button>
  <div class="box1">模块1</div>
  <div id="target" class="box2">模块2</div>
  <script>
    function scrollToPosition() {
      window.scrollTo(0, 1000);
    }
  </script>
</body>
</html>

代码示例2：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
      margin-left: 20px;
    }
    .box1{
      width: 100px;
      height: 980px;
      background-color: rgb(245, 155, 155);
    }
    .box2{
      width: 100px;
      height: 1200px;
      background-color: antiquewhite;
    }
  </style>
</head>
<body>
  <button onclick="scrollToElement()">到模块2</button>
  <div class="box1">模块1</div>
  <div id="target" class="box2">模块2</div>
  <script>
    function scrollToElement() {  
      // 获取目标元素  
      var targetDom = document.getElementById("target");  
        
      // 滚动到该元素  
      // {behavior: "smooth"} 使得滚动变得平滑  
      targetDom.scrollIntoView({behavior: "smooth"});  
    }  
  </script>
</body>
</html>

3、此刻时间

场景1：动态获取当前实时的时间进行展示，格式为2024-03-05 12:35:01

场景结果：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #currentTime{
      font-size: 30px;
      font-weight: bolder;
    }
  </style>
</head>
<body>
  <div id="currentTime">加载中...</div>

  <script>
    function updateTime() {  
      // 创建一个新的Date实例，该实例包含了当前的日期和时间  
      var now = new Date();  
    
      // 格式化日期时间字符串  
      var formattedTime = now.getFullYear() + '-' +  
                          (('0' + (now.getMonth() + 1)).slice(-2)) + '-' +  
                          (('0' + now.getDate()).slice(-2)) + ' ' +  
                          (('0' + now.getHours()).slice(-2)) + ':' +  
                          (('0' + now.getMinutes()).slice(-2)) + ':' +  
                          (('0' + now.getSeconds()).slice(-2));  
    
      // 将格式化后的时间设置到页面元素中  
      document.getElementById('currentTime').textContent = formattedTime;  
    }
    // 页面加载完成后立即更新时间  
    updateTime();
    // 设置一个定时器，每隔1000毫秒（1秒）更新一次时间
    setInterval(updateTime, 1000);
  </script>
</body>
</html>