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中文网其他相关文章！