0%

小数的表示分为「定点法」和「浮点法」

定点法

其实,整数和小数的主要区别,我们可以不规范地理解为是否存在小数点,对吧?(其实整数也是有小数点的,我们这里暂且这么理解)那么要表示小数,只需要在整数表示的基础上,加一个小数点,不就可以了吗?没错,这就是定点数的思路。

​定点数使用二进制,小数点的位置是事先约定好的,在使用的过程中不能改变,这也是定点数的名称的由来。有的同学可能会问了,那么,小数如何从十进制换成定点数呢?不着急,且看下面的例子:

其实很简单,和整数部分的完全相反。连续将小数部分的值乘以2,对于每一次得到的数,若整数为0,则顺序记下一个0,若整数突破了1,则记下1,然后整数部分重置为0,小数部分继续重复上述操作,直到小数部分为0为止。就像下面这样:

十进制的0.125

0.125*2=0.25 (记下0)

0.25*2=0.5 (记下0,则目前为00)

0.5*2=1.0 (整数部分为1,记下1,则目前为001)

小数部分为0,转换结束(这里是刚好结束,若整数位进一后小数部分还有剩余,则把整数部分变成0再继续重复上面的算法)

则十进制0.125的二进制形式为0.001

二进制转十进制

二进制 101.011 转化为十进制



一般在现在计算机的应用中,定点数一般只有两种情况,第一种是小数点在符号位之后,也就是表示纯小数,第二种是在最后,也就是表示整数。这种表示方法的范围并不大,如果需要表示类似于这样的数值的话,那么用定点数的话就会占很大的空间。(毕竟你要很多很多个0才行,对吧)于是乎,我们的先人又开始秀智商了。

浮点法

表示一组数,0.123,1.23,12.3,123

如果此时你用定点数来表示的话,你会发现,这四组数字的表示方法完全不同。但是,我们的数学经验却又告诉我们,这几个数字其实是可以用一种通式来表示的,你应该已经想到了,就是科学计数法。如果使用科学计数法,那么这几组数字的通式可以表示为。貌似比什么定点数方便多了。

但是,我们知道,计算机是用来处理二进制的,那么,我们在二进制里面,可不可以打造一套类似于科学计数法的思路来表示小数呢——这就是浮点数的基本思路。浮点数的表示方法有点类似科学计数法,但是又比科学计数法要复杂。

参考:
https://blog.csdn.net/jarvan5/article/details/115012434
https://www.jianshu.com/p/104f53c663c9

题记

  1. 1 px 问题是如何产生的?
  2. 为什么会有 二倍图,三倍图?
  3. 苹果公司所说的 Retina 屏是啥?
  4. 屏幕清晰度由哪个参数决定,分辨率越高就一定越清晰吗?
  5. 屏幕尺寸相同可以通过分辨率判断屏幕清晰度,屏幕尺寸不同,如何判断哪块屏幕更清晰?

pt

物理单位
1 pt = 1/72 inch
1 inch = 72 pt
72 pt = 96 px
绝对长度单位,多用于打印

inch

1 inch = 2.54 cm

px

1px 问题
获取设备像素比
js
window.devicePixelRatio
css
-webkit-min-device-pixel-ratio

dpr (devicePixelRatio)

设备像素比
dpi 和 dpr
window.devicePixelRatio是设备物理像素和设备独立像素(device-independent pixels,dips)之间的比率。是一个约数?
window.devicePixelRatio = 物理像素 / 设备独立像素

DIP (Device Independent Pixel)

设备独立像素(Device Independent Pixel):与设备无关的逻辑像素
css 像素是逻辑像素,并不是真实像素
Windows / Mac 电脑都可以设置设备独立像素

dpi (dots per inch)

和 ppi 基本相同

ppi (pixels per inch)

ppi 计算公式

ppi在120-160之间的手机被归为低密度手机,160-240被归为中密度,240-320被归为高密度,320以上被归为超高密度(例如苹果公司的Retina显示屏)

总结

CSS 只与设备独立像素有关系,尺寸相同,设备独立像素相同的屏幕,网页上的同一张图片显示的尺寸是相同的,只不过清晰度会有所不同。所以会有二倍图,三倍图。
宽 100px 的图片在 1:1 的屏幕上css设置为 100px,在 2:1 的屏幕上可以使用200px 的图片,css 同样设置为 100px 。
设备独立像素 (DIP) 是与设备无关的,可以调整的逻辑像素。

参考:

  1. 1 pt 的图形大小与其在屏幕上显示出的大小之间有什么关系?

  2. pt

  3. 设备像素比(devicePixelRatio)

  4. CSS像素、设备独立像素、设备像素之间关系

取值

font-weight可取值:100~900和normal、bold、bolder、lighter。

字体所拥有的字重的数量实际上很少存在满足有9个字重刚好跟100~900的CSS字重一一对应的情况,通常字体拥有的字重数量为4至6个。

不必担心,起码400和700对应的字重至少是每种字体必备的,譬如常见的 Arial、Helvetica、Georgia等等,只有400(normal)和700(bold)。

normal、bold

400 等同于 normal,而 700 等同于 bold。

bolder、lighter

bolder、lighter表示其字重值是基于从其父元素继承而来的字重计算所得的,与normal、bold所代表的字重并无关系。

参考
作者:人不中二枉少年
链接:https://www.jianshu.com/p/f9c6f9729fbb
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

问题

为什么 forEach 不行,而 普通 for 循环 和 for…of 却正常呢?

我们得先从 forEach 的源码 看起:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {

Array.prototype.forEach = function(callback/*, thisArg*/) {

var T, k;

if (this == null) {
throw new TypeError('this is null or not defined');
}

// 1. Let O be the result of calling toObject() passing the
// |this| value as the argument.
var O = Object(this);

// 2. Let lenValue be the result of calling the Get() internal
// method of O with the argument "length".
// 3. Let len be toUint32(lenValue).
var len = O.length >>> 0;

// 4. If isCallable(callback) is false, throw a TypeError exception.
// See: http://es5.github.com/#x9.11
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function');
}

// 5. If thisArg was supplied, let T be thisArg; else let
// T be undefined.
if (arguments.length > 1) {
T = arguments[1];
}

// 6. Let k be 0.
k = 0;

// 7. Repeat while k < len.
while (k < len) {

var kValue;

// a. Let Pk be ToString(k).
// This is implicit for LHS operands of the in operator.
// b. Let kPresent be the result of calling the HasProperty
// internal method of O with argument Pk.
// This step can be combined with c.
// c. If kPresent is true, then
if (k in O) {

// i. Let kValue be the result of calling the Get internal
// method of O with argument Pk.
kValue = O[k];

// ii. Call the Call internal method of callback with T as
// the this value and argument list containing kValue, k, and O.
callback.call(T, kValue, k, O);
}
// d. Increase k by 1.
k++;
}
// 8. return undefined.
};
}

摘抄最重要的部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 
O 为传入数组
len 为传入数组长度
callback 为传入回调函数
*/
while (k < len) {
var kValue;
if (k in O) {
kValue = O[k];
callback.call(T, kValue, k, O);
}
k++;
}

可以看到 callback.call(T, kValue, k, O); 这一句,callback 其实是我们传入的一个被 async 封装的 promise 对象,而 Array.prototype.forEach 内部并未对这个 promise 对象做任何处理,只是忽略它。

解决方案

如果我们尝试把 Array.prototype.forEach 改造一下,让它不要忽视,就可以达到效果了,如下:

1
2
3
4
5
Array.prototype.forEach = async function(callback/*, thisArg*/) {
// ………
await callback.call(T, kValue, k, O);
// ………
};

你总不能去侵入式的改造Array.prototype.forEach吧!所以最简单的办法就是抛弃 forEach,使用 for…of 或者 for 循环!

参考

Emoji Raw Emoji Code Description
🎉 :tada: Initial Commit
✨ :sparkles: when introducing New Features
🐎 :racehorse: when improving performance
⚡ :zap: when introducing Backward-InCompatible Features, maybe with @CHANGED Comment Tag
🚀 :rocket: Anything related to Deployments/DevOps
📚 :books: when writing docs
🎨 :art: when improving the format/structure of the code
📝 :memo: Add or update documentation.
📝 :pencil: when performing minor changes/fixing the code or language
🐛 :bug: when reporting a bug, with @FIXMEComment Tag
🔨 :hammer: when refactoring code
🔧 :wrench: Add or update configuration files.
💄 :lipstick: when improving UI/Cosmetic
💅 :nail_care: style
🍻 :beers: Write code drunkenly.
📰 :newspaper: when creating a new file
🚑 :ambulance: when fixing a bug
🐧 :penguin: when fixing something on Linux
🍎 :apple: when fixing something on Mac OS
🏁 :checkered_flag: when fixing something on Windows
🔥 :fire: when removing code or files, maybe with @CHANGED Comment Tag
🚜 :tractor: when change file structure. Usually together with 🎨
☔ :umbrella: when adding tests
🔬 :microscope: when adding code coverage
💚 :green_heart: when fixing the CI build
🔒 :lock: when dealing with security
⬆️ :arrow_up: when upgrading dependencies
⬇️ :arrow_down: when downgrading dependencies
⏩ :fast_forward: when forward-porting features from an older version/branch
⏪ :rewind: when backporting features from a newer version/branch
👕 :shirt: when removing linter/strict/deprecation warnings
♿ :wheelchair: when improving accessibility
🌐 :globe_with_meridians: when dealing with globalization/internationalization/i18n/g11n
🚧 :construction: WIP(Work In Progress) Commits, maybe with @REVIEW Comment Tag
💎 :gem: New Release
🥚 :egg: New Release with Python egg
🎡 :ferris_wheel: New Release with Python wheel package
🔖 :bookmark: Version Tags
🔈 :speaker: when Adding Logging
🔇 :mute: when Reducing Logging
💡 :bulb: New Idea, with @IDEA Comment Tag
❄️ :snowflake: changing Configuration, Usually together with 🐧 or 🎀 or 🚀
🎀 :ribbon: Customer requested application Customization, with @HACK Comment Tag
🐘 :elephant: PostgreSQL Database specific (Migrations, Scripts, Extensions, …)
🐬 :dolphin: MySQL Database specific (Migrations, Scripts, Extensions, …)
🍃 :leaves: MongoDB Database specific (Migrations, Scripts, Extensions, …)
🏦 :bank: Generic Database specific (Migrations, Scripts, Extensions, …)
🐳 :whale: Docker Configuration
🤝 :handshake: when Merge files
🍒 :cherries: when Commit Arise from one or more Cherry-Pick Commit(s)

参考
链接:https://www.jianshu.com/p/0bfdf5c41696
https://gitmoji.dev/
https://github.com/slashsBin/styleguide-git-commit-message

1
2
3
4
5
6
7
8
9
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

第一级 – 存活

  • i → Insert 模式,按 ESC 回到 Normal 模式.
  • x → 删当前光标所在的一个字符。
  • :wq → 存盘 + 退出 (:w 存盘, :q 退出) (陈皓注::w 后可以跟文件名)
  • dd → 删除当前行,并把删除的行存到剪贴板里
  • p → 粘贴剪贴板

推荐:

  • hjkl (强例推荐使用其移动光标,但不必需) →你也可以使用光标键 (←↓↑→).
    注: j 就像下箭头。
  • :help → 显示相关命令的帮助。你也可以就输入 :help 而不跟命令。(陈皓注:退出帮助需要输入:q)

第二级 – 感觉良好

参考:
https://coolshell.cn/articles/5426.html

在日常使用 zsh 的过程中,如果需要打很多命令,会很麻烦,除了可以使用ctrl+r 的方式来查询历史命令,还可以通过插件的方式来自动匹配命令,提高效率。

语法高亮也是帮助我们不要打错命令的好帮手。

第一步,进入 zsh 插件目录,并 clone 项目到此目录中:
cd “$ZSH_CUSTOM/plugins”
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git
git clone https://github.com/zsh-users/zsh-autosuggestions.git
第二步,配置 .zshrc 文件
… 上面省略
plugins = (git zsh-autosuggestions zsh-syntax-highlighting)
… 下面省略
最后一步,让配置生效
zsh
完成!👍

作者:万有引力万有
链接:https://www.jianshu.com/p/d70f9c4cb47c
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

调试 npm script 命令

注意:此为 configurations 中的一条配置,具体看下一条

1
2
3
4
5
6
7
8
9
10
{
"name": "Launch via NPM",
"type": "node",
"request": "launch",
"runtimeExecutable": "npm", //runtimeExecutable表示要使用的运行时,默认为node,这里我们配置成了npm
"runtimeArgs": [
"run-script", "dev" //这里的dev就对应package.json中的scripts中的dev
],
"port": 9229 //这个端口是调试的端口,不是项目启动的端口
},

调试指定 js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/test/filelist.js"
}
]
}

使用 nodemon 调试

参考:
https://www.cnblogs.com/little-ab/p/11796952.html