16 个日常开发必用的 JavaScript 代码片段

在 JavaScript 开发中，掌握一些实用的代码片段可以极大地提高开发效率。以下是 16 个在日常开发中经常会用到的 JavaScript 代码片段。

1. 数组去重

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

2. 数组扁平化

function flattenArray(arr) {
  return arr.flat(Infinity);
}

3. 对象属性拷贝

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

4. 生成随机字符串

function generateRandomString(length) {
  let result = '';
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
}

5. 字符串首字母大写

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

6. 判断数据类型

function getType(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1);
}

7. 深拷贝对象

function deepCopy(obj) {
  if (typeof obj!== 'object' || obj === null) {
    return obj;
  }
  let newObj;
  if (Array.isArray(obj)) {
    newObj = [];
  } else {
    newObj = {};
  }
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }
  return newObj;
}

8. 数组求和

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

9. 数组排序

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

10. 防抖函数

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

11. 节流函数

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

12. 字符串反转

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

13. 获取 URL 参数

function getUrlParams(url) {
  const params = new URLSearchParams(new URL(url).search);
  const result = {};
  for (const [key, value] of params) {
    result[key] = value;
  }
  return result;
}

14. 计算字符串出现次数

function countString(str, target) {
  return str.split(target).length - 1;
}

15. 异步加载脚本

function loadScript(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  script.onload = callback;
  document.head.appendChild(script);
}

16. 检测元素是否在视口内

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

掌握这些代码片段，将使您在 JavaScript 开发中更加得心应手，提高代码质量和开发效率。