30秒速查：30-seconds-of-code 编程技巧库实战手册

打开浏览器，输入 https://30secondsofcode.org，回车。

你会看到首页。别被满屏英文吓到——核心操作只有三步：找卡片、点卡片、复制代码。

第一步：找到一张卡片

页面往下滚，看到一排排矩形卡片。每张卡片左上角有语言标签（JavaScript / Python / CSS），中间是标题，右下角有标签（array / string / date）。

要点：

• 语言标签帮你快速过滤：只点你会的语言
• 标题就是功能描述，比如“Array unique”就是数组去重
• 标签是分类，比如“array”表示数组操作

第二步：点开卡片

鼠标悬停在卡片上，它会微微上浮。点击任意一张，比如“Array unique”。

页面跳转到详情页。你会看到四个部分：

1. 标题：Array unique（功能名称）
2. 代码：一个代码块，带语言标识（如 js）
3. 说明：一段中文或英文解释（网站自动翻译，但代码是原文）
4. 示例：一个或多个使用示例，展示输入输出

第三步：复制代码

直接选中代码块里的内容，按 Ctrl+C（Mac 用 Cmd+C）。

注意：代码块右上角有个“复制”图标（📋），点击它也能复制。但有时会漏掉换行，建议手动选中。

第四步：测试代码

打开你的编辑器（VS Code、记事本都行），新建一个文件，粘贴代码。

以 JavaScript 为例：

const unique = arr => [...new Set(arr)];

然后加一行测试：

console.log(unique([1, 2, 2, 3, 4, 4])); // [1, 2, 3, 4]

保存为 test.js，在终端运行：

node test.js

输出 [1, 2, 3, 4]，说明代码能用。

常见问题

• 页面加载慢？ 网站托管在 Netlify，国内访问可能稍慢。等 3-5 秒，不行就刷新。
• 找不到想要的片段？ 首页右上角有搜索框，输入关键词（如“unique”），回车即可。
• 代码报错？ 检查语言是否匹配：JavaScript 代码别在 Python 环境跑。另外，有些片段依赖 ES6 特性（如 Set），确保 Node.js 版本 >= 12。

实用技巧

• 收藏喜欢的片段：点卡片右下角的星标（⭐），下次在首页“Favorites”标签下找。
• 批量学习：首页顶部有“Collections”链接，点进去能看到按主题打包的集合，比如“JavaScript Array Methods”。

现在你已经拿到了第一个片段。花 5 分钟，再找 2-3 个你感兴趣的，复制、测试、收藏。这就是你个人速查库的起点。

网站上有几百个代码片段，混着JS、Python、CSS。直接翻找等于大海捞针。这一章教你用语言筛选器，一秒只看你需要的语言。

前置条件：已打开30-seconds-of-code网站首页或任意片段列表页。

---

第一步：找到语言筛选器

在页面顶部导航栏或侧边栏，找Language下拉菜单或标签组。位置固定，不会随滚动消失。

预期结果：看到一个可点击的筛选控件，默认显示“All Languages”或类似字样。

---

第二步：选择目标语言

点击下拉菜单，从列表中选择你需要的语言：

• JavaScript — 最全，覆盖数组、对象、DOM、异步等
• Python — 侧重字符串处理、数据结构、算法
• CSS — 布局、动画、响应式设计

注意：部分片段可能同时标注多种语言（如“JavaScript & Python”），筛选后仍会显示。

推荐做法：先选JavaScript，因为数量最多，适合快速熟悉网站结构。

---

第三步：确认筛选生效

页面URL会变化，例如：

https://30secondsofcode.org/snippets/p/1?language=javascript

同时列表内容刷新，只显示该语言的片段卡片。

预期结果：卡片标题下方出现语言标签（如“JS”），且不再出现其他语言片段。

---

第四步：组合筛选（可选）

语言筛选可与标签筛选叠加使用。例如：

1. 先选语言为“JavaScript”
2. 再点标签“array”
3. 结果：只显示JavaScript的数组操作片段

注意：筛选器之间是“与”关系，不是“或”。想同时看JS和Python？做不到，必须分两次筛选。

---

常见问题

Q：选了语言后页面空白？ A：该语言下可能没有匹配当前标签的片段。先清除标签筛选，或换一个语言试试。

Q：筛选后URL变了，但内容没变？ A：刷新页面。部分浏览器缓存可能导致筛选器状态不同步。

Q：手机端怎么筛选？ A：点击右上角菜单图标展开导航，语言筛选器在折叠菜单里。

---

实战：快速定位CSS布局片段

假设你要找一个水平垂直居中的CSS方案：

1. 点击Language → 选“CSS”
2. 在标签栏点“layout”
3. 列表瞬间只剩CSS布局相关片段
4. 找到“centering”或“flexbox”相关卡片，点进去看代码

反例：不筛选直接搜“center”，结果混着JS的字符串居中、Python的列表居中，浪费时间。

---

下一步：筛选后，点击卡片进入详情页，下一章教你理解片段结构。

用标签精准定位：数组操作、日期处理等分类

30-seconds-of-code 的卡片墙有几百个片段，直接翻找效率极低。标签（Tags）是内置的“分类索引”，让你能瞬间过滤出你需要的领域——比如只显示“数组”或“日期”相关的片段。

前置条件：你已经打开了 30-seconds-of-code 网站（https://30secondsofcode.org），并进入了任意一个片段列表页（例如首页或 /snippets/p/1）。

第一步：找到标签入口

在页面顶部或侧边栏，你会看到一排标签按钮。常见标签包括：

• JavaScript、Python、CSS（按语言）
• Array、String、Date、Object（按数据结构）
• Algorithm、Utility、Layout（按用途）

预期结果：点击任意标签（例如 Array），页面会立即刷新，只显示带有该标签的片段。

第二步：组合标签缩小范围

标签可以叠加使用。比如你想找“JavaScript 数组去重”：

1. 先点击 JavaScript 标签。
2. 再点击 Array 标签。

预期结果：页面只显示同时带有 JavaScript 和 Array 标签的片段。此时你看到的卡片数量会大幅减少，方便快速浏览。

注意：标签是“与”逻辑（AND），不是“或”逻辑（OR）。你需要同时满足所有选中的标签。

第三步：利用标签快速识别内容

每个卡片底部会显示该片段的标签列表。例如：

Array · JavaScript · Utility

这告诉你：这是一个 JavaScript 数组工具函数。如果你只关心“日期处理”，直接点 Date 标签，所有日期相关片段（如 formatDuration、daysInMonth）会立刻出现。

常见坑位与技巧

• 标签名是英文：中文用户可能不熟悉 Array、String 等词。记住几个核心标签：Array（数组）、String（字符串）、Date（日期）、Object（对象）、Algorithm（算法）、Utility（工具）。
• 标签数量有限：每个片段通常只有 2-4 个标签。如果找不到你想要的分类，试试用搜索功能（第 9 章会讲）。
• 不要一次点太多标签：超过 3 个标签后，结果可能为空。先点 1-2 个核心标签，再手动浏览。

真实场景：快速找到“日期格式化”片段

假设你要格式化一个日期为 YYYY-MM-DD：

1. 点击 Date 标签。
2. 页面显示所有日期相关片段（约 10-20 个）。
3. 浏览卡片标题，找到 formatDate 或 toISOString 等片段。
4. 点击卡片查看详情。

预期结果：你会在 10 秒内定位到目标片段，而不是在几百个卡片里乱翻。

如果标签没反应？

• 检查浏览器控制台：按 F12 打开开发者工具，看是否有网络错误（404 或 500）。如果有，可能是网站临时故障，稍后再试。
• 确认标签是否被选中：选中的标签通常会高亮（背景色变化）。如果没高亮，说明点击没生效，重新点击一次。
• 尝试刷新页面：偶尔标签过滤会卡住，刷新后重新选择即可。

打开任意一个代码片段页面，你看到的不是一堆乱码——而是一个标准化的四层结构。理解这个结构，你才能快速判断“这个片段能不能用”“怎么改”。

第一层：标题——一眼判断是否相关

标题就是片段的名字，比如 arrayToHtmlList、daysAgo。它遵循动词+名词命名规则：动词表示操作（转、算、过滤），名词表示操作对象（数组、日期、字符串）。

要点

• 标题就是片段的功能摘要。看到 uniqueElements 就知道是去重，看到 isLeapYear 就知道是闰年判断。
• 如果标题包含 is、has、can，返回的是布尔值；包含 to、from，通常是类型转换。
• 不要被长标题吓到：getURLParameters 就是“获取URL参数”，拆开看每个单词就懂了。

反例

• 标题 foo → 完全不知道干什么，跳过。
• 标题 array → 太模糊，不可能是有效片段。

第二层：代码——核心实现，直接复制

代码块是片段的主体，通常只有 1-10 行。它用你熟悉的语言（JS/Python/CSS）写成，不依赖外部库。

要点

• 代码前面会标注语言（javascript、python、css），复制时注意别选错。
• 大部分代码是纯函数：输入参数，输出结果，不修改外部变量。
• 如果代码里出现 ...（展开运算符）或 =>（箭头函数），这是现代语法，不懂就查 MDN 或 Python 文档。
• 代码块下方有时会标注版本要求（如 ES6、Python 3.8+），低于这个版本可能跑不了。

推荐做法
复制代码后，先跑一个最简单的测试，确认能运行再改。

第三层：说明——为什么这么写

说明是代码块下方的文字段落，解释实现原理和边界情况。它不会教你基础语法，而是告诉你“为什么用 Set 而不是 filter 去重”。

要点

• 说明通常包含：核心思路（如“利用 Set 唯一性”）、关键函数的作用、边界处理（空数组、null 值）。
• 如果说明里提到“时间复杂度 O(n)”，意思是这个算法效率高，适合大数据。
• 如果说明里写“注意：会修改原数组”，你就得考虑是否要深拷贝。

反例

• 跳过说明直接改代码 → 容易踩坑（比如没处理空值导致报错）。
• 把说明当教程读 → 它只是片段注解，不是系统教学。

第四层：示例——验证结果，快速上手

示例展示如何调用这个片段，并给出预期输出。格式通常是：

// 调用
const result = uniqueElements([1, 2, 2, 3]);
// 输出
console.log(result); // [1, 2, 3]

要点

• 示例就是“最小可用测试”。复制代码后，直接跑示例，确认结果一致。
• 示例会覆盖典型输入（正常值、边界值）。如果只有一种输入，自己补一个空值测试。
• 如果示例输出是 undefined，说明这个函数不返回值，而是做副作用（比如修改 DOM）。

推荐做法
把示例代码和片段代码一起复制到本地文件，运行验证。如果报错，先检查语言版本和拼写。

实战：拆解一个真实片段

打开 arrayToHtmlList 这个片段（在网站搜索栏输入标题即可找到）。我们按四层结构拆解：

• 标题：arrayToHtmlList → 把数组转成 HTML 列表。
• 代码：

  const arrayToHtmlList = (arr, listID) =>
    (el => (
      (el = document.querySelector('#' + listID)),
      (el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
    ))();

  注意：这里用了 IIFE（立即执行函数），目的是把 el 变量限制在局部作用域。
• 说明：解释“通过 querySelector 获取列表元素，然后用 innerHTML 追加 <li> 标签”。关键点：会覆盖原有内容（因为用了 +=）。
• 示例：

  arrayToHtmlList(['a', 'b'], 'myListID');

  预期：页面中 id 为 myListID 的元素内出现 <li>a</li><li>b</li>。

注意

• 示例里没有检查 listID 是否存在。如果页面没有这个 id，会报 Cannot read properties of null。
• 这是“最小实现”，生产环境需要加错误处理。

常见问题

Q：代码看不懂怎么办？
A：先看说明，再查不懂的语法。如果说明也没写，说明这个片段不适合你当前水平，换一个。

Q：示例输出和预期不符？
A：检查输入参数类型（比如传了字符串而不是数组），或者代码里有没有隐藏的全局变量。

Q：片段有多个版本（JS 和 Python）？
A：每个语言独立成页，标题相同但代码不同。选你需要的语言版本。

打开浏览器，进入 30secondsofcode.org。在首页搜索框输入“array unique”或“数组去重”，回车。

你会看到多个结果。点开第一个标题为“unique elements in array”的卡片。页面会显示完整的代码片段，包含标题、代码块、说明和示例。

代码块长这样：

const uniqueElements = arr => [...new Set(arr)];

这是一行 ES6 语法。new Set(arr) 把数组转成 Set 对象——Set 自动去除重复值。[...] 展开运算符把 Set 再转回数组。

复制这段代码：选中代码块里的全部字符，按 Ctrl+C（Mac 用 Cmd+C）。

测试它：打开浏览器的开发者工具（F12），切换到 Console 面板。粘贴代码并回车。你会看到函数被定义，没有报错。

接着输入测试数据：

uniqueElements([1, 2, 2, 3, 4, 4, 5]);

回车。预期输出：

[1, 2, 3, 4, 5]

重复的 2 和 4 被去掉了。

注意：这个片段只对基本类型（数字、字符串、布尔值）有效。如果数组里有对象，Set 按引用去重，两个内容相同的对象会被视为不同。例如：

uniqueElements([{a:1}, {a:1}]); // 返回 [{a:1}, {a:1}]，没去重

真实场景中，如果数据来自 API 返回的用户列表，对象去重需要额外处理（比如用 Map 按 ID 去重）。

常见报错：如果你复制时漏了 => 或括号，控制台会报 SyntaxError: missing => in arrow function。检查代码是否完整。

推荐做法：把这段代码保存到你的项目工具函数文件里（比如 utils.js），需要时直接调用 uniqueElements(arr)。不要每次都从网站复制。

先打开浏览器，找到你要改的网页——一个本地 HTML 文件，或者 CodePen 上的测试页。本章目标：把一个现成的 CSS 布局片段（比如 Flexbox 居中、Grid 两栏）直接贴进你的页面，让它生效。

前置条件

• 你已从 30-seconds-of-code 网站复制了一个 CSS 片段（例如 flexbox-centering 或 grid-two-column）。
• 你有一个可编辑的 HTML 文件，或一个在线编辑器（如 CodePen、JSFiddle）已打开。

第一步：定位插入点 在你的 HTML 文件中，找到 <head> 标签。把 CSS 片段放在 <style> 标签里，或者放在外部 CSS 文件里。推荐直接内嵌 <style> 快速测试。

第二步：粘贴片段 假设你复制了 flexbox-centering 片段（让子元素在父容器中水平和垂直居中）。粘贴后代码像这样：

<!DOCTYPE html>
<html>
<head>
  <style>
    .flexbox-centering {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh; /* 让父容器占满视口高度 */
    }
  </style>
</head>
<body>
  <div class="flexbox-centering">
    <p>这段文字会居中显示</p>
  </div>
</body>
</html>

预期结果：刷新页面后，文字在屏幕正中央。

第三步：调整选择器与上下文 片段里的类名（如 .flexbox-centering）是示例用的。你需要把它改成你页面中实际存在的类名或 ID。比如你的容器是 <div class="hero">，就把 .flexbox-centering 替换成 .hero。

注意：如果片段里用了 height: 100vh，而你的容器没有明确高度，可能会失效。确保父容器有高度（比如 height: 500px 或 min-height: 100vh）。

第四步：处理冲突 如果你页面已有其他 CSS，新片段可能被覆盖。检查浏览器开发者工具（F12）的“样式”面板，看片段属性是否被划掉。如果是，提高选择器优先级：给容器加一个更具体的类名，或使用 !important（但慎用，只在调试时用）。

常见报错与排查

• 片段没生效：检查类名拼写是否完全一致（大小写敏感）。CSS 里 .myClass 和 HTML 里 class="myclass" 不匹配。
• 布局错乱：片段可能依赖特定 HTML 结构。比如 grid-two-column 需要父容器有 display: grid，子元素有 grid-column 属性。对照片段示例的 HTML 结构，调整你的标签。
• 浏览器兼容性：某些 CSS 属性（如 gap 在旧版 Grid 中不支持）可能不工作。用 Can I Use 查一下，或加 -webkit- 前缀（片段通常已包含）。

实用技巧

• 在 CodePen 里直接粘贴片段，然后修改 HTML 和 CSS 来匹配你的页面，比反复刷新本地文件快。
• 如果片段是 flexbox-centering 这种通用工具类，可以把它单独存成一个 CSS 文件（如 utils.css），然后在多个页面引用。

真实场景小例子 你有一个博客文章页，想让侧边栏和主内容区并排显示。从 30-seconds-of-code 复制 grid-two-column 片段：

.grid-two-column {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

在 HTML 中：

<div class="grid-two-column">
  <aside>侧边栏</aside>
  <main>文章正文</main>
</div>

刷新后，侧边栏占 1/4 宽度，正文占 3/4，中间有 20px 间距。如果侧边栏太窄，把 1fr 改成 250px 固定宽度。

先确认：你手头有要清洗的文本

文本清洗的核心是批量替换、去除或重组字符串。30-seconds-of-code 的 Python 片段里，s 开头的字符串处理函数就是你的工具箱。

第一步：找到字符串处理入口

打开 30-seconds-of-code 网站，点击顶部 Python 标签。在搜索框输入 string，或直接浏览 String 分类。你会看到类似这样的卡片：

• slugify — 把标题转成 URL 友好的 slug
• byte_size — 计算字符串的字节大小
• capitalize — 首字母大写
• decapitalize — 首字母小写
• is_anagram — 检查变位词

预期结果：页面展示 20-30 个 Python 字符串片段，每个卡片有标题、代码、说明。

第二步：挑出最常用的清洗函数

清洗场景通常需要：去空格、转小写、替换特殊字符、截断。以下三个片段最常用：

1. slugify — 把“Hello World! 2024”变成“hello-world-2024”

import re

def slugify(s):
    s = s.lower().strip()
    s = re.sub(r'[^\w\s-]', '', s)
    s = re.sub(r'[\s_]+', '-', s)
    s = re.sub(r'-+', '-', s)
    return s

作用：移除标点、空格变连字符、全小写。适合文件名、URL、标签。

2. byte_size — 检查字符串实际字节长度

def byte_size(s):
    return len(s.encode('utf-8'))

作用：中文占 3 字节，英文占 1 字节。用于限制数据库字段长度。

3. capitalize — 只首字母大写，其余小写

def capitalize(s, lower_rest=False):
    return s[:1].upper() + (s[1:].lower() if lower_rest else s[1:])

作用：标准化人名、标题。lower_rest=True 时强制其余字母小写。

第三步：组装一个清洗流水线

假设你从 CSV 里读了一堆脏数据：

raw_texts = [
    "  Hello   World!  ",
    "PYTHON IS GREAT",
    "user@example.com",
    "  extra   spaces   "
]

你想：去首尾空格、转小写、合并多余空格、移除特殊字符。用上面片段组合：

import re

def clean_text(s):
    # 去首尾空格
    s = s.strip()
    # 合并多余空格
    s = re.sub(r'\s+', ' ', s)
    # 转小写
    s = s.lower()
    # 只保留字母、数字、空格
    s = re.sub(r'[^a-z0-9\s]', '', s)
    return s

cleaned = [clean_text(t) for t in raw_texts]
print(cleaned)
# 输出: ['hello world', 'python is great', 'userexamplecom', 'extra spaces']

注意：user@example.com 里的 @ 和 . 被移除了。如果你需要保留邮箱格式，要调整正则规则。

第四步：处理中文文本

30-seconds-of-code 的片段默认面向英文。中文清洗需要调整：

import re

def clean_chinese(s):
    # 去首尾空格
    s = s.strip()
    # 合并空格
    s = re.sub(r'\s+', ' ', s)
    # 保留中文、字母、数字、常用标点
    s = re.sub(r'[^\u4e00-\u9fff\w\s，。！？、]', '', s)
    return s

dirty = "  Hello 你好！ 测试@#￥%  "
print(clean_chinese(dirty))
# 输出: "Hello 你好！ 测试"

关键：\u4e00-\u9fff 匹配所有中文字符。\w 匹配英文和数字。

第五步：测试并保存

把清洗函数保存为 text_cleaner.py，然后写个测试：

from text_cleaner import clean_text, clean_chinese

test_cases = [
    "  Multiple   spaces  ",
    "UPPERCASE TEXT",
    "Special!@#Chars",
    "中文测试！ 带空格  "
]

for case in test_cases:
    if any('\u4e00' <= c <= '\u9fff' for c in case):
        print(clean_chinese(case))
    else:
        print(clean_text(case))

预期结果：每个字符串都被清洗成干净、统一的格式。

常见坑

• 正则性能：re.sub 在大量文本（>10万行）时较慢。考虑用 str.translate 或 str.replace 替代简单替换。
• Unicode 问题：slugify 里的 r'[^\w\s-]' 会移除中文。中文场景必须加 \u4e00-\u9fff。
• 编码错误：byte_size 依赖 UTF-8 编码。如果源文件是 GBK，先 s.encode('gbk') 再计算。

实战：清洗用户评论

假设你从 API 拿到用户评论列表，需要入库：

raw_comments = [
    "  Great product!  ",
    "Not bad, but could be better.",
    "  垃圾产品！  ",
    "  I love it!!!  "
]

def clean_comment(s):
    s = s.strip()
    s = re.sub(r'\s+', ' ', s)
    # 保留中文、英文、数字、常用标点
    s = re.sub(r'[^\u4e00-\u9fff\w\s，。！？、.,!?]', '', s)
    # 限制长度
    if len(s) > 200:
        s = s[:200] + '...'
    return s

cleaned_comments = [clean_comment(c) for c in raw_comments]
print(cleaned_comments)
# 输出: ['Great product!', 'Not bad, but could be better.', '垃圾产品！', 'I love it!']

注意：!!! 被保留，因为 ! 在允许的标点列表里。如果要去掉重复标点，再加一步 re.sub(r'([!?]){2,}', r'\1', s)。

8. 收藏常用片段：创建你的个人速查集合

你不可能记住所有片段。每次翻目录找“数组去重”太慢了。本章教你用30-seconds-of-code自带的“收藏”功能，把高频片段钉在首页，下次直接点。

前置条件：已完成第1章，能正常访问网站并找到片段。

第一步：找到收藏按钮

打开任意一个片段页面（比如 https://30secondsofcode.org/js/s/unique-elements）。在代码块右上角或页面底部，找书签图标（🔖）或**“收藏”按钮**。
预期结果：点击后图标变实心（或颜色变化），表示已收藏。

第二步：查看收藏列表

点击网站顶部的**“收藏”**（Bookmarks）标签页。
预期结果：你收藏的所有片段以卡片列表形式展示，按收藏时间倒序排列。

第三步：管理收藏

• 取消收藏：在收藏列表里，点击片段卡片的书签图标，图标变回空心，片段从列表消失。
• 批量操作：目前不支持批量取消，只能逐个点。
• 排序：收藏列表默认按添加时间排序，无法自定义排序。

第四步：用收藏加速工作流

假设你每天都要处理日期格式化、数组去重、对象深拷贝。
操作：

1. 分别打开这三个片段页面。
2. 每个页面点一次收藏按钮。
3. 回到首页，点“收藏”标签。
4. 现在你只需一次点击就能看到这三个片段，不用再搜。

注意：收藏功能依赖浏览器本地存储（localStorage）。如果你清空浏览器缓存或换设备，收藏列表会丢失。推荐做法：

• 定期导出收藏列表（目前无导出功能，可手动复制片段URL到笔记软件）。
• 或用浏览器书签功能（Ctrl+D）作为备份。

常见问题

Q：收藏按钮点不动？
A：检查浏览器是否禁用JavaScript。收藏功能依赖前端脚本，禁用后无法工作。

Q：收藏列表为空，但我明明收藏过？
A：可能原因：

• 浏览器隐私模式/无痕模式下，localStorage在关闭后清空。
• 网站更新后清空了本地存储（极少发生）。
• 解决方案：重新收藏，并考虑用浏览器书签做双重备份。

Q：能收藏整个集合（Collection）吗？
A：目前只能收藏单个片段。集合页面没有收藏按钮。如果你需要快速访问某个集合，建议用浏览器书签收藏集合URL。

搜索栏：你的第一道防线

遇到具体问题（比如“怎么把数组里的重复项去掉”），别在首页乱翻。直接瞄准页面顶部的搜索框。

前置条件：你已经打开了 30secondsofcode.org。

操作步骤：

1. 输入关键词：在搜索框里输入你的问题核心词。

   • 反例：输入“如何去掉数组中的重复项”（太啰嗦，匹配率低）。
   • 推荐做法：输入 array unique 或 deduplicate array。
   • 预期结果：下拉菜单或结果页会列出匹配的片段标题和描述。

2. 利用自动补全：输入时，搜索框会弹出建议。

   • 技巧：优先选带 JavaScript 或 Python 标签的建议，避免看到不相关语言的代码。
   • 坑位提示：如果自动补全没出现，说明关键词太偏，换个同义词试试（比如 remove duplicates 代替 deduplicate）。

3. 按语言过滤结果：搜索结果页默认显示所有语言。

   • 操作：在结果列表上方找到语言筛选按钮（通常显示为 All Languages）。
   • 点击后选择 JavaScript，结果会立刻只显示 JS 片段。
   • 预期结果：列表变短，全是你要的语言。

4. 快速预览片段：每个结果卡片包含标题、简短描述和语言标签。

   • 操作：扫一眼描述，确认是否匹配你的需求。
   • 反例：看到 Array.prototype.filter() 就点进去，结果发现是过滤而非去重。
   • 推荐做法：看描述里的关键词，比如 Removes duplicate values from an array 就是你要的。

5. 点击进入详情：确认后点击卡片，进入完整页面。

   • 预期结果：页面显示代码、说明、示例和标签。
   • 注意：如果页面加载慢，可能是网络问题，刷新一次即可。

搜索技巧：让结果更精准

• 用引号锁定短语：搜索 "array unique" 会强制匹配完整短语，减少无关结果。
• 组合标签：在搜索框里输入 JavaScript array unique，效果等同于同时按语言和标签筛选。
• 忽略大小写：搜索不区分大小写，Array 和 array 结果一样。

常见问题排查

• 搜索没结果：
  • 原因：关键词太冷门或拼写错误。
  • 解决：换成更通用的词，比如 sort 代替 alphabetical order。
• 结果太多：
  • 原因：没指定语言。
  • 解决：用语言筛选按钮或加语言前缀。
• 结果不相关：
  • 原因：关键词太宽泛。
  • 解决：加限定词，比如 array unique 比 unique 更准。

真实场景：5 秒找到日期格式化片段

假设你要在 JavaScript 里把 2023-12-25 格式化成 Dec 25, 2023。

1. 搜索：输入 date format。
2. 筛选：在结果页选 JavaScript。
3. 预览：看到 Formats a date object to a human-readable format 的卡片。
4. 点击：进去复制代码，直接粘贴到项目里用。

整个过程不超过 30 秒。

打开集合页面，等于拿到一份主题学习路线图。单个片段教你怎么做，集合告诉你什么时候用、为什么组合起来更强。本章以“算法”主题为例，演示如何利用集合页面批量掌握一个知识领域。

前置条件：已打开 30-seconds-of-code 网站（https://30secondsofcode.org），熟悉单个片段的结构（标题、代码、说明、示例）。

---

第一步：找到算法集合入口

1. 点击顶部导航栏的 Collections（集合）。
2. 在集合列表页，找到标题带“Algorithm”的卡片。例如：
   • JavaScript Algorithms（JS 算法）
   • Python Algorithms（Python 算法）
3. 点击卡片进入集合详情页。

预期结果：页面顶部显示集合名称、简短描述、标签（如 algorithm、sorting），下方列出该集合包含的所有片段卡片。

---

第二步：浏览集合目录，建立知识框架

集合页面把相关片段按逻辑分组。以“JavaScript Algorithms”为例，你会看到：

• Sorting（排序）：bubbleSort、quickSort、mergeSort
• Searching（搜索）：binarySearch、linearSearch
• Data Structures（数据结构）：linkedList、stack、queue

要点：不要跳着看。先扫一遍目录，理解这个集合覆盖了哪些子主题，形成“算法分类树”在脑中。

---

第三步：按顺序逐个学习，每学一个做三件事

以 binarySearch（二分查找）为例：

1. 读标题和标签：确认它属于“Searching”类，标签含 algorithm、search。
2. 看代码：理解输入输出。二分查找要求数组已排序，返回目标索引或 -1。

   const binarySearch = (arr, target) => {
     let left = 0, right = arr.length - 1;
     while (left <= right) {
       const mid = Math.floor((left + right) / 2);
       if (arr[mid] === target) return mid;
       if (arr[mid] < target) left = mid + 1;
       else right = mid - 1;
     }
     return -1;
   };

3. 运行示例：在浏览器控制台或 Node.js 中测试。

   console.log(binarySearch([1, 3, 5, 7, 9], 5)); // 输出 2
   console.log(binarySearch([1, 3, 5, 7, 9], 4)); // 输出 -1

注意：集合内的片段可能有依赖关系。比如 mergeSort 会用到 merge 函数，集合通常会把 merge 放在前面。按集合顺序学，避免跳步导致看不懂。

---

第四步：对比集合内相似片段，提炼模式

算法集合里常见“同主题不同实现”。例如排序集合包含：

• bubbleSort：简单但慢（O(n²)）
• quickSort：平均快（O(n log n)），但最坏情况退化
• mergeSort：稳定，始终 O(n log n)

推荐做法：把三个片段代码并排看，标注关键差异：

• 循环结构（嵌套 vs 递归）
• 空间复杂度（原地排序 vs 额外数组）
• 适用场景（小数据用冒泡，大数据用快排或归并）

---

第五步：用集合页面自带的“Related”功能拓展

每个片段卡片底部通常有 Related 链接，指向集合内其他相关片段。例如学完 binarySearch，Related 可能指向：

• sortedIndex（插入位置）
• findLastIndex（从右向左搜索）

操作：点击 Related 链接，形成知识链。不要只学一个片段，要顺着 Related 走完整个子主题。

---

常见问题与排查

问题1：集合页面加载慢或卡片不显示

• 原因：网络问题或浏览器缓存。
• 解决：刷新页面，或清除缓存后重试。如果持续失败，检查网站状态（https://status.30secondsofcode.org）。

问题2：集合内片段顺序混乱，看不懂依赖关系

• 原因：集合可能按字母排序而非依赖顺序。
• 解决：先看每个片段开头的“Prerequisites”部分（如果有）。没有的话，从最简单的片段（如 linearSearch）开始，再学复杂的。

问题3：学完集合后，遇到真实问题还是不会组合

• 原因：只看了代码，没理解设计意图。
• 解决：每个片段学完后，问自己“这个算法解决什么问题？如果去掉它，我会用什么替代？” 然后看集合内其他片段如何互补。

---

实战：用算法集合解决一个真实问题

假设你要写一个“用户列表排序+搜索”功能：

1. 从集合中取 quickSort 对用户按姓名排序。
2. 取 binarySearch 在排序后的列表中快速查找用户。
3. 取 debounce（如果集合包含）优化搜索输入性能。

验证：在本地项目中引入这三个片段，写一个最小测试：

const users = ['Alice', 'Bob', 'Charlie', 'David'];
const sorted = quickSort(users);
const index = binarySearch(sorted, 'Charlie');
console.log(index); // 应输出 2

如果输出正确，说明你已掌握该集合的核心用法。如果出错，回到集合页面检查每个片段的输入输出假设（比如 binarySearch 是否要求数组严格升序）。

---

最后提醒：集合页面不是一次性读完的。把它当作参考手册，遇到新问题时，先回想这个集合里有没有现成方案。批量学习的关键不是记住所有代码，而是建立“这个主题下有哪些工具、它们怎么配合”的思维模型。

从片段到函数：三步封装法

直接复制片段跑一次，和把它变成能反复调用的工具，是两码事。本章教你如何把 30-seconds-of-code 里的片段改造成可复用的函数或组件，避免每次用都去翻网站、改参数。

前置条件：你已从网站复制了一个片段（比如 JavaScript 数组去重），并确认它在控制台能跑通。

---

第一步：识别片段的核心逻辑

打开片段页面，看三样东西：

• 输入：片段接受什么参数？比如 arr（数组）、str（字符串）。
• 输出：返回什么？比如去重后的数组、格式化后的字符串。
• 副作用：是否修改了原始数据？大部分片段是纯函数，不修改原值。

示例片段（JavaScript 数组去重）：

const unique = arr => [...new Set(arr)];

• 输入：一个数组 arr
• 输出：一个新数组，不含重复元素
• 副作用：无（new Set 不会改原数组）

---

第二步：包裹成标准函数

把片段代码放进 function 或 const 声明里，加上参数校验和默认值。

推荐做法：

/**
 * 数组去重（保留顺序）
 * @param {Array} arr - 要处理的数组
 * @returns {Array} 去重后的新数组
 */
function uniqueArray(arr) {
  if (!Array.isArray(arr)) {
    throw new TypeError('参数必须是数组');
  }
  return [...new Set(arr)];
}

关键点：

• 函数名用动词+名词（uniqueArray），一眼知道干什么
• 加 JSDoc 注释，方便 IDE 提示
• 参数校验：片段本身没做，你补上，避免传错类型时静默失败

反例（直接复制片段当函数用）：

const unique = arr => [...new Set(arr)]; // 没校验，传字符串会报错

---

第三步：适配你的项目环境

片段是通用写法，你的项目可能有特殊要求：

• TypeScript：加类型注解
• React/Vue：包装成组件
• Node.js：导出为模块

TypeScript 版本：

function uniqueArray<T>(arr: T[]): T[] {
  if (!Array.isArray(arr)) {
    throw new TypeError('参数必须是数组');
  }
  return [...new Set(arr)];
}

React 组件版本（假设片段是格式化日期）：

// 原始片段：const formatDate = date => date.toISOString().split('T')[0];
function DateDisplay({ date }) {
  const formatted = date instanceof Date ? date.toISOString().split('T')[0] : '无效日期';
  return <span>{formatted}</span>;
}

Node.js 模块导出：

// utils.js
export function uniqueArray(arr) { /* ... */ }
export function shuffleArray(arr) { /* ... */ }

// 使用时
import { uniqueArray } from './utils.js';

---

常见坑与排查

问题	原因	解决
函数不返回结果	片段用箭头函数隐式返回，你写 {} 时忘了 return	检查函数体：const fn = () => { return ...; }
修改了原数组	片段用了 splice、sort 等变异方法	先复制：const copy = [...arr]; 再操作
类型错误	片段假设输入是数组/对象，实际传了 null	加 if (!arr) return []; 或抛异常

---

真实场景串联

你从网站复制了三个片段：数组去重、随机打乱、取交集。现在要写一个抽奖工具，从名单里随机选 3 个不重复的人。

1. 把三个片段分别封装成函数（加校验、加注释）
2. 组合使用：

function pickWinners(names, count = 3) {
  const unique = uniqueArray(names);          // 去重
  const shuffled = shuffleArray(unique);      // 打乱
  return shuffled.slice(0, count);            // 取前 N 个
}

3. 导出为模块，在项目中 import 即可。

注意：不要一次性封装所有片段。先挑 3-5 个你项目里高频使用的，改好测试通过，再逐步扩展。

把多个片段拼成真实功能

单个片段解决小问题，组合起来才能完成实际任务。本章演示如何把几个独立片段串成一个完整功能：一个带防抖的搜索输入框，实时过滤并高亮匹配结果。

前置条件：已从 30-seconds-of-code 网站复制了以下三个片段（或你手头有其他类似片段）：

• debounce（防抖）
• highlight（高亮文本）
• filterArray（数组过滤）

如果你还没复制，先打开网站搜索并复制这三个片段代码。

---

第一步：搭建基础 HTML 结构

创建一个 index.html，包含搜索框和结果列表：

<!DOCTYPE html>
<html>
<head>
  <title>搜索演示</title>
</head>
<body>
  <input type="text" id="searchInput" placeholder="输入关键词搜索...">
  <ul id="results"></ul>
  <script src="app.js"></script>
</body>
</html>

预期结果：浏览器显示一个输入框和一个空列表。

---

第二步：准备数据与核心片段

在 app.js 中，先定义示例数据（模拟 API 返回）：

const data = [
  'JavaScript 基础',
  'CSS 布局技巧',
  'Python 数据处理',
  'React 组件设计',
  'Node.js 后端开发'
];

接着粘贴你复制的三个片段。注意：debounce 和 highlight 是函数，filterArray 可能是一个数组方法。如果 filterArray 不存在，用原生 filter 代替：

// 防抖片段（假设你复制的是标准版本）
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 高亮片段（假设你复制的是字符串高亮）
function highlight(text, term) {
  return text.replace(new RegExp(term, 'gi'), `<mark>$&</mark>`);
}

注意：如果复制的片段有不同参数或返回值，按实际调整。例如 highlight 可能返回 HTML 字符串，我们就直接用它。

---

第三步：组合逻辑——过滤 + 高亮 + 防抖

写一个函数，接收搜索词，过滤数据，高亮匹配部分，然后渲染到列表：

function searchAndRender(query) {
  const resultsList = document.getElementById('results');
  if (!query.trim()) {
    resultsList.innerHTML = '';
    return;
  }
  
  // 过滤：用原生 filter 代替片段（如果片段不适用）
  const filtered = data.filter(item => 
    item.toLowerCase().includes(query.toLowerCase())
  );
  
  // 高亮并渲染
  resultsList.innerHTML = filtered
    .map(item => `<li>${highlight(item, query)}</li>`)
    .join('');
}

关键点：filter 和 highlight 是两个独立片段，这里直接串联。如果 filterArray 片段是自定义函数（比如支持复杂条件），就替换 filter 那行。

---

第四步：绑定防抖事件

把输入事件绑定到防抖后的 searchAndRender：

const input = document.getElementById('searchInput');
const debouncedSearch = debounce(searchAndRender, 300);

input.addEventListener('input', (e) => debouncedSearch(e.target.value));

预期结果：在输入框打字时，列表会延迟 300ms 后更新，只显示匹配项，且匹配文字被 <mark> 标签高亮。

---

常见坑位与排查

• 坑 1：debounce 函数没正确绑定 this
  如果 searchAndRender 里用了 this（比如访问 DOM），防抖函数需要保留上下文。标准 debounce 片段已处理，但如果你自己改写过，检查 fn.apply(this, args) 是否存在。

• 坑 2：高亮片段返回纯文本而非 HTML
  如果 highlight 返回的是纯字符串（比如 **term**），需要手动替换为 <mark>。检查片段说明，确认返回值类型。

• 坑 3：防抖延迟太短导致性能问题
  300ms 是常见值，如果列表很大（上千条），可增加到 500ms。反之，如果要求即时反馈，可降到 150ms。

• 坑 4：filterArray 片段与原生 filter 混用
  如果片段是 filterArray(arr, fn) 形式，记得传入数组和回调函数，不要直接当方法调用。

---

扩展：组合更多片段

这个模式可以套用到任何场景。比如：

• 表单验证：debounce + validateEmail + showError
• 数据可视化：sortArray + groupBy + renderChart
• 文本处理：truncate + slugify + highlight

推荐做法：先画数据流图——输入 → 片段A → 片段B → 输出。每个片段只做一件事，组合时保持接口一致（参数类型、返回值格式）。

反例：把多个片段逻辑写在一个大函数里，导致无法复用。比如把防抖逻辑硬编码到搜索函数中，下次做表单验证又要重写。

为什么需要对比语言实现？

同一功能（比如排序）在不同语言里写法完全不同。学会对比能让你：

• 快速切换语言时少踩坑
• 理解语言设计哲学（比如Python的简洁 vs JS的灵活）
• 面试时能说出“这个功能在X语言里用Y方法实现”

前置条件

• 已打开 30-seconds-of-code 网站
• 知道如何搜索特定语言的片段（第2章讲过）
• 手边有至少两种语言的运行环境（浏览器控制台、Node.js、Python shell 都行）

第一步：找到同一功能的跨语言实现

排序是最典型的对比案例。我们找“数组排序”：

1. 在搜索框输入 sort，按回车
2. 结果列表里会同时出现 JavaScript、Python、CSS 的排序片段
3. 点击 JavaScript Array Sort 和 Python List Sort 两个卡片，分别打开

第二步：对比核心语法差异

JavaScript 排序（原地修改）

const numbers = [3, 1, 4, 1, 5, 9];
numbers.sort((a, b) => a - b);
// numbers 变成 [1, 1, 3, 4, 5, 9]

要点：

• sort() 默认按字符串排序（[1, 10, 2] 会变成 [1, 10, 2]）
• 必须传入比较函数 (a, b) => a - b 才能正确排序数字
• 会修改原数组（副作用）

Python 排序（返回新列表）

numbers = [3, 1, 4, 1, 5, 9]
sorted_numbers = sorted(numbers)
# numbers 不变，sorted_numbers = [1, 1, 3, 4, 5, 9]

要点：

• sorted() 返回新列表，原列表不变
• 默认升序，reverse=True 降序
• 没有比较函数，直接比较元素（数字、字符串都行）

关键差异总结

特性	JavaScript	Python
是否修改原数组	是（sort()）	否（sorted()）
比较方式	需传入函数	自动比较
降序	(a,b)=>b-a	reverse=True
字符串排序	默认按字典序	默认按字典序

第三步：对比更复杂的排序场景

按对象属性排序

JavaScript：

const users = [{name: 'Alice', age: 30}, {name: 'Bob', age: 25}];
users.sort((a, b) => a.age - b.age);
// [{name: 'Bob', age: 25}, {name: 'Alice', age: 30}]

Python：

users = [{'name': 'Alice', 'age': 30}, {'name': 'Bob', 'age': 25}]
sorted_users = sorted(users, key=lambda x: x['age'])
# [{'name': 'Bob', 'age': 25}, {'name': 'Alice', 'age': 30}]

注意：Python 的 key 参数更灵活，可以传入函数或属性名；JS 的比较函数必须返回数字。

第四步：对比 CSS 的“排序”（伪排序）

CSS 没有真正的排序功能，但可以用 order 属性在 Flexbox/Grid 中视觉上重排元素：

/* HTML: <div class="container"><div class="item" style="order:3">C</div>... */
.container {
  display: flex;
}
.item:nth-child(1) { order: 2; }
.item:nth-child(2) { order: 1; }
.item:nth-child(3) { order: 3; }
/* 视觉顺序变成：第2个元素 -> 第1个元素 -> 第3个元素 */

对比结论：CSS 的排序是“视觉欺骗”，不改变 DOM 顺序；JS/Python 是真正的数据排序。

第五步：实战——用三种语言实现“按字符串长度排序”

JavaScript

const words = ['apple', 'banana', 'cherry', 'date'];
words.sort((a, b) => a.length - b.length);
// ['date', 'apple', 'banana', 'cherry']

Python

words = ['apple', 'banana', 'cherry', 'date']
sorted_words = sorted(words, key=len)
# ['date', 'apple', 'banana', 'cherry']

CSS（视觉排序）

.container { display: flex; }
.item { order: var(--order); }
/* 需要手动计算每个元素的长度并设置 --order 变量 */

常见坑位

1. JavaScript 数字排序忘记比较函数 → 结果变成 [1, 10, 2, 3]
2. Python 的 list.sort() 也修改原列表（与 sorted() 不同）
3. CSS 的 order 只对同一父容器内的元素有效，且必须配合 Flexbox/Grid
4. 不同语言的排序稳定性不同：JS 的 sort() 在 ES2019 后稳定，Python 的 sorted() 一直稳定

快速记忆口诀

• JS 排序：sort 改原数组，比较函数不能忘
• Python 排序：sorted 返回新，key 参数最灵活
• CSS 排序：order 改视觉，DOM 顺序不变

片段跑不起来？先别急着删代码

代码片段不是魔法，环境、版本、上下文都可能让它报错。本章教你用项目自带的两个求助渠道：评论区和GitHub Issue，把问题说清楚、拿到答案。

---

前置条件

• 你已找到目标片段（例如第5章的数组去重）
• 你已复制代码并尝试运行，但报错或结果不对
• 你确认不是自己拼写错误（先检查一遍）

---

第一步：用评论区快速求助（适合简单问题）

1. 打开片段页面
   在 30secondsofcode.org 找到你用的片段，点击卡片进入详情页。

2. 滚动到底部评论区
   评论区是 Disqus 驱动的，需要登录（支持 Google、Twitter 等账号）。

3. 发帖模板（直接复制填空）

   环境：Node.js v18 / Chrome 120 / Python 3.11
   片段：[粘贴片段名称或链接]
   代码：[粘贴你实际运行的代码]
   报错：[粘贴完整报错信息]
   预期：[你希望得到的结果]

   要点：

   • 必须贴完整报错，不要只写“报错了”
   • 如果代码有改动，贴改动后的版本
   • 不要贴截图——文字可复制，别人才能帮你调试

4. 等待回复
   社区成员或维护者通常 1-3 天内回复。如果 5 天没动静，转第二步。

---

第二步：用 GitHub Issue 求助（适合复杂问题或建议）

1. 打开 Issue 页面
   访问 github.com/Chalarangelo/30-seconds-of-code/issues/new

2. 选择 Issue 类型

   • Bug report：片段本身有 bug（比如返回结果错误）
   • Feature request：建议新增片段或改进现有片段
   • Question：其他问题（比如不理解片段原理）

3. 填写模板（以 Bug report 为例）

   ## 描述
   数组去重片段 `uniqueElements` 在包含 `NaN` 时返回错误结果。
   
   ## 复现步骤
   1. 打开 Chrome 120 控制台
   2. 运行 `uniqueElements([1, NaN, 2, NaN])`
   3. 实际输出：`[1, NaN, 2]`（预期：`[1, NaN, 2]` 但第二个 NaN 应被去重）
   
   ## 环境
   - 浏览器：Chrome 120
   - 片段版本：v1.0（2024-01-15 更新）
   
   ## 截图
   [可选，但建议贴控制台截图]
   
   ## 额外信息
   我测试了 `Set` 版本，发现 `NaN !== NaN` 导致去重失败。

   注意：

   • 不要只写“这个片段有问题”——必须给出可复现的最小示例
   • 如果片段本身没问题，只是你不会用，先看评论区或搜索已有 Issue
   • 项目目前不接受新内容贡献，但 Bug 报告和建议是欢迎的

4. 提交后做什么

   • 勾选“Watch”仓库，以便收到回复通知
   • 如果维护者要求补充信息，在 48 小时内回复，否则 Issue 可能被关闭

---

常见坑位

错误做法	正确做法
只贴报错截图	贴文字版报错
说“不工作”但不给代码	贴完整代码和输入
在 Issue 里问“怎么用”	先看评论区或文档
重复提交相同 Issue	先搜索已有 Issue
要求立即修复	开源项目无 SLA，耐心等待

---

真实场景串起来

你复制了第5章的 uniqueElements 片段，在 Node.js 里跑 [1, 2, 2, 3] 正常，但 [1, NaN, 2, NaN] 返回 [1, NaN, 2, NaN]（两个 NaN 没去重）。

1. 先自查：确认是 Set 的 NaN !== NaN 特性导致，不是自己写错
2. 评论区发帖：贴代码和报错，问“这是已知问题吗？”
3. 如果 3 天无回复：去 GitHub 开 Issue，按模板填写，附上控制台截图
4. 等待回复：维护者可能回复“这是已知行为，建议用 Object.is 版本”，或直接修复

---

一句话总结

评论区适合快速问用法，GitHub Issue 适合报告 Bug 或提建议。贴完整信息、可复现、有预期，别人才能帮你。

问题1：如何安装或运行这个项目？需要本地搭建环境吗？

解答： 本项目是一个纯代码片段集合，无需安装或本地运行。你只需访问 30secondsofcode.org 即可在线浏览所有文章、代码片段和示例。如果你希望离线使用，可以直接在 GitHub 仓库中查看 snippets/ 目录下的 Markdown 文件，或通过 git clone 下载整个仓库到本地阅读。

问题2：我下载了仓库，但运行 npm install 或 npm start 报错，怎么办？

解答： 该项目不提供本地开发服务器（如 npm start 命令）。仓库仅用于存储代码片段和网站源文件，网站本身由 Astro 构建并托管在 Netlify 上。如果你尝试运行 npm install 后报错，可能是因为缺少 package.json 或依赖未正确安装。建议直接使用在线网站，或仅将仓库作为静态资源阅读。

问题3：我想贡献新的代码片段，但提示“不接受新内容”，还能提交 PR 吗？

解答： 目前项目不接受新内容贡献（包括代码片段、文章等）。如果你发现网站上的错误或希望改进现有内容，可以通过 GitHub Issues 提交问题报告或建议。注意：不要直接提交 Pull Request 添加新片段，否则会被关闭。

问题4：代码片段中的示例代码无法运行，是不是有依赖缺失？

解答： 每个代码片段都是独立、自包含的，不依赖外部库或框架（除非在片段描述中明确说明）。如果示例代码无法运行，请检查：

• 是否复制了完整的代码（包括函数定义和调用示例）。
• 是否在正确的运行环境（如浏览器控制台、Node.js 等）中执行。
• 部分片段可能使用了 ES6+ 语法，需要现代浏览器或 Node.js 14+ 支持。

问题5：网站上的代码片段有版权吗？可以商用吗？

解答： 所有代码片段采用 CC-BY-4.0 许可证，你可以自由使用、修改和分发，但必须保留原作者署名（如注明来自 30 seconds of code）。其他内容（如文字、图片、网站源码、Logo 等）不可商用，需获得所有者明确许可。详情见仓库中的 LICENSE 文件。

问题6：这个项目与“30 seconds of CSS”或“30 seconds of React”有什么区别？

解答： 这些项目是同一系列，由同一作者维护，但专注于不同技术栈：

• 30 seconds of code：通用 JavaScript/编程技巧（如数组操作、函数式编程）。
• 30 seconds of CSS：纯 CSS 技巧（如布局、动画）。
• 30 seconds of React：React 组件和模式。
• 30 seconds of interviews：面试题和算法。

你可以在 30secondsofcode.org 的“Collections”页面找到所有系列。

问题7：网站上的代码片段是否经过测试？如何确保正确性？

解答： 所有代码片段在发布前都经过人工审查和测试，但无法保证 100% 无错误。如果你发现某个片段有 bug，请通过 GitHub Issues 报告，维护者会尽快修复。注意：由于不接受新内容贡献，修复仅针对现有片段。

问题8：我可以在自己的项目中使用这些代码片段吗？需要注明来源吗？

解答： 可以。根据 CC-BY-4.0 许可证，你可以自由使用代码片段，但必须提供署名。推荐的方式包括：

• 在代码注释中注明 From 30 seconds of code (https://30secondsofcode.org)。
• 在项目文档或 README 中列出使用的片段来源。
• 如果修改了代码，需注明原始来源和修改内容。