JavaScript 配列メソッドの内部 (パート)

この記事では、.map() ループを使用して機能を再作成することにより、一般的な JavaScript 配列メソッド (.includes()、.concat()、.flat()、for) をわかりやすく説明します。 for ループは効率が悪く、読みにくいように見えるかもしれませんが、その基礎となるメカニズムを理解することで、組み込みの配列メソッドをより深く理解することができます。飛び込んでみましょう!

---

.map()

.map() メソッドは、既存の配列の各要素に関数を適用することにより、新しい配列を生成します。 空ではない要素のみを処理し、元の配列は変更されません。

データ構造から顧客名のリストを必要とする銀行アプリケーションを考えてみましょう。 .map() が最も効率的なソリューションですが、for ループを使用してこれを実現する方法を見てみましょう。

const bankAccounts = [
  {
    id: 1,
    name: "Susan",
    balance: 100.32,
    deposits: [150, 30, 221],
    withdrawals: [110, 70.68, 120],
  },
  { id: 2, name: "Morgan", balance: 1100.0, deposits: [1100] },
  {
    id: 3,
    name: "Joshua",
    balance: 18456.57,
    deposits: [4000, 5000, 6000, 9200, 256.57],
    withdrawals: [1500, 1400, 1500, 1500],
  },
  { id: 4, name: "Candy", balance: 0.0 },
  { id: 5, name: "Phil", balance: 18, deposits: [100, 18], withdrawals: [100] },
];

// Using a 'for' loop:
function getAllClientNamesLoop(array) {
  const acctNames = [];
  for (const acct of array) {
    acctNames.push(acct.name);
  }
  return acctNames;
}

// Using .map():
function getAllClientNamesMap(array) {
  return array.map(acct => acct.name);
}

console.log(getAllClientNamesLoop(bankAccounts)); // Output: ['Susan', 'Morgan', 'Joshua', 'Candy', 'Phil']
console.log(getAllClientNamesMap(bankAccounts)); // Output: ['Susan', 'Morgan', 'Joshua', 'Candy', 'Phil']

for ループのアプローチでは、空の配列を作成し、名前を反復的にプッシュする必要があります。 .map() メソッドは大幅に簡潔で読みやすくなっています。

.includes()

このメソッドは、配列に特定の値が含まれているかどうかをチェックし、true または false を返します。

for ループと .includes() を使用してこれを示す関数を構築しましょう:

// Using a 'for' loop:
function doesArrayIncludeLoop(array, value) {
  let isIncluded = false;
  for (const elem of array) {
    if (elem === value) {
      isIncluded = true;
      break; // Optimization: Exit loop once value is found
    }
  }
  return isIncluded;
}

// Using .includes():
function doesArrayIncludeIncludes(array, value) {
  return array.includes(value);
}

console.log(doesArrayIncludeLoop([1, 1, 2, 3, 5], 6)); // Output: false
console.log(doesArrayIncludeIncludes([1, 1, 2, 3, 5], 3)); // Output: true

for ループ バージョンはフラグを初期化して反復しますが、.includes() は直接的でクリーンなソリューションを提供します。

.concat()

このメソッドは、2 つ以上の配列を 1 つの新しい配列にマージします。

ここでは、for ループと .concat() を使用した比較を示します:

// Using 'for' loops:
function concatArraysLoop(arr1, arr2) {
  const concatenatedArray = [...arr1, ...arr2]; //Spread syntax for conciseness
  return concatenatedArray;
}

// Using .concat():
function concatArraysConcat(arr1, arr2) {
  return arr1.concat(arr2);
}

console.log(concatArraysLoop([0, 1, 2], [5, 6, 7])); // Output: [0, 1, 2, 5, 6, 7]
console.log(concatArraysConcat([0, 1, 2], [5, 6, 7])); // Output: [0, 1, 2, 5, 6, 7]

繰り返しますが、.concat() は優れた簡潔さと読みやすさを提供します。

.flat()

.flat() メソッドは、ネストされた配列を単一レベルの配列にフラット化します。 オプションの深さパラメータを受け入れます。

両方の方法を使用して、配列を 1 レベルの深さにフラット化しましょう:

// Using 'for' loops:
function flatArraysLoop(array) {
  const flattenedArray = [];
  for (const elem of array) {
    if (Array.isArray(elem)) {
      flattenedArray.push(...elem); //Spread syntax
    } else {
      flattenedArray.push(elem);
    }
  }
  return flattenedArray;
}

// Using .flat():
function flatArraysFlat(array) {
  return array.flat();
}

console.log(flatArraysLoop([1, 2, 3, [4, [5, 6]], 10])); // Output: [1, 2, 3, 4, [5, 6], 10]
console.log(flatArraysFlat([1, 2, 3, [4, [5, 6]], 10])); // Output: [1, 2, 3, 4, [5, 6], 10]

for ループを使用した、より深くネストされた配列の平坦化はますます複雑になり、.flat(depth) の強力さとシンプルさが強調されます。

---

この調査は、JavaScript の組み込み配列メソッドの優雅さと効率性を示しています。 パート 2 では、さらに配列メソッドについて詳しく説明します。 ご意見やご質問をお気軽に共有してください。 (パート 2 へのリンクはここにあります)

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