1. 实现四舍五入,保留两位小数
const v = 0.0635455;
// 方式1,保留2位小数,返回的是number格式
const formatted = Math.round(v * 100) / 100;
// 方式2,保留2位小数,返回的是字符串格式
const formatted = v.toFixed(2);
在使用浮点数运算时,有时会出现无限循环的情况,这是由于浮点数在转换成二进制的时候就会出现。将浮点数转换为二进制形式的过程如下:
-
将整数部分转换为二进制:
- 将整数部分除以 2,记录余数,直到商变为 0。余数倒序排列即为整数部分的二进制形式。
-
将小数部分转换为二进制:
- 将小数部分乘以 2,取整数部分作为二进制位,小数部分继续乘以 2,直到小数部分为 0 或达到所需的精度。
举例:一个典型的例子就是 0.1 这个值,将 0.1 转换为二进制的过程如下:
- 小数部分 0.1 乘以 2:
- 0.1 × 2 = 0.2 (取整数部分 0)
- 小数部分 0.2 乘以 2:
- 0.2 × 2 = 0.4 (取整数部分 0)
- 小数部分 0.4 乘以 2:
- 0.4 × 2 = 0.8 (取整数部分 0)
- 小数部分 0.8 乘以 2:
- 0.8 × 2 = 1.6 (取整数部分 1)
重复这个过程,我们会发现小数部分会产生一个无限循环的二进制序列。
因此尽量不要直接将对浮点数的运算结果直接展示出来。
2. 随机数算法
生成一个固定范围的随机数:min + (max-min)*Math.random()
生成一个随机排列 [1, 2, 3, 4].sort((a, b) => return Math.random() - 0.5)
快速取整:<< 0和 >> 0都是取整,是js里性能最快的取整,不管正负数都是去掉小数部分;和Math.floor
、Math.ceil
、Math.round
不一样。
例如: 1.23 >> 0 -> 1 -2.59 << 0 -> -2
3. 轮播图取值
取值逻辑 fix: i => ((i % length) + length) % length
这个函数的作用是修正给定的索引 i
,使其始终处于 0
到 length-1
的范围内。这对于轮播组件非常有用,因为当用户点击上一个或下一个按钮时,索引可能会超出 0
到 length-1
的范围。
这个函数的实现原理如下:
-
i % length
: 这个操作可以将i
限制在0
到length-1
的范围内。但是,如果i
为负数,这个操作会返回一个负数。 -
(i % length) + length
: 这个操作可以确保结果始终为非负数。如果i
为负数,i % length
会返回一个负数,但加上length
后会变成一个正数。 -
((i % length) + length) % length
: 这个最后的取模操作可以确保结果在0
到length-1
的范围内。即使(i % length) + length
的结果大于length
,取模操作也会将其缩减到0
到length-1
的范围内。
总之,这个 fix
函数可以确保无论 i
的值是多少,它都会被修正为 0
到 length-1
之间的一个合法索引。这对于轮播组件
的实现非常重要,可以确保组件的行为是可预测的,无论用户的操作如何。