javascript 利用 Math.min 与 Math.max 优化逻辑判断

Math.minMath.max 方法常用来获取多个数值的最小值和最大值,比如:

1
2
Math.min(10, 30, 40, 3); // 返回 3
Math.max(10, 30, 40, 3); // 返回 40

利用此特性,可以优化一些常见数字判断,尤其在方法传参时候,数字判断能有奇效。

  • 常见 if 写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function test (num1, num2) {
    if (num1 < 60) {
    num1 = 60;
    }
    if (num2 > 100) {
    num2 = 100;
    }
    console.log(num1, num2);
    }
  • 常见三元表达式

    1
    2
    3
    4
    5
    function test (num1, num2)) {
    num1 = num1 < 60 ? 60 : num1;
    num2 = num2 > 100 ? 100 : num2;
    console.log(num1, num2);
    }

以上开发中常见逻辑判断写法,其实这种数字判断可以利用 Math 优化,如下:

1
2
3
4
5
function test (num1, num2)) {
num1 = Math.max(num1, 60);
num2 = Math.min(num2, 100);
console.log(num1, num2);
}

这种写法好处是如果有多个数值进行比较时,这种写法更精简。

比如: hexo 图片添加水印(png, jpeg, jpg, gif) 文章中有一段代码:

1
2
3
logoImage.resize(Math.min(logoImage.bitmap.width, img.width * (8 / 10)), Jimp.AUTO);

const margin = Math.min(img.width * LOGO_MARGIN_PERCENTAGE, img.height * LOGO_MARGIN_PERCENTAGE, 20);

此代码逻辑是:

第一段:如果水印 LOGO 图片宽度小于图片宽度的 80% ,则将水印 LOGO 等比缩小 80%。

第二段:水印位置最多添加在距离图片右下角 20px 位置,不能超过 20px。

第二段如果使用 if 判断,会多出更多的代码,精简后大概如下:

1
width > 20 ? ( height > 20 ? 20 : height) : width

相比而言,使用 Math.min 更简洁。

本文由 linx(544819896@qq.com) 创作,采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。本文链接为: https://blog.jijian.link/2020-04-08/js-math-min-max/

如果您觉得文章不错,可以请我喝一杯咖啡!