【前端常用函数】

前端常用函数

在前端开发中有许多除拷贝之外常见的函数，以下是一些分类介绍：

在前端开发中有许多除拷贝之外常见的函数，以下是一些分类介绍：

一、字符串处理函数

1. substring()
   • 功能：用于提取字符串中的一部分。它接受两个参数，起始索引（包含）和结束索引（不包含）。例如，let str = "Hello World"; let sub = str.substring(0, 5);，这里sub的值为"Hello"。
   • 应用场景：在处理用户输入的文本，如截取用户名的前几个字符用于显示缩略信息，或者从一段长文本中提取需要的部分内容。
2. split()
   • 功能：将一个字符串按照指定的分隔符拆分成一个数组。例如，let str = "apple,banana,orange"; let fruits = str.split(",");，此时fruits是一个包含["apple", "banana", "orange"]的数组。
   • 应用场景：常用于处理以特定格式（如CSV文件内容）存储的数据，将其分解为单个的数据项以便进一步处理，如数据的遍历和展示。
3. replace()
   • 功能：用于在字符串中用一些字符替换另一些字符。它可以接受一个字符串或者一个正则表达式作为第一个参数来匹配要替换的内容，第二个参数是替换后的内容。例如，let str = "Hello World"; let newStr = str.replace("World", "Universe");，newStr的值为"Hello Universe"。
   • 应用场景：在文本编辑应用中，用于实时替换用户输入的文本内容中的某些字词，或者在处理从后端获取的数据时，对不符合前端显示要求的文本进行修正。

二、数组处理函数

1. map()
   • 功能：对数组中的每个元素进行操作，并返回一个新的数组，新数组的元素是操作后的结果。例如，let numbers = [1, 2, 3]; let doubled = numbers.map((num) => num * 2);，doubled的值为[2, 4, 6]。
   • 应用场景：在数据展示中，将原始数据进行格式转换，如将一组以厘米为单位的长度数据转换为以英寸为单位的数据用于显示。
2. filter()
   • 功能：用于筛选数组中的元素，返回一个新的数组，其中包含满足指定条件的元素。例如，let numbers = [1, 2, 3, 4, 5]; let evenNumbers = numbers.filter((num) => num % 2 === 0);，evenNumbers的值为[2, 4]。
   • 应用场景：在处理用户列表时，筛选出符合特定条件（如活跃用户、高级会员用户等）的用户信息进行单独展示。
3. reduce()
   • 功能：对数组中的所有元素进行累积计算，返回一个最终的值。例如，let numbers = [1, 2, 3, 4, 5]; let sum = numbers.reduce((acc, cur) => acc + cur, 0);，sum的值为15。
   • 应用场景：在计算购物车中商品的总价，或者统计一组数据的平均值等场景中使用。

三、事件处理函数

1. addEventListener()
   • 功能：用于在DOM（文档对象模型）元素上添加事件监听器。它接受事件类型（如"click"、"mouseover"等）和事件处理函数作为参数。例如，let button = document.getElementById("myButton"); button.addEventListener("click", function() { console.log("Button clicked"); });
   • 应用场景：在网页中响应用户的交互操作，如按钮点击、鼠标移动等，实现动态交互效果，如展开/折叠菜单、显示/隐藏元素等。

四、DOM操作函数

1. document.createElement()
   • 功能：用于在文档中创建一个新的HTML元素。例如，let newDiv = document.createElement("div"); newDiv.textContent = "This is a new div";，创建了一个新的div元素并设置了其文本内容。
   • 应用场景：在动态生成页面内容时使用，如根据用户的操作动态添加新的列表项、表格行或者整个模块等。
2. appendChild()
   • 功能：将一个节点添加到指定父节点的子节点列表的末尾。例如，let parent = document.getElementById("parentDiv"); let child = document.createElement("p"); parent.appendChild(child);，将新创建的p元素添加到id为parentDiv的元素内部。
   • 应用场景：用于构建页面的布局结构，如在一个容器元素中添加多个子元素，像在导航栏中添加菜单项，或者在图片库中添加新的图片元素等。

五、防抖节流

防抖函数（Debounce Function）：

以下是一个使用 JavaScript 实现的防抖函数的示例：

function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

代码解释和使用说明：

1. debounce函数的定义：
   • 这个函数接受两个参数：func 是要执行的原函数，delay 是延迟的时间（以毫秒为单位）。
   • 它内部使用了一个 timer 变量，用于存储 setTimeout 的返回值，以便后续进行清除操作。
2. 返回的匿名函数：
   • 当调用 debounce 函数返回的匿名函数时，首先使用 clearTimeout(timer) 清除之前设置的定时器。
   • 然后使用 setTimeout 创建一个新的定时器，在 delay 毫秒后调用 func 函数。
   • func.apply(this, args) 确保 func 函数在原有的上下文环境中运行，并且使用传入的 args 作为参数。

使用示例：

function handleResize() {
  console.log('Window resized');
}

const debouncedResize = debounce(handleResize, 300);

window.addEventListener('resize', debouncedResize);

在上述示例中，当调用 debouncedResize 函数时，如果在 300 毫秒内再次调用，之前的定时器会被清除，新的定时器会被设置。这样可以避免 handleResize 函数在短时间内被多次触发，只有在最后一次调用后的 300 毫秒没有新的调用时，handleResize 函数才会执行。

应用场景：

• 滚动事件处理：在滚动事件中，可能会频繁触发事件处理函数，使用防抖函数可以避免频繁执行性能消耗大的操作，如复杂的计算、网络请求等。
• 输入框输入事件处理：在输入框中输入内容时，可能会不断触发 input 事件，使用防抖函数可以避免在用户输入过程中频繁发送请求，只在用户输入暂停一段时间后发送请求。

节流函数（Throttle Function）：

以下是一个使用 JavaScript 实现的节流函数的示例：

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

代码解释和使用说明：

1. throttle函数的定义：
   • 该函数接受 func（要执行的原函数）和 limit（时间限制，以毫秒为单位）作为参数。
   • inThrottle 是一个标志变量，用于表示是否在节流状态。
2. 返回的匿名函数：
   • 当调用 throttle 函数返回的匿名函数时，如果 inThrottle 为 false，说明不在节流状态，此时会调用 func 函数，并且将 inThrottle 设为 true。
   • 同时设置一个 setTimeout，在 limit 毫秒后将 inThrottle 设为 false，允许再次调用 func 函数。

使用示例：

function handleScroll() {
  console.log('Scrolled');
}

const throttledScroll = throttle(handleScroll, 200);

window.addEventListener('scroll', throttledScroll);

在上述示例中，handleScroll 函数在 200 毫秒内只会执行一次，即使 scroll 事件多次触发，也会被节流，避免了频繁执行。

应用场景：

• 鼠标移动事件处理：在鼠标移动事件中，使用节流函数可以减少事件处理函数的执行频率，例如在实现拖拽功能时，减少频繁的位置更新计算。
• 滚动事件处理：类似于防抖函数，但节流函数会按一定的时间间隔执行，而不是等待用户停止操作后执行。

这两种函数可以有效地优化前端性能，特别是在处理频繁触发的事件时，可以避免不必要的性能开销。

六、时间

1. 12 小时制的显示问题（带有 AM/PM）
   • 应用场景：如果要按照 12 小时制来显示时间并且区分上午和下午
   • 代码：

function divideDayWith12HourFormat() {
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    let amPm = hours >= 12? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours === 0? 12 : hours;
   
    console.log(`${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${amPm}`);
    if (amPm === 'AM') {
        console.log("上午");
    } else {
        console.log("下午");
    }
}
divideDayWith12HourFormat();