0
0

はじめてのJavaScript:初心者の学び場(配列操作編)

Posted at

これはJavaScriptを学んでいるうえでのメモ書きです。
間違っている個所などご指摘の方お願いします。

配列操作

map() メソッド

map() メソッドは、元の配列の各要素に対して指定されたコールバック関数を実行し、その戻り値を新しい配列に格納します。元の配列の要素数と同じ長さの新しい配列が作成

const newArray = array.map((element, index, array) => {
  // 各要素に対する処理を記述し、その結果を返す
});

コールバック関数の引数

map() メソッドに渡されるコールバック関数は、3つの引数を取ります。
1.要素の値(element)
現在処理されている配列の要素の値です。この値を変更しても、元の配列に影響を与えることはありません。

2.インデックス (index)
現在処理されている配列の要素のインデックスです。配列内の要素の位置を示します。

3.元の配列 (array)
map() メソッドが呼び出された元の配列自体です。この引数を使用して、元の配列全体にアクセスすることができます。

注意点

・コールバック関数内で元の配列 (array) を変更しても、新しい配列には影響しません。map() メソッドは元の配列を変更せず、新しい配列を作成して返します。

・コールバック関数内では、元の配列 (array) を直接変更することは一般的に推奨されません。そのような変更は、元の配列と新しい配列の整合性を乱す可能性があります。

参考例

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((number, index) => {
  console.log(`Processing element ${number} at index ${index}`);
  return number * number;
});

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

配列 numbers の各要素が2乗された新しい配列が作成される。
コールバック関数内で要素の値とインデックスがログに出力されることがわかる。

filter() メソッド

配列内の要素をフィルタリングするためのメソッドであり、指定された条件に合致する要素だけからなる新しい配列を作成します。このメソッドは、条件に一致する要素のみを残して他の要素を取り除くときに便利

注意点

・filter() メソッドは元の配列を変更せず、条件に合致する要素だけを含む新しい配列を作成して返します。

・コールバック関数内では、元の配列 (array) を直接変更することは一般的に推奨されません。そのような変更は、元の配列と新しい配列の整合性を乱す可能性があります。

参考例

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

配列 numbers の各要素が偶数かどうかをチェックし、偶数の要素だけからなる新しい配列 evenNumbers を作成

filter() メソッドは、配列内の要素を効果的にフィルタリングするための強力なツールです。特定の条件に基づいて配列を絞り込む必要がある場合に、非常に役立ちます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0