JS中絕對值函數Math.abs的用法詳解

一、Math.abs的概述

在JavaScript中，Math.abs是一個常用的函數，用於返回給定的數字的絕對值。絕對值是一個數的大小，與其正負無關。比如，-5和5的絕對值都是5。

Math.abs函數的語法及返回值如下：

Math.abs(x)

參數x可以是任何數字類型，包括數值、整數、浮點數。函數的返回值是參數x的絕對值。

二、使用Math.abs進行數學計算

Math.abs函數可以在數學計算中廣泛使用。

1、計算兩個數的差的絕對值：

let a = 10, b = 5;
let diff = Math.abs(a - b);
console.log(diff); // 輸出：「5」

2、計算兩個點在平面坐標繫上的距離：

let x1 = 0, y1 = 0;
let x2 = 3, y2 = 4;
let distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
console.log(distance); // 輸出：「5」

上面的例子中，先使用Math.pow函數計算坐標差的平方，再使用Math.sqrt函數計算平方根。

三、使用Math.abs進行條件判斷

在編程中，Math.abs函數也可以幫助我們進行條件判斷。

1、判斷兩個數是否相等：

function isEqual(a, b) {
  return Math.abs(a - b) < Number.EPSILON;
}

console.log(isEqual(0.1 + 0.2, 0.3)); // 輸出：「true」

注意，由於浮點數計算存在精度問題，所以需要使用Number.EPSILON作為容差範圍。

2、判斷一個數是否為零：

function isZero(x) {
  return Math.abs(x) < Number.EPSILON;
}

console.log(isZero(0.0001)); // 輸出：「false」
console.log(isZero(-0.0001)); // 輸出：「false」
console.log(isZero(Number.EPSILON)); // 輸出：「true」
console.log(isZero(0)); // 輸出：「true」

四、使用Math.abs進行動畫效果

Math.abs函數還可以幫助我們創建動畫效果。

1、元素在頁面上的滾動效果：

function scrollElement(element, distance) {
  let currentDistance = 0;
  let distanceDelta = 1;
  let maxDistanceDelta = 10;

  function scroll() {
    currentDistance += Math.abs(distance - currentDistance) > maxDistanceDelta ? maxDistanceDelta : Math.abs(distance - currentDistance);
    element.scrollTop = currentDistance;
    if (currentDistance === distance) {
      clearInterval(scrollInterval);
    }
  }

  let scrollInterval = setInterval(scroll, 20);
}

scrollElement(document.body, 500);

上述代碼中，scrollElement函數接收兩個參數，分別是需要滾動的元素和需要滾動的距離。在函數內部，使用Math.abs函數計算每一次需要滾動的距離，添加動畫效果。

2、元素在頁面上的平移效果：

function moveElement(element, x, y) {
  let currentX = 0;
  let currentY = 0;
  let deltaX = 1;
  let deltaY = 1;

  function move() {
    currentX += Math.abs(x - currentX) > deltaX ? Math.sign(x - currentX) * deltaX : x - currentX;
    currentY += Math.abs(y - currentY) > deltaY ? Math.sign(y - currentY) * deltaY : y - currentY;
    element.style.transform = `translate(${currentX}px, ${currentY}px)`;
    if (currentX === x && currentY === y) {
      clearInterval(moveInterval);
    }
  }

  let moveInterval = setInterval(move, 20);
}

moveElement(document.getElementById("box"), 500, 500);

上述代碼中，moveElement函數接收三個參數，分別是需要移動的元素、需要移動的水平距離和需要移動的豎直距離。在函數內部，使用Math.abs函數計算每一次需要移動的距離，添加動畫效果。