JS 三分钟之 JS 常用代码段（三）

1. 日期格式化成字符串

Date.prototype.format = function(format) {
  const date = this;
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  // 填充0
  const padZero = (num) => (num < 10 ? `0${num}` : num);

  // 将日期格式化成字符串
  return format
    .replace(/yyyy/, year)
    .replace(/MM/, padZero(month))
    .replace(/dd/, padZero(day))
    .replace(/HH/, padZero(hours))
    .replace(/mm/, padZero(minutes))
    .replace(/ss/, padZero(seconds));
};

2. 过滤日期标识符

const filterDateIdentifiers = (f) => {
  return f.replace(/[a-zA-Z]/g, '');
};

3. 数组去重

const uniqueArray = (arr) => {
  return [...new Set(arr)];
};

4. 数组最大值和最小值

const arrayMinMax = (arr) => {
  return {
    max: Math.max(...arr),
    min: Math.min(...arr),
  };
};

5. 对象深拷贝

const deepCopy = (obj) => {
  return JSON.parse(JSON.stringify(obj));
};

6. 对象转 URL 参数

const objectToUrlParams = (obj) => {
  return Object.keys(obj).map((key) => `${key}=${obj[key]}`).join('&');
};

7. URL 参数转对象

const urlParamsToObject = (url) => {
  const params = {};
  const query = url.split('?')[1];
  const pairs = query.split('&');
  pairs.forEach((pair) => {
    const [key, value] = pair.split('=');
    params[key] = value;
  });
  return params;
};

8. 函数防抖

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

9. 函数节流

const throttle = (func, delay) => {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last < delay) {
      return;
    }
    last = now;
    func.apply(this, args);
  };
};

10. 验证邮箱格式

const isValidEmail = (email) => {
  const regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return regex.test(email);
};

11. 判断是否为质数

const isPrime = (num) => {
  if (num <= 1) {
    return false;
  }
  for (let i = 2; i <= Math.sqrt(num); i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return true;
};

12. 获取随机数

const getRandomInt = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};

13. 获取随机字符串

const getRandomString = (length) => {
  const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
};

14. DOM 操作 - 添加 class

const addClass = (element, className) => {
  element.classList.add(className);
};

15. DOM 操作 - 移除 class

const removeClass = (element, className) => {
  element.classList.remove(className);
};

16. DOM 操作 - 获取元素

const getElement = (selector) => {
  return document.querySelector(selector);
};

17. DOM 操作 - 创建元素

const createElement = (element) => {
  return document.createElement(element);
};

18. DOM 操作 - 插入元素

const insertElement = (parent, child) => {
  parent.appendChild(child);
};

19. DOM 操作 - 移除元素

const removeElement = (element) => {
  element.parentNode.removeChild(element);
};

20. AJAX 请求

const ajax = (url, method, data) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = () => {
      reject(xhr.statusText);
    };
    xhr.send(data);
  });
};

以上便是 20 个常用的 JavaScript 代码段，它们涵盖了从日期格式化到数组操作再到对象处理等各个方面，相信能够帮助你轻松应对各种开发场景，提升开发效率。