【JS30-WesBos】ASmallDictionaryforAsynchronousOperationsIaine简介：30天vanillajs编码挑战（30DayChallenge）是由WesBos设计的30天原生js编程挑战。项目免费提供30个视频教程，30个挑战的入门文档，以及30个挑战方案的源码。这个项目属于第6天的项目。为了更具挑战性，我尝试实现了查词的功能。玩得开心网站！?(^?^*)网页效果：https://janice143.github.io/f...项目描述在输入框中输入一个词，它会实时匹配现有词库中包含的所有词该字段中的单词（以一定的样式显示），在每个单词中，在文本输入框中输入的字段将被高亮显示。词库是json数据，页面加载时异步获取。项目主要知识点包括：异步操作Array对象的一些方法，正则表达式的一些属性，CSS变换，项目过程，在html部分设置input标签输入单词，ul标签（list标签）显示搜索结果,JS部分空数组直接给一个dict变量赋值，用来存放json数据中的词库。使用fetch方法从网络异步获取资源，解析JSON数据，存储到数组dict中。使用filter()方法查找单词wordToMatch。过滤条件为正则表达式，如果string的match(regex)方法返回不为空，则过滤函数返回词库中wordToMatch字段中的所有词。使用filter()过滤数组数据创建正则表达式，构造过滤条件匹配方法，编写匹配输入的函数。在Html中显示匹配的词，使用map方法按照原数组元素的顺序依次处理元素。获取匹配数据将关键字替换成高亮标签构造HTML标签数据将匹配值HTML标签放入
- 编写函数显示匹配结果获取匹配数据使用map方法顺序处理元素，将关键字替换成高亮标签，返回html标签数据将具有匹配值的HTML标签放入
- 获取两个主要的HTML元素（,
- ），为添加事件监听（change,keyup）CSS部分CSStransform属性允许旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。项目知识点异步操作概念：程序分两个阶段执行任务。第一阶段任务执行完毕后，再执行其他任务。其他任务执行完毕后，执行第二阶段任务。异步操作的方法：回调函数的多重嵌套缺点：多重嵌套，代码容易乱，难以管理，出现回调地狱。例子：读取文件A后，读取文件B，读取文件A后返回操作。fs.readFile(fileA,function(err,data){fs.readFile(fileB,function(err,data){//...});});Promise不是一种新的语法功能，而是一种新的写法。代码由横向向纵向发展。Promise提供then方法加载回调函数，catch方法捕获执行过程中抛出的错误。varreadFile=require('fs-readfile-promise');readFile(fileA).then(function(data){console.log(data.toString());}).then(function(){returnreadFile(fileB);}).then(function(data){console.日志(data.toString());}).catch(函数(err){console.log(err);});参考文档：https://wiki.jikexueyuan.com/…,%E7%9A%84%E6%89%A7%E8%A1%8C%EF%BC%8C%E5%B0%B1%E5%8F%AB%E5%81%9A%E5%BC%82%E6%AD%A5%E3%80%82fetch是FetchAPI的全局方法。它需要接受url作为参数，返回值是一个Promise对象。如果请求成功，这个对象包含Response（对应于Request），但这只是一个HTTP响应。基本的获取请求设置代码如下：fetch('http://example.com/movies.json').then(response=>response.json()).then(data=>console.log(data));这会通过网络获取一个JSON文件并将其打印到控制台。最简单的用法是只提供一个参数来表示你想要fetch()的资源路径，然后返回一个包含响应结果的promise（一个Response对象）。当然它只是一个HTTP响应，并不是真正的JSON。为了获取JSON的内容，我们需要使用json()方法（此方法返回一个将响应主体解析为JSON的承诺）。对象转换为组获取的资源数据为对象类型，`{a:'英语和许多其他的第一个字母......tury,是?的音质（如far）。',ab:'第五个根据推测，犹太年的一个月，几乎与八月重合。W。狄更斯。”，在后面：“在后面；朝向船尾；作为，在驾驶室后面。在横梁后面。参见Beam.'，鲍鱼：'鲍鱼属的单壳软体动物。Theshel…oastofCalifornia,clingcloselytotherocks.',…}想转为数字组：[0:{a:'英语和许多其他…tury的第一个字母是?的音质（asinfar).'}1:{ab:'根据th...putation，犹太年的第五个月，几乎与八月重合。W.Smith.'}]代码参考链接：https://juejin.cn/post/684490...data=>Object.keys(data).forEach(v=>{leto={};o[v]=data[v];dict.push(o);})Object.keys方法是JavaScript中用于遍历对像属性一样的方法。它的传入参数是一个对象，返回一个数组，里面包含了对象的所有属性名。正则表达式概念：匹配字符串的字符组合模式创建正则表达式有两种方法：1使用正则表达式字面量，包含在斜杠之间2调用RegExp对象的构造函数知识参考链接：https://developer.mozilla.org...正则表达式可以与RegExp的exec和test(en-US)方法以及String的match(en-US)、replace、search(en-US)和split(en-US)US)方法一起使用。match方法是一个String方法，在字符串中进行搜索匹配，返回一个数组，如果没有找到匹配则返回null。//匹配词functionfindWords(wordToMatch,dict){returndict.filter(word=>{constregex=newRegExp(wordToMatch,'gi');//g:global,i:intensiveif(Object.keys(word)[0].match(regex))返回word[Object.keys(word)[0]];})};一些数组和对象方法17个实用的JavaScript数组和对象方法：https://segmentfault.com/a/11....filter()创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。.map()创建一个新数组，其结果是对数组中的每个元素调用提供的函数的结果。.reduce()将函数应用于累加器和数组中的每个元素（从左到右），将其减少为单个值。.forEach()为数组的每个元素执行一次提供的函数。.some()确定数组中的某些元素是否通过提供的函数实现的测试。.every()检查数组中的每个值是否满足条件。.includes()检查数组是否包含某个值。Array.from()这是一种从其他数组或字符串创建新数组的方法。Objects.values()返回给定对象拥有的所有可枚举属性值的数组。Objects.keys()返回一个由给定对象自身的可枚举属性组成的数组。Object.entries()返回给定对象的键值对数组。数组展开使用数组中的展开运算符（...）来展开数组中的元素。对象扩展扩展对象允许向未更改的对象添加新的属性和方法（换句话说，创建新对象）。Object.freeze()防止修改现有的对象属性或向对象添加新的属性和值。Object.seal()阻止将任何新属性添加到对象，但仍允许更改现有属性。Object.assign()允许将对象组合在一起。想把自己的技术文章写的更好，所以专门参考了其他优秀人士的文档。感谢魏志亚，我觉得他的文档写的很好，所以我特意模仿了一下。顺便挂掉他的JS30挑战项目的链接。感谢阅读，如有任何问题，请联系我：1803105538@qq.com。