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

文章同步发布：https://blog.jijian.link/2020-04-08/js-math-min-max/

 

Math.min 和 Math.max 方法常用来获取多个数值的最小值和最大值，比如：

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

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

常见 if 写法

function test (num1, num2) {
  if (num1 < 60) {
    num1 = 60;
  }
  if (num2 > 100) {
    num2 = 100;
  }
  console.log(num1, num2);
}

常见三元表达式

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

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

function test (num1, num2)) {
  num1 = Math.max(num1, 60);
  num2 = Math.min(num2, 100);
  console.log(num1, num2);
}

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

比如： hexo 图片添加水印（png, jpeg, jpg, gif） 文章中有一段代码：

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 判断，会多出更多的代码，精简后大概如下：

const margin = width > 20 ? ( height > 20 ? 20 : height) : width;

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