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 日に Plain English で Medium for JavaScript に公開されました

以上がJavaScript 配列メソッド、内部的な部分の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。