技術共有

JavaScript 配列の一般的なメソッドに関する詳細なチュートリアル

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

JavaScript では、配列は複数の値を格納するために使用される非常に重要なデータ構造です。 JS には配列を操作するための組み込みメソッドが多数用意されており、データ処理がより簡単かつ効率的になります。この記事では、日常の開発でよく使用されるメソッドだけでなく、インタビューでも取り上げた、よく使われるいくつかのメソッドを詳しく紹介します。

1.push()とpop()

押す()

Push() メソッドは、1 つ以上の要素を配列の末尾に追加し、新しい配列の長さを返します。

  1. let arr = [1, 2, 3];
  2. let newLength = arr.push(4, 5); // newLength is 5, arr is [1, 2, 3, 4, 5]

パラメータ: 配列の末尾に追加する 1 つ以上の要素。

戻り値: 新しい配列の長さ。

ポップ()

Pop() メソッドは、配列の末尾から要素を削除し、その要素を返します。

  1. let arr = [1, 2, 3, 4];
  2. let removedElement = arr.pop(); // removedElement is 4, arr is [1, 2, 3]

パラメータ: なし。

戻り値: 削除された要素。

2.shift() と unshift()

シフト()

SHIFT() メソッドは、配列の先頭にある要素を削除し、その要素を返すために使用されます。

  1. let arr = [1, 2, 3, 4];
  2. let removedElement = arr.shift(); // removedElement is 1, arr is [2, 3, 4]

パラメータ: なし。

戻り値: 削除された要素。

シフト解除()

unshift() メソッドは、1 つ以上の要素を配列の先頭に追加し、新しい配列の長さを返します。

  1. let arr = [2, 3, 4];
  2. let newLength = arr.unshift(0, 1); // newLength is 5, arr is [0, 1, 2, 3, 4]

パラメータ: 配列の先頭に追加する 1 つ以上の要素。

戻り値: 新しい配列の長さ。

3.slice() と splice()

スライス()

lice() メソッドは、最初から最後まで (排他的) に選択された新しい配列を返すために使用されます。元の配列は変更されません。

  1. let arr = [1, 2, 3, 4, 5];
  2. let newArr = arr.slice(1, 3); // newArr is [2, 3], arr is [1, 2, 3, 4, 5]

パラメータ:

始める(オプション): このインデックスから (およびインデックスを含めて) 抽出を開始します。

終わり(オプション): このインデックスの前 (およびインデックスは含まない) で抽出を終了します。

戻り値:

~を含む新しい配列 始める 到着終わり(除く 終わり)要素。

スプライス()

スプライス() メソッドは、既存の要素を削除または置換したり、新しい要素を追加したりして、配列の内容を変更するために使用されます。戻り値は削除された要素です。

  1. let arr = [1, 2, 3, 4, 5];
  2. let removedElements = arr.splice(2, 2, 6, 7); // removedElements is [3, 4], arr is [1, 2, 6, 7, 5]

パラメータ:

始める: 変更の開始位置を指定します。

削除カウント(オプション): 削除する要素の数を示す整数。

項目1、項目2、...(オプション): 配列に追加する新しい要素。

戻り値: 削除された要素を含む配列。

4. 連結()

連結() 2 つ以上の配列を結合するために使用されるメソッド。このメソッドは既存の配列を変更しませんが、新しい配列を返します。

  1. let arr1 = [1, 2, 3];
  2. let arr2 = [4, 5, 6];
  3. let newArr = arr1.concat(arr2, [7, 8]); // newArr is [1, 2, 3, 4, 5, 6, 7, 8]

パラメータ: 現在の配列にマージされる配列または値。

戻り値: 新しい配列。

5. 各()

各() メソッドは、配列の各要素に対して提供された関数を 1 回実行します。

  1. let arr = [1, 2, 3, 4];
  2. arr.forEach((element, index) => {
  3. console.log(`Element at index ${index} is ${element}`);
  4. });
  5. // Output:
  6. // Element at index 0 is 1
  7. // Element at index 1 is 2
  8. // Element at index 2 is 3
  9. // Element at index 3 is 4

パラメータ: 現在の要素、要素インデックス、配列自体をパラメータとして受け取る関数。

戻り値: なし。

6. マップ()

地図() このメソッドは新しい配列を作成します。その結果、配列内の各要素は、提供された関数への呼び出しの戻り値になります。

  1. let arr = [1, 2, 3, 4];
  2. let newArr = arr.map(element => element * 2); // newArr is [2, 4, 6, 8]

パラメータ: 現在の要素、要素インデックス、配列自体をパラメータとして受け取る関数。

戻り値: 新しい配列。

7. フィルター()

フィルター() このメソッドは、提供された関数によって実装されたテストのすべての要素を含む新しい配列を作成します。

  1. let arr = [1, 2, 3, 4, 5];
  2. let newArr = arr.filter(element => element > 2); // newArr is [3, 4, 5]

パラメータ: 現在の要素、要素インデックス、配列自体をパラメータとして受け取り、ブール値を返す関数。

戻り値: 新しい配列。

8. 減らす()

減らす() このメソッドは、配列内の各要素に対して指定したリデューサー関数を (昇順で) 実行し、その結果を 1 つの戻り値に要約します。

  1. let arr = [1, 2, 3, 4];
  2. let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum is 10

パラメータ:減速機 アキュムレータと現在値を引数として受け取る関数。

初期値(オプション): コールバック関数を初めて呼び出すときの最初のパラメーターの値として。

戻り値: 累計結果。

9. 検索()

探す() このメソッドは、指定されたテスト関数を満たす配列内の最初の要素の値を返します。それ以外の場合は戻る未定義

  1. let arr = [1, 2, 3, 4];
  2. let foundElement = arr.find(element => element > 2); // foundElement is 3

パラメータ: 現在の要素、要素インデックス、配列自体をパラメータとして受け取り、ブール値を返す関数。

戻り値: テストに合格した最初の要素値。

10. 含む()

を含む() このメソッドは、配列に指定された値が含まれているかどうかを判断するために使用され、状況に応じて、含まれている場合はその値が返されます。真実、それ以外の場合は戻ります 間違い

  1. let arr = [1, 2, 3, 4];
  2. let hasElement = arr.includes(3); // hasElement is true
  3. let notIncluded = arr.includes(5); // notIncluded is false

パラメータ:

検索する値: 検索する要素の値。

インデックスから(オプション): このインデックスから検索を開始します。

戻り値: ブール値。

これらの一般的な JavaScript 配列メソッドを学習することで、バックエンドによって渡されたデータをより効率的に処理し、より簡潔で読みやすいコードを作成できるようになります。この記事がお役に立てば幸いです!