乐趣区

关于javascript:JS30Wes-Bos异步操作实现的小字典

jiezi

title:【原生 javascript 我的项目】Fun dictionary 06
date: 2022-01-06 00:20:45
tags: 原生 javascript 我的项目
categories: 30 个原生 javascript 我的项目

作者：©Iaine 万一
简介：30-day vanilla js coding challenge (30 Day Challenge)是 Wes Bos 设计的一个 30 天原生 js 编程挑战。我的项目收费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。本我的项目属于第 6 天我的项目，为了更有挑战性，我尝试实现了 单词查找 的性能。

Have fun with the website! ♪(^∇^*)

网页成果：https://janice143.github.io/f…

我的项目形容

在输入框中输出一个单词，会实时匹配现有词库中所有蕴含该字段的单词（以肯定的款式展现），每个单词中，会高亮显示出文本输入框中输出的字段。词库为 json 数据，在加载页面时，异步获取而来。

我的项目次要知识点包含：

  • 异步操作
  • 数组 Array 对象的一些办法
  • 正则表达式
  • CSS transform 的一些属性

我的项目过程

html 局部

设置 input 标签用来输出单词，ul 标签（列表标签）用来展现搜寻的后果

JS 局部

  1. 空数组间接赋值给一个 dict 变量，用来存储 json 数据中的词库
  2. 应用 fetch 办法从网络中异步获取资源，解析 JSON 数据，存入数组dict

  3. 利用 filter() 办法查找单词 wordToMatch，筛选的条件是正则表达式，如果 string 的 match(regex) 办法返回不是空，则 filter 函数返回词库中所有 wordToMatch 字段的单词

    • 使用 filter() 过滤数组数据
    • 创立正则表达式，结构过滤条件
    • match 办法匹配

  4. 编写匹配输出的函数。在 Html 中显示匹配的单词，利用 map 办法依照原始数组元素程序顺次解决元素。

    • 获取匹配数据
    • 替换关键词放入高亮的标签
    • 结构 HTML 标签数据
    • 将匹配值的 HTML 标签放入 <ul> 中

  5. 编写展现匹配后果的函数

    • 获取匹配数据
    • 利用 map 办法顺次解决元素，替换关键词放入高亮的标签，返回 html 标签数据
    • 将匹配值的 HTML 标签放入 <ul> 中
  6. 获取两个次要 HTML 元素（<input>，<ul>），给 <input> 增加事件监听（change, keyup）

CSS 局部

CSStransform属性容许旋转，缩放，歪斜或平移给定元素。这是通过批改 CSS 视觉格式化模型的坐标空间来实现的。

我的项目知识点

异步操作

概念：程序执行工作时候两段进行，执行第一段工作后，执行其余工作，其余工作执行完后接着执行第二段工作。

异步操作的办法：

  • 回调函数多重嵌套

毛病：呈现多重嵌套，代码很容易乱成一团，无奈治理，呈现 callback hell。

示例: 读取 A 文件之后，再读取 B 文件，之后再回到读取 A 文件后的操作。

fs.readFile(fileA, function (err, data) {fs.readFile(fileB, function (err, data) {// ...});
});
  • Promise

它不是新的语法性能，而是一种新的写法。代码从横向发展，变成纵向倒退。Promise 提供 then 办法加载回调函数，catch 办法捕获执行过程中抛出的谬误。

var readFile = require('fs-readfile-promise');

readFile(fileA)
.then(function(data){console.log(data.toString());
})
.then(function(){return readFile(fileB);
})
.then(function(data){console.log(data.toString());
})
.catch(function(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%82

fetch

属于 Fetch API 的一个全局办法。须要承受 url 作为参数，返回值是一个 Promise 对象。若申请胜利，这个对象蕴含了（对应 Request 的）Response，但这只是一个 HTTP 响应。

一个根本的 fetch 申请设置代码如下：

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

这里通过网络获取一个 JSON 文件并将其打印到控制台。最简略的用法是只提供一个参数用来指明想 fetch() 到的资源门路，而后返回一个蕴含响应后果的 promise（一个 Response 对象）。

当然它只是一个 HTTP 响应，而不是真的 JSON。为了获取 JSON 的内容，咱们须要应用 json() 办法（该办法返回一个将响应 body 解析成 JSON 的 promise）。

对象转换为数组

获取的资源 data 为对象类型，

`{a: 'The first letter of the English and of many other …tury, wasa sound of the quality of ä (as in far).', ab: 'The fifth month of the Jewish year according to th…putation,coinciding nearly with August. W. Smith.', aback: 'Backward against the mast;-said of the sails when …uddenly checked, baffled, ordiscomfited. Dickens.', abaft: 'Behind; toward the stern from; as, abaft the wheelhouse. Abaftthe beam. See under Beam.', abalone: 'A univalve mollusk of the genus Haliotis. The shel…oast of California, clingingclosely to the rocks.', …}

想要转换为数组：

[0:{a: 'The first letter of the English and of many other …tury, wasa sound of the quality of ä (as in far).'}

1:{ab: 'The fifth month of the Jewish year according to th…putation,coinciding nearly with August. W. Smith.'}]

代码参考链接：https://juejin.cn/post/684490…

data => Object.keys(data).forEach(v => {let o = {};
    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) 办法。其中 match 办法是一个在字符串中执行查找匹配的 String 办法，返回一个数组，在未匹配到时会返回 null。

// 匹配单词
    function findWords(wordToMatch,dict){
        return dict.filter(word =>{const regex  = new RegExp(wordToMatch,'gi');// g:global,i:intensive          
            if (Object.keys(word)[0].match(regex))
                return word[Object.keys(word)[0]];
           })
    };

一些数组和对象办法

17 个实用的 JavaScript 数组和对象的办法：https://segmentfault.com/a/11…

  • .filter()
    创立一个新数组, 其蕴含通过所提供函数实现的测试的所有元素。
  • .map()
    创立一个新数组，其后果是该数组中的每个元素都调用一个提供的函数后返回的后果。
  • .reduce()
    对累加器和数组中的每个元素（从左到右）利用一个函数，将其缩小为单个值。
  • .forEach()
    对数组的每个元素执行一次提供的函数。
  • .some()
    判断数组中的某些元素是否通过由提供的函数实现的测试。
  • .every()
    查看是否数组中的每个值都满足条件。
  • .includes()
    查看是否一个数组蕴含一个确定的值。
  • Array.from()
    这是一个能够从其余数组或者字符串中发明新 array 的办法。
  • Objects.values()
    返回一个由给定对象本人的所有可枚举属性值的数组。
  • Objects.keys()
    返回一个由给定对象的本身可枚举属性组成的数组。
  • Object.entries()
    返回一个由一个给定对象的键值对组成的数组。
  • Array spread
    在数组中应用扩大运算符（…）能够开展数组中的元素。
  • Object spread
    扩大对象容许为一个没有更改的对象增加新的属性和办法（换句话说，创立了一个新对象)
  • Object.freeze()
    避免批改现有的对象属性或者向对象增加新的属性和值。
  • Object.seal()
    进行将任何新属性增加到对象，但仍容许更改现有属性。
  • Object.assign()
    容许将对象组合在一起。

想把我的技术文章写好一点，特意参考其余优良人的文档，感激未枝丫，我感觉他的文档写的不错，特意模拟，顺便挂上他的 JS30 挑战我的项目链接。

感激浏览，有问题分割我的邮箱 1803105538@qq.com.

退出移动版