30 个实用的 JavaScript 基础代码片段

在 JavaScript 的世界里，掌握一些基础且实用的代码片段能够大大提高开发效率。以下为您列举 30 个这样的代码片段。

1. 数组去重

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

2. 数组求和

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

3. 数组排序

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

4. 检查数组是否包含某个值

function containsValue(arr, value) {
  return arr.includes(value);
}

5. 对象属性拷贝

function copyObject(obj) {
  return {...obj };
}

6. 计算对象属性数量

function countObjectProperties(obj) {
  return Object.keys(obj).length;
}

7. 判断变量类型

function getType(value) {
  return typeof value;
}

8. 生成随机数

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

9. 字符串反转

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

10. 字符串首字母大写

function capitalizeFirstLetter(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

11. 去除字符串两端空格

function trimString(str) {
  return str.trim();
}

12. 计算字符串长度

function stringLength(str) {
  return str.length;
}

13. 检查字符串是否包含子串

function containsSubstring(str, subStr) {
  return str.includes(subStr);
}

14. 日期格式化

function formatDate(date, format) {
  const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
  return new Date(date).toLocaleDateString('en-US', options);
}

15. 定时器

function setTimer(callback, delay) {
  setTimeout(callback, delay);
}

16. 间隔定时器

function setIntervalTimer(callback, interval) {
  setInterval(callback, interval);
}

17. 事件监听

function addEventListener(element, event, callback) {
  element.addEventListener(event, callback);
}

18. 取消事件监听

function removeEventListener(element, event, callback) {
  element.removeEventListener(event, callback);
}

19. 函数防抖

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

20. 函数节流

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

21. 深拷贝对象

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

22. 字符串模板

const name = 'John';
const age = 25;
const message = `My name is ${name} and I'm ${age} years old.`;

23. 异步函数

async function getData() {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  return data;
}

24. 错误处理

try {
  // 可能出错的代码
} catch (error) {
  // 处理错误
}

25. 模块导出与导入

// export.js
export function myFunction() {
  // 函数实现
}

// import.js
import { myFunction } from './export';

26. 数组过滤

function filterArray(arr, condition) {
  return arr.filter(condition);
}

27. 数组映射

function mapArray(arr, callback) {
  return arr.map(callback);
}

28. 数组查找

function findInArray(arr, condition) {
  return arr.find(condition);
}

29. 数组一些判断

function isEmptyArray(arr) {
  return arr.length === 0;
}

function isNotEmptyArray(arr) {
  return arr.length > 0;
}

30. 数字格式化

function formatNumber(num) {
  return num.toLocaleString();
}

这些基础的 JavaScript 代码片段在日常开发中经常会用到，熟练掌握它们能够让您的编程工作更加高效和便捷。