Ymmcc Blog Blog

JavaScript 防抖函数实现

Sat, 06 Jun 2026 00:00:00 GMT

防抖（Debounce）是前端开发中常用的性能优化技术，用于限制函数的执行频率。

什么是防抖

防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。

应用场景

搜索框输入联想
窗口 resize
滚动事件
按钮防重复点击

实现代码

/**
 * 防抖函数
 * @param {Function} fn - 要执行的函数
 * @param {number} delay - 延迟时间（毫秒）
 * @returns {Function} - 防抖后的函数
 */
function debounce(fn, delay) {
  let timer = null;
  
  return function (...args) {
    // 如果已有定时器，清除它
    if (timer) {
      clearTimeout(timer);
    }
    
    // 设置新的定时器
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

使用示例

// 搜索框输入联想
const searchInput = document.getElementById('search');
const searchHandler = debounce((value) => {
  console.log('搜索：', value);
  // 这里调用搜索 API
}, 300);

searchInput.addEventListener('input', (e) => {
  searchHandler(e.target.value);
});

// 窗口 resize
const resizeHandler = debounce(() => {
  console.log('窗口大小改变');
  // 这里处理窗口大小改变
}, 200);

window.addEventListener('resize', resizeHandler);

进阶版本

带立即执行参数的防抖函数：

function debounce(fn, delay, immediate = false) {
  let timer = null;
  
  return function (...args) {
    const callNow = immediate && !timer;
    
    if (timer) {
      clearTimeout(timer);
    }
    
    timer = setTimeout(() => {
      timer = null;
      if (!immediate) {
        fn.apply(this, args);
      }
    }, delay);
    
    if (callNow) {
      fn.apply(this, args);
    }
  };
}

// 使用立即执行版本
const handler = debounce(() => {
  console.log('立即执行');
}, 1000, true);

与节流的区别

防抖：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时
节流：在 n 秒内只执行一次回调

选择使用哪个取决于具体场景：

搜索框输入联想 → 防抖
滚动加载 → 节流
按钮防重复点击 → 防抖

Python 列表推导式技巧

Fri, 05 Jun 2026 00:00:00 GMT

列表推导式是 Python 中非常强大的特性，可以让代码更简洁、更 Pythonic。

基本语法

# 语法：[expression for item in iterable]
squares = [x**2 for x in range(10)]
print(squares)  # [0, 1, 4, 9, 16, 25, 36, 49, 64, 81]

带条件的推导式

# 语法：[expression for item in iterable if condition]
even_squares = [x**2 for x in range(10) if x % 2 == 0]
print(even_squares)  # [0, 4, 16, 36, 64]

# 多个条件
special_numbers = [x for x in range(100) if x % 3 == 0 if x % 5 == 0]
print(special_numbers)  # [0, 15, 30, 45, 60, 75, 90]

嵌套推导式

# 二维数组展平
matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
flattened = [x for row in matrix for x in row]
print(flattened)  # [1, 2, 3, 4, 5, 6, 7, 8, 9]

# 生成坐标对
coordinates = [(x, y) for x in range(3) for y in range(3)]
print(coordinates)
# [(0, 0), (0, 1), (0, 2), (1, 0), (1, 1), (1, 2), (2, 0), (2, 1), (2, 2)]

字典推导式

# 基本语法：{key_expression: value_expression for item in iterable}
square_dict = {x: x**2 for x in range(5)}
print(square_dict)  # {0: 0, 1: 1, 2: 4, 3: 9, 4: 16}

# 带条件的字典推导式
even_square_dict = {x: x**2 for x in range(10) if x % 2 == 0}
print(even_square_dict)  # {0: 0, 2: 4, 4: 16, 6: 36, 8: 64}

# 交换字典的键和值
original = {'a': 1, 'b': 2, 'c': 3}
swapped = {v: k for k, v in original.items()}
print(swapped)  # {1: 'a', 2: 'b', 3: 'c'}

集合推导式

# 基本语法：{expression for item in iterable}
unique_lengths = {len(word) for word in ['hello', 'world', 'python', 'code']}
print(unique_lengths)  # {4, 5, 6}

# 去重
numbers = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4]
unique_numbers = {x for x in numbers}
print(unique_numbers)  # {1, 2, 3, 4}

生成器表达式

# 语法：(expression for item in iterable)
# 注意：生成器表达式使用圆括号，不是方括号
sum_of_squares = sum(x**2 for x in range(10))
print(sum_of_squares)  # 285

# 生成器表达式是惰性求值的，节省内存
large_list = (x**2 for x in range(1000000))
print(next(large_list))  # 0
print(next(large_list))  # 1

实际应用示例

1. 数据清洗

# 清理字符串列表
raw_data = ['  hello  ', '  world  ', '  python  ']
cleaned = [s.strip() for s in raw_data]
print(cleaned)  # ['hello', 'world', 'python']

# 过滤空值
data = [1, None, 2, None, 3, None, 4]
filtered = [x for x in data if x is not None]
print(filtered)  # [1, 2, 3, 4]

2. 数据转换

# 字符串转数字
str_numbers = ['1', '2', '3', '4', '5']
numbers = [int(x) for x in str_numbers]
print(numbers)  # [1, 2, 3, 4, 5]

# 温度转换
celsius = [0, 10, 20, 30, 40]
fahrenheit = [(9/5) * c + 32 for c in celsius]
print(fahrenheit)  # [32.0, 50.0, 68.0, 86.0, 104.0]

3. 矩阵操作

# 矩阵转置
matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
transposed = [[row[i] for row in matrix] for i in range(3)]
print(transposed)
# [[1, 4, 7], [2, 5, 8], [3, 6, 9]]

# 矩阵加法
matrix1 = [[1, 2], [3, 4]]
matrix2 = [[5, 6], [7, 8]]
result = [[matrix1[i][j] + matrix2[i][j] for j in range(2)] for i in range(2)]
print(result)  # [[6, 8], [10, 12]]

性能考虑

列表推导式通常比等价的 for 循环快，因为：

Python 解释器对列表推导式有优化
减少了函数调用的开销
内存分配更高效

但是，对于非常复杂的逻辑，使用普通的 for 循环可能更清晰。

最佳实践

保持简洁 - 如果推导式太复杂，使用普通循环
避免副作用 - 推导式应该用于创建新列表，不是执行操作
使用有意义的变量名 - 避免使用单字母变量
注意内存 - 对于大数据集，考虑使用生成器表达式

学习日志 - 2026年6月4日

Thu, 04 Jun 2026 00:00:00 GMT

今日学习内容

算法学习

题目：两数之和

给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值的两个整数，并返回它们的数组下标。

解题思路：

暴力解法：双重循环，时间复杂度 O(n²)
哈希表：一次遍历，时间复杂度 O(n)

代码实现：

def two_sum(nums, target):
    # 哈希表存储已遍历的数字和下标
    hash_map = {}
    
    for i, num in enumerate(nums):
        complement = target - num
        
        # 如果补数在哈希表中，返回结果
        if complement in hash_map:
            return [hash_map[complement], i]
        
        # 将当前数字和下标存入哈希表
        hash_map[num] = i
    
    return []

# 测试
nums = [2, 7, 11, 15]
target = 9
print(two_sum(nums, target))  # [0, 1]

复杂度分析：

时间复杂度：O(n)
空间复杂度：O(n)

前端学习

React Hooks 复习

今天复习了 useState 和 useEffect 的用法，重点理解了：

useState 的状态更新是异步的
useEffect 的依赖数组控制执行时机
清理函数在组件卸载前执行

代码示例：

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    // 清理函数
    return () => clearInterval(interval);
  }, []);

  return <div>已运行 {seconds} 秒div>;
}

阅读笔记

《JavaScript 高级程序设计》第 4 章

变量、作用域和内存
基本类型和引用类型的区别
执行上下文和作用域链
闭包的原理和应用

今日总结

完成了 LeetCode 第 1 题，掌握了哈希表解法
复习了 React Hooks 的核心概念
阅读了 JavaScript 高级程序设计的相关章节

明日计划

继续刷 LeetCode 算法题
学习 React 自定义 Hooks
阅读 JavaScript 闭包相关内容

Welcome

Thu, 26 Aug 2021 00:00:00 GMT

Docusaurus blogging features are powered by the blog plugin.

Here are a few tips you might find useful.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

2019-05-30-welcome.md
2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

MDX Blog Post

Sun, 01 Aug 2021 00:00:00 GMT

Blog posts support Docusaurus Markdown features, such as MDX.

提示

Use the power of React to create interactive blog posts.

For example, use JSX to create an interactive button:

<button onClick={() => alert('button clicked!')}>Click me!</button>

Long Blog Post

Wed, 29 May 2019 00:00:00 GMT

This is the summary of a very long blog post,

Use a {/* truncate */} comment to limit blog post size in the list view.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

First Blog Post

Tue, 28 May 2019 00:00:00 GMT

Lorem ipsum dolor sit amet...

...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Ymmcc Blog Blog

JavaScript 防抖函数实现

什么是防抖​

应用场景​

实现代码​

使用示例​

进阶版本​

与节流的区别​

Python 列表推导式技巧

基本语法​

带条件的推导式​

嵌套推导式​

字典推导式​

集合推导式​

生成器表达式​

实际应用示例​

1. 数据清洗​

2. 数据转换​

3. 矩阵操作​

性能考虑​

最佳实践​