06 - Fetch、filter、正则表达式实现快速古诗匹配.rar

在本课程"06 - Fetch、filter、正则表达式实现快速古诗匹配"中，我们将探讨如何利用JavaScript中的核心特性来实现一个高效且灵活的古诗搜索功能。这一技术适用于网页应用，可以让用户快速找到与关键词匹配的古诗。我们将深入理解Fetch API用于获取数据，Array.prototype.filter()方法进行数据过滤，以及正则表达式在文本匹配中的强大功能。以下是对这些关键知识点的详细阐述。 Fetch API是现代JavaScript中用于异步加载资源的重要工具，它替代了传统的XMLHttpRequest。Fetch提供了一种更简洁、更符合Promise风格的接口，使得处理网络请求变得更加直观。使用fetch时，我们首先调用fetch函数，传入URL作为参数，然后接收到一个Promise，该Promise在数据加载完成后解析为Response对象。例如： ```javascript fetch('http://example.com/api/poems') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` 上述代码会从指定URL获取数据，并将返回的JSON数据打印到控制台。如果出现错误，fetch的Promise将会被拒绝，并调用catch块处理错误。 接下来，Array.prototype.filter()方法是JavaScript数组的一个内置方法，用于创建一个新的数组，其中包含通过测试的所有元素。在我们的古诗匹配场景中，我们可以定义一个回调函数，该函数检查每首诗是否包含用户的搜索关键词。例如： ```javascript let poems = [ { title: '静夜思', content: '床前明月光，疑是地上霜。' }, // ... ]; let keyword = '月'; let matchedPoems = poems.filter(poem => poem.content.includes(keyword)); ``` 这里，`matchedPoems`将包含所有包含关键词"月"的古诗。 正则表达式（Regular Expression）是用于匹配字符串模式的强大工具。在我们的应用中，我们可以使用正则表达式进行更复杂的文本匹配，例如区分大小写、全词匹配等。例如，如果我们想精确匹配包含“月”的诗句，而不考虑“月”出现在其他词汇中，可以使用正则表达式： ```javascript let regex = new RegExp('\\b' + keyword + '\\b', 'i'); // 创建不区分大小写的全词匹配正则 let isMatched = regex.test(poem.content); ``` 在上述代码中，`\b`是单词边界，确保我们匹配的是独立的"月"字，而不是"明亮"或"月亮"的一部分。`i`标志使匹配不区分大小写。 通过Fetch API获取古诗数据，使用filter筛选包含关键词的古诗，以及正则表达式进行精确匹配，我们可以构建一个高效的古诗搜索功能。这一功能不仅可以应用于古诗库，还可以扩展到任何需要文本搜索的场合，如搜索引擎、文档库等。在实际开发中，还应考虑性能优化，如分页加载、缓存策略等，以提升用户体验。