JavaScript 陣列方法，底層原理，部分

本文繼續我們對 JavaScript 陣列方法的探索。如果您是本系列的新手，可以在此處找到第 1 部分。我們將研究幾種常見的陣列方法 - Math.max()、Math.min()、.reverse()、.filter() 和 .reduce() - 並展示如何使用 for 循環來實現相同的結果。 這種比較有望闡明這些方法的功能。

---

Math.min() 和 Math.max()

這些方法分別找出集合中的最小和最大數字。您可以直接提供數字作為參數，或使用具有展開語法的陣列。

<code class="language-javascript">// FIND THE MINIMUM VALUE IN AN ARRAY:
// Using a 'for' loop:
function findMinValueInArray(array) {
  let min = array[0];
  for (let i = 1; i < array.length; i++) {
    if (array[i] < min) {
      min = array[i];
    }
  }
  return min;
}
findMinValueInArray([33, -5544, 66, 55]); // returns: -5544

// Using Math.min():
function findMinValueInArray(array) {
  return Math.min(...array);
}
findMinValueInArray([33, -5544, 66, 55]); // returns: -5544</code>

Math.min() 顯然更簡潔且不易出錯。 Math.max() 的工作方式類似，但其 for 循環實現略有不同：

<code class="language-javascript">// FIND THE MAXIMUM VALUE IN AN ARRAY:
// Using a 'for' loop:
function findMaxValueInArray(array) {
  let max = array[0];
  for (let i = 1; i < array.length; i++) {
    let currentNum = array[i];
    if (currentNum > max) {
      max = currentNum;
    }
  }
  return max;
}
findMaxValueInArray([33, -5544, 66, 55]); // returns: 66

// Using Math.max():
function findMaxValueInArray(array) {
  return Math.max(...array);
}
findMaxValueInArray([33, -5544, 66, 55]); // returns: 66</code>

`.reverse()`

此方法反轉數組中元素的順序，從而修改原始數組。

<code class="language-javascript">// REVERSE ARRAY ELEMENTS
// Using a 'for' loop:
function reverseArray(array) {
  let reversedArray = [];
  for (let i = array.length - 1; i >= 0; i--) {
    reversedArray.push(array[i]);
  }
  return reversedArray;
}
reverseArray([1, 2, 3, 4, 5]); // returns: [5, 4, 3, 2, 1]

// Using .reverse():
function reverseArray(array) {
  return array.reverse();
}
reverseArray([1, 2, 3, 4, 5]); // returns: [5, 4, 3, 2, 1]</code>

內建方法顯著提高了效率和可讀性。 for 循環方法需要建立一個新數組並手動推送元素，增加了出錯的風險。

`.filter()`

此方法建立一個新數組，僅包含通過提供的測試函數的元素。

讓我們考慮一組銀行帳戶，每個帳戶都有一個 balance 屬性。我們將過濾餘額為零的帳戶。

<code class="language-javascript">// Using a 'for' loop:
function getClientWithNoMoney(array) {
  let acctsWithZeroBalance = [];
  for (let account of array) {
    if (account.balance === 0) {
      acctsWithZeroBalance.push(account);
    }
  }
  return acctsWithZeroBalance;
}

// Using .filter():
function getClientWithNoMoney(array) {
  return array.filter((account) => account.balance === 0);
}</code>

.filter() 提供了更乾淨、更簡潔的解決方案。 for 循環需要手動建立陣列和推入元素，這使得它更容易出錯。

`.reduce()`

.reduce() 將函數累積地應用於陣列元素，產生單一值。

一個簡單的例子是對陣列元素求和，但我們來計算平均值：

<code class="language-javascript">// With 'for' loop:
function getAverage(array) {
  let sum = 0;
  for (let i = 0; i < array.length; i++) {
    sum += array[i];
  }
  return sum / array.length;
}

// Using .reduce():
function getAverage(array) {
  return array.reduce((cv, acc) => {
      return cv + acc;
    }) / array.length;
  );
}
getAverage([10, 20, 30, 40]); // returns: 25</code>

雖然這裡節省的程式碼並不顯著，但與 .reduce() 循環方法相比，for 仍然提高了可讀性並減少了出錯的可能性。

---

這些範例說明了使用內建 JavaScript 陣列方法的優點。 雖然 for 循環提供了基本控制，但這些方法提供了簡潔性、可讀性並減少了潛在的錯誤。 如果您對其他數組方法有疑問，請發表評論。 如果您覺得這篇文章有幫助，請分享！ 本系列的第 1 部分可在此處取得。

感謝您的閱讀！

最初於 2023 年 2 月 13 日以簡單英文發佈於 Medium for JavaScript

以上是JavaScript 陣列方法，底層原理，部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！