初探JavaScript：10款必备代码段助力Web开发

JavaScript作为Web开发领域最受欢迎的编程语言之一，以其灵活性、强大性和丰富的库生态系统而广受开发人员的青睐。然而，在某些情况下，您可能需要暂时抛开这些库，回归JavaScript的本质，使用纯代码段来完成任务。

无论您是初涉JavaScript的新手，还是经验丰富的开发人员，这些代码段都能为您带来惊喜。它们不仅可以帮助您提高编码效率，还能加深您对JavaScript的理解。

1. 数组去重

const uniqueArray = [...new Set(array)];

这个代码段可以轻松地从数组中去除重复元素，返回一个包含唯一元素的新数组。

2. 对象合并

const mergedObject = {...object1, ...object2};

这个代码段可以将两个或多个对象合并为一个新的对象，同时覆盖重复的属性值。

3. 函数柯里化

const curriedFunction = (a) => (b) => (c) => a + b + c;

这个代码段演示了函数柯里化的用法，它可以将一个函数拆分成多个小函数，每个小函数只处理一部分参数。

4. 事件代理

document.addEventListener('click', (event) => {
  const target = event.target;
  if (target.classList.contains('button')) {
    // Do something
  }
});

这个代码段演示了事件代理的用法，它可以将事件监听器附加到父元素，然后在事件发生时检查目标元素是否满足某些条件，从而实现事件处理的委托。

5. 函数节流

const throttledFunction = (func, delay) => {
  let timer;
  return (...args) => {
    if (!timer) {
      timer = setTimeout(() => {
        func(...args);
        timer = null;
      }, delay);
    }
  };
};

这个代码段演示了函数节流的用法，它可以限制函数在一定时间内只执行一次，从而避免不必要的重复调用。

6. 函数防抖

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

这个代码段演示了函数防抖的用法，它可以延迟函数的执行，直到一段时间内没有新的调用发生，从而避免不必要的重复调用。

7. 深拷贝

const deepCopy = (obj) => {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  if (Array.isArray(obj)) {
    return obj.map(deepCopy);
  }
  const copy = {};
  for (const key in obj) {
    copy[key] = deepCopy(obj[key]);
  }
  return copy;
};

这个代码段演示了深拷贝的用法，它可以递归地复制一个对象的所有属性，包括嵌套的对象和数组，从而创建一个新的对象，而不会影响原对象。

8. 随机数生成

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

这个代码段演示了随机数生成的用法，它可以在指定范围内生成一个随机整数。

9. 洗牌算法

const shuffleArray = (array) => {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
};

这个代码段演示了洗牌算法的用法，它可以将数组中的元素随机打乱顺序。

10. 日期格式化

const formatDate = (date, format) => {
  const map = {
    yyyy: date.getFullYear(),
    MM: date.getMonth() + 1,
    dd: date.getDate(),
    HH: date.getHours(),
    mm: date.getMinutes(),
    ss: date.getSeconds(),
  };

  return format.replace(/yyyy|MM|dd|HH|mm|ss/g, (match) => map[match]);
};

这个代码段演示了日期格式化的用法，它可以将日期对象转换为指定格式的字符串。