蓝桥杯web备赛----js篇

3、js

题目：

1、请在 index.js 文件中根据现有 DOM 结构（页面布局部分不能做任何修改操作）实现选项卡动态切换功能。

就是获取元素，然后给元素绑定事件

 const tabs = document.querySelectorAll('.tabs > div');
  const contents = document.querySelectorAll('#content > div');

获取tab或者是content下面的div

  tabs[i].addEventListener('click', function() {
          // 移除所有选项卡和内容的active类
          for (let k = 0; k < tabs.length; k++) {
              tabs[k].classList.remove('active');
              contents[k].classList.remove('active');
          }
          // 为当前点击的选项卡和对应的内容添加active类
          tabs[i].classList.add('active');
          contents[i].classList.add('active');
      });

绑定事件，移除active类，添加active类

2、手搓防抖

原理：n 秒后再执行某个函数，若该函数在 n 秒内被重复触发，则重新计时。

代码：

function debounce(fn, delay = 0) {
  // TODO: 在这里写入具体的实现逻辑
  // 返回一个新的防抖函数
  // 即使函数在 delay 时间段内多次被调用，也只会在最后一次函数被调用的 delay 时间结束后执行
  // 防抖函数
  let timer;
  return function(e){
    if(timer){
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.call(this , e);
    } , delay);
  }
}

返回的新的防抖函数：

如果在它之前有防抖函数，就会消除，再创建一个防抖函数(若该函数在 n 秒内被重复触发，则重新计时)

fn.call(this, e)，确保了函数 fn 在正确的上下文（this）和事件对象（e）下执行

3、遍历的方法：

遍历数组

1. for循环

   for (let i = 0; i < array.length; i++) {
     console.log(array[i]);
   }
   

2. forEach

   array.forEach(function(element, index, array) {
     console.log(element);
   });
   

3. for…of

   for (let element of array) {
     console.log(element);
   }
   

4. map

   array.map(function(element, index, array) {
     return element * 2; // 返回新数组，每个元素乘以2
   });
   

   1. filter：return`

   array.filter(function(element, index, array) {
     return element > 10; // 返回新数组，包含大于10的元素
   });
   

5. reduce

   array.reduce(function(accumulator, currentValue, currentIndex, array) {
     return accumulator + currentValue; // 计算数组总和
   }, 0)；
   

4、正则表达式

/¹+(.[0-9]+)*$/

解释：

• ^ 表示字符串的开始。
• [0-9]+ 表示字符串必须以一个或多个数字开始。
• (\.[0-9]+)* 表示字符串可以包含零个或多个由点号 . 分隔的数字序列。这里，. 需要被转义，因为在正则表达式中 . 表示任意字符。
• $ 表示字符串的结束。
• 以0-9开始加.后面多个0-9.

5、添加以及删除元素