跳到主要内容

· 阅读需 8 分钟
熊滔

在高中的时候我有这么一个思考,灵感源于一道物理题目

一个小球从高度为 hh 的地方下落,落在地面上接着弹起,但是由于与地面碰撞造成能量损失,使得每次弹起的高度只有之前高度的 1/41/4

这道题目看起来是没有什么问题,当时我的想法是每次球的高度都会变为原来的 1/41/4,所以球是会一直这样弹下去的,就像是庄子说的

一尺之棰,日取其半,万世不竭。

所以在这里我得到一个结论,小球会一直运动下去,所以小球的运动时间为无穷大。

· 阅读需 25 分钟
熊滔

Promise 的使用

回调地狱

首先我们了解一下 Promise 出现的背景,假设有下面的程序

let name = getUserNameById(id);
let score = getScoreByName(name);
let scholarship = getScholarshipByScore(score);
console.log(scholarship);

这个程序首先根据 id 去获取名字,接着根据拿到的名字取获得分数,最后根据分数去获取奖学金,最后打印出奖学金。但是这个程序真的能达到预期的效果吗? 答案是不能,因为 JavaScript 是异步的,对于一般的耗时操作并不会立即执行,而是将函数保存在一个队列中,直到代码执行完毕,才会拿出队列中的函数执行。所以上面的函数都不会被立即执行,所以当然没有返回值,所以上面的 name, score, scholarship 都是 undefined

为了解决这种情况,我们一般会使用回调函数的形式,等我们根据 id 拿到 name 之后,将 name 传入回调函数,这样就可以保证"同步"的效果,所以我们将上面的代码修改如下

getUserNameById(id, function (name) {
getScoreByName(name, function (score) {
getScholarshipByScore(score, function (scholarship) {
console.log(scholarship);
});
});
});

· 阅读需 36 分钟
熊滔

介绍

TypeScript是什么

TypeScript 是什么? 引用官方的定义

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.

简单翻译就是

TypeScriptJavaScript 的超集,并且可以被编译成 JavaScript。它可以运行在任何浏览器,任何主机,任何操作系统上。并且它是开源的。

看到这里你可能对 TypeScript 还是没有什么感觉,其实在我看来 TypeScript 是对 JavaScript 做了各种限制,这里说的限制并不是贬义的意思,因为 JavaScript 实在是太灵活了,很多的问题只有在运行的时候才会暴露出来,比如对于函数,即使定义时要求传两个参数,但是在使用时却可以传入任意的参数,所以你无法限制使用该函数的用户传入正确的参数,如果碰到不仔细看 API 文档的用户,鬼知道它使用的时候会传入什么,出了问题说不定会甩锅你兼容性做的不好。而 TypeScript 则限制了这一点,在使用时传入的参数必须与定义传入的相同,并且有提示每个参数的作用,用户使用该函数时必须按规定的来。

· 阅读需 28 分钟
熊滔

在字符串的处理中,我们经常要进行字符串的匹配,校验等等操作。比如校验字符串的格式是否符合邮箱,电话号码的格式,校验密码是否符合要求,密码中是否包含数字和字母等等;又或者匹配得到某种规则的字符串。这一些操作如果使用常规的方法进行字符串操作,会花费较大的代价,包括时间和精力。

正则表达式是用来表达字符串的规则,它可以检验字符串是否符合某个特定的规则,或者匹配字符串中符合规则的字符,在一般的使用中,正则表达式一般用来匹配字符串中的字符或者字符串中特定的位置。

正则对象

JavaScript 正则对象的创建有两种常见的方法,一是使用 RegExp 构造函数进行创建,二是使用字面量的方法进行创建,如下

let regex1 = new RegExp('hello', 'g');
let regex2 = /hello/g;

其中 hello 表示字符串的规则,用来匹配字符串中的"hello"g 表示进行全局匹配(global),像这样的标志还有两个,m 表示进行多行匹配(multiline),i 表示忽略大小写(ignoreCase),这三个标志互不冲突,可以同时使用,如

let regex = /hello/igm;

· 阅读需 5 分钟
熊滔

防抖与节流是两个出于性能考虑提出的概念,如果在短时间内多次触发同一函数,可能会产生页面的卡顿,以及性能的降低,针对这种情况,提出了防抖与节流两个解决方案。

防抖与节流的概念

为了解释如上的两个概念,我们以一个例子开始。有一个搜索框,当用户输入搜索内容时,会同时向后端发起请求,给出相近的词条以给用户提示

如果当每次用户输入一个字符都向都端发起一个请求,那么发起请求的次数就太频繁了,这时有两种策略:

  1. 当用户停止输入一段时间后,例如 500ms,我们向后端发起一个请求
  2. 每隔固定的时间向后端发起一个请求

第一种策略我们叫做防抖,第二种策略我们称为节流。

有一个形象的比喻,以公交车发车为例,有两种发车方案:

  1. 当乘客上车后,如果经过一段时间没有乘客上车了,就发车
  2. 发车时间固定,每隔一段时间发一次车

我们将发车比喻为向后端发起一个请求,那么这两种发车的策略就分别对应为防抖和节流。