JavaScriptのアレイエクストラ

JavaScriptアレイは、多くのプログラミング言語の基本的なデータ構造であり、JavaScriptも例外ではありません。 Arrayの作業の詳細を簡素化するために、JavaScriptは配列拡張機能と呼ばれる一連の機能を提供します。この記事では、さまざまな配列拡張機能とその用途を紹介します。

キーポイント

JavaScriptの配列拡張機能は、Arrayの作業の多くの詳細を簡素化する関数であり、複雑なループを関数呼び出しに置き換えることにより、コードの読みやすさを向上させる関数です。それらには、
• 、forEach()、map()、filter()、every()、some()、reduce()、reduceRight()、indexOf()、lastIndexOf()、
などの方法が含まれます。
• forEach()
メソッドは、配列内の各要素のコールバック関数を呼び出すことにより、ループとアレイサブスクリプト表記の必要性を排除します。ただし、各要素の関数を呼び出すため、パフォーマンスの劣化を引き起こす可能性があります。
• map()forEach()関数はfilter()に似ていますが、コールバック関数によって返される値を含む配列を返します。また、
メソッドは値の配列も返しますが、ブール値を返すはずのコールバック関数の返品値に基づいています。
• reduce()reduceRight()メソッドは、配列内の各要素を処理し、単一の値を計算しますが、indexOf()は同じように動作しますが、配列の最後から始まります。 lastIndexOf()メソッドは、配列内の特定の要素を検索し、
も同じことを行いますが、配列の最後から検索を開始します。

背景

forほとんどすべての配列操作は、各配列要素を一度に1つずつ通過することにより実行されます。たとえば、次のコードでは、a

ループを使用して、配列のすべての要素をデバッグコンソールに記録します。

var foo = ["a", "b", "c", "d"];

for (var i = 0, len = foo.length; i < len; i++) {
  console.log(foo[i]);
}

まず、最も重要なことは、前の例が完全に有効なJavaScriptコードであることを理解する必要があります。ただし、複数の複雑なループがある場合、追跡変数は退屈になる可能性があります。配列拡張機能機能を使用すると、ループ全体を関数呼び出しに置き換えることができます。これにより、通常、コードの可読性が向上します。それでは、さまざまな配列拡張機能を見てみましょう。

foreach（）

forEach()多くの配列拡張機能と同様に、メソッドは、パラメーターとして別の関数を受信する関数高次関数です。 forEach()配列要素を通過する代わりに、コールバック関数は各要素で順番に呼び出されます。コールバック関数は、現在の配列要素、配列インデックス、アレイ自体の3つのパラメーターを受け入れます。次のコードでは、元の例が書き換えられてforEach()メソッドを使用しています。

var foo = ["a", "b", "c", "d"];

for (var i = 0, len = foo.length; i < len; i++) {
  console.log(foo[i]);
}

forEach()を使用すると、ループと配列の添え字表記の必要性がなくなることに注意してください。さらに、JavaScriptは関数レベルのスコープを使用するため、forEach()コールバック関数は、変数名の再利用を可能にする新しいスコープを提供します。唯一の欠点は、配列内の各要素の関数を呼び出すことによって発生するパフォーマンスの損失です。幸いなことに、この損失はしばしば無視できます。また、オプションのパラメーターをコールバック関数の後にforEach()に渡すことができることに注意してください。存在する場合、2番目のパラメーターは、コールバック関数で使用されるthis値を定義します。

map（）

map()関数はforEach()とほぼ同じです。唯一の違いは、コールバック関数によって返された値を含む配列をmap()に返すことです。たとえば、次のコードではmap()を使用して、入力配列内の各アイテムの平方根を計算します。次に、結果を配列として返し、表示します。また、アレイ拡張機能は、Math.sqrt()などの組み込みのJavaScript関数と互換性があることに注意してください。

["a", "b", "c", "d"].forEach(function(element, index, array) {
  console.log(element);
});

filter（）

forEach()やmap()のように、filter()メソッドはコールバック関数とオプションのthis値を受け入れます。そして、map()のように、filter()は、コールバック関数の返品値に基づいて値の配列を返します。違いは、filter()コールバック関数がブール値を返す必要があることです。戻り値がtrueの場合は、結果配列に配列要素を追加します。たとえば、次のコードは、文字xで始まらない元の配列の要素を削除します。この例では、各配列要素に対して正規表現（this値として渡されます）がテストされます。

var sqrts = [1, 4, 9, 16, 25].map(Math.sqrt);

console.log(sqrts);
// 显示 "[1, 2, 3, 4, 5]"

すべて（）およびsome（）

また、

every()およびsome()関数は、各配列要素でコールバック関数も実行されます。各コールバック関数がtrueを返す場合、every()はtrueを返し、それ以外の場合はfalse。同様に、少なくとも1つのコールバック関数がtrueを返した場合、some()はtrueを返します。次の例では、アレイ要素が5未満であるかどうかをテストするためにevery()およびsome()を使用します。この場合、最後の要素が5に等しいため、every()はfalseを返します。ただし、少なくとも1つの要素が5未満であるため、some()はtrueを返します。インデックスと配列のパラメーターは存在しますが、この例では必要ないため、コールバック関数から省略されていることに注意してください。

["x", "abc", "x1", "xyz"].filter(RegExp.prototype.test, /^x/);

reduce（）およびreaduceright（）

reduce()メソッドは、配列内の各要素を処理し（最初から開始）、単一の値を計算します。 reduce()コールバック関数とオプションの初期値をパラメーターとして好む。初期値が存在しない場合、最初の配列要素が使用されます。 reduce()コールバック関数は、これまでに見た他のコールバック関数とは異なります。これは、以前の値、現在の値、インデックス、および配列など、4つのパラメーターを受け入れます。 reduce操作の一般的な例は、配列のすべての値を追加することです。次の例はまさにこれを行います。コールバック関数が初めて呼び出された場合、previousは1に等しく、currentは2に等しくなります。後続の呼び出しでは、合計が最終値15に蓄積します。

var foo = ["a", "b", "c", "d"];

for (var i = 0, len = foo.length; i < len; i++) {
  console.log(foo[i]);
}

プロセスがアレイの終わりから始まり、最初に移動することを除いて、

reduceRight()メソッドと同じように動作します。 reduce()

indexof（）およびlastIndexof（）

メソッドは、配列内の特定の要素を検索し、最初の一致のインデックスを返します。一致が見つからない場合、indexOf()は-1を返します。 indexOf()最初のパラメーターとして検索する要素をお願いします。 2番目のオプションパラメーターは、検索の開始インデックスを指定します。たとえば、次のコードでは、配列内の文字zの最初の2つの発生を調べます。 2回目の外観を見つけるには、最初の登場を見つけて、その後から再び検索を開始する必要があります。 indexOf()

["a", "b", "c", "d"].forEach(function(element, index, array) {
  console.log(element);
});

メソッドは、配列の端から検索を開始することを除いて、まったく同じように機能します。 lastIndexOf()

結論

配列拡張機能関数を使用して、簡潔でクリアコードを記述します。残念ながら、一部の古いブラウザはこれらの方法をサポートしていません。ただし、これらのメソッドを検出して、オブジェクト（つまり

）をチェックできます。メソッドが欠落している場合は、独自の実装を簡単に提供できます。 Array.prototype Array.prototype.forEach

（FAQパーツをここに追加する必要があります。コンテンツは入力テキストのFAQパーツと同じですが、声明の順序を調整したり、同義語を置き換えるなど、対応する擬似オリジナルの変更が必要です。など）

以上がJavaScriptのアレイエクストラの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。