20 个实用 JavaScript 代码片段 助力成为卓越开发者

在 JavaScript 的广阔世界中，掌握一些实用的代码片段能够极大地提升开发效率和代码质量。以下为您精心整理了 20 个实用的 JavaScript 代码片段，助您在开发之路上更进一步。

1. 数组去重

function uniqueArray(arr) {
  return Array.from(new Set(arr));
}

2. 数组排序

function sortArray(arr) {
  return arr.sort((a, b) => a - b);
}

3. 字符串反转

function reverseString(str) {
  return str.split('').reverse().join('');
}

4. 检查对象是否为空

function isEmptyObject(obj) {
  return Object.keys(obj).length === 0;
}

5. 生成随机数

function generateRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

6. 深拷贝对象

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

7. 计算数组元素之和

function sumArray(arr) {
  return arr.reduce((a, b) => a + b, 0);
}

8. 检查数组是否包含某个元素

function containsElement(arr, element) {
  return arr.includes(element);
}

9. 获取数组中的最大值

function getMaxInArray(arr) {
  return Math.max(...arr);
}

10. 获取数组中的最小值

function getMinInArray(arr) {
  return Math.min(...arr);
}

11. 防抖函数

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

12. 节流函数

function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    let now = new Date().getTime();
    if (now - lastCall > delay) {
      func.apply(this, args);
      lastCall = now;
    }
  };
}

13. 格式化日期

function formatDate(date, format) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  format = format.replace('yyyy', year);
  format = format.replace('MM', month);
  format = format.replace('dd', day);
  format = format.replace('HH', hours);
  format = format.replace('mm', minutes);
  format = format.replace('ss', seconds);

  return format;
}

14. 简单的事件委托

document.addEventListener('click', function(event) {
  if (event.target.matches('.clickable')) {
    // 执行相应操作
  }
});

15. 轮询函数

function poll(callback, delay, timeout) {
  let timer;
  let startTime = new Date().getTime();

  function pollInternal() {
    callback();
    if (new Date().getTime() - startTime < timeout) {
      timer = setTimeout(pollInternal, delay);
    }
  }

  pollInternal();
}

16. 简单的懒加载

window.addEventListener('scroll', function() {
  const elements = document.querySelectorAll('.lazy-load');
  elements.forEach((element) => {
    if (isInViewport(element)) {
      element.src = element.dataset.src;
    }
  });
});

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

17. 简单的图片预加载

function preloadImage(url) {
  const img = new Image();
  img.src = url;
}

18. 计算字符串出现的次数

function countOccurrences(str, subStr) {
  return str.split(subStr).length - 1;
}

19. 检查是否为数字

function isNumber(str) {
  return!isNaN(str) && str!== '';
}

20. 简单的缓存函数

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    } else {
      const result = func.apply(this, args);
      cache[key] = result;
      return result;
    }
  };
}

掌握这些实用的 JavaScript 代码片段，将为您的开发工作带来便利，帮助您更快地解决问题，成为更卓越的开发者。不断积累和运用这些技巧，您在 JavaScript 领域的能力必将不断提升。