JavaScript 常用代码段探索：进阶篇

2023-11-08 04:13:32

精彩呈现，代码段锦集

在JavaScript领域，代码段犹如点亮智慧的星辰，它们照亮着开发者的编程之路。我们精选了以下代码段，希望能为您的编程之旅带来更多灵感：

1. 深度拷贝：告别浅层复制的烦恼

// 深度拷贝对象
const deepCopy = (obj) => {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }
  if (obj instanceof Date) {
    return new Date(obj);
  }
  if (obj instanceof Array) {
    return obj.map((item) => deepCopy(item));
  }
  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }
  return newObj;
};

2. 节流函数：避免频繁执行的良药

// 节流函数，防止函数在一定时间内被多次触发
const throttle = (func, wait) => {
  let isThrottled = false;
  let savedArgs, savedThis;
  const wrapper = (...args) => {
    if (isThrottled) {
      savedArgs = args;
      savedThis = this;
      return;
    }
    func.apply(this, args);
    isThrottled = true;
    setTimeout(() => {
      isThrottled = false;
      if (savedArgs) {
        wrapper.apply(savedThis, savedArgs);
        savedArgs = savedThis = null;
      }
    }, wait);
  };
  return wrapper;
};

3. 防抖函数：优化输入体验的利器

// 防抖函数，防止函数在一定时间内被多次触发
const debounce = (func, wait) => {
  let timeoutId;
  return (...args) => {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
};

4. 二分查找：快速定位目标元素

// 二分查找算法
const binarySearch = (arr, target) => {
  let low = 0;
  let high = arr.length - 1;
  while (low <= high) {
    const mid = Math.floor((low + high) / 2);
    const guess = arr[mid];
    if (guess === target) {
      return mid;
    } else if (guess < target) {
      low = mid + 1;
    } else {
      high = mid - 1;
    }
  }
  return -1;
};

5. 洗牌算法：让随机更随机

// 洗牌算法，随机排列数组元素
const shuffleArray = (array) => {
  let currentIndex = array.length,
    randomIndex;
  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex],
      array[currentIndex],
    ];
  }
  return array;
};

6. JSON 解析：安全处理数据

// 安全的 JSON 解析
const safeJSONParse = (str) => {
  try {
    return JSON.parse(str);
  } catch (e) {
    return null;
  }
};

7. UUID 生成器：打造独一无二的标识符

// UUID 生成器
const generateUUID = () => {
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
    const r = (Math.random() * 16) | 0;
    const v = c === "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
};