JavaScriptで配列を編集して新しい配列を生成する方法

JavaScriptで、配列の要素を編集することは簡単ですが、元の配列を変更したくない場合もあります。本記事では、元の配列を変更せずに、編集して新しい配列を生成する簡単な方法を紹介します。

Array.prototype.map()

Array.prototype.map()メソッドは、元の配列の各要素に対してコールバック関数を実行し、新しい配列を生成します。コールバック関数は、第1引数に現在の要素、第2引数に現在のインデックス、第3引数に元の配列を受け取ります。

一般的な使い方
const originalArray = [1, 2, 3, 4, 5];

const newArray = originalArray.map((element) => {
  return element * 2;
});

console.log(newArray); // [2, 4, 6, 8, 10]

コールバック関数の引数を全て指定

const originalArray = [1, 2, 3, 4, 5];

const newArray = originalArray.map((element, index, array) => {
  console.log(index, array);
  return element * 2;
});

console.log(newArray);

0 Array [1, 2, 3, 4, 5]
1 Array [1, 2, 3, 4, 5]
2 Array [1, 2, 3, 4, 5]
3 Array [1, 2, 3, 4, 5]
4 Array [1, 2, 3, 4, 5]
Array [2, 4, 6, 8, 10]

JSON配列からの抽出

次のように、JSONの配列から任意の項目だけを抜き出した配列にすることも簡単にできます。

const jsonArray = [
  { no: 10, type: "MF" },
  { no: 7, type: "MF" },
  { no: 9, type: "FW" },
  { no: 1, type: "GK" },
  { no: 3, type: "DF" }
];

const newArray = jsonArray.map((element) => element.no);

console.log(newArray); // > Array [10, 7, 9, 1, 3]

Array.prototype.filter()

Array.prototype.filter()メソッドは、元の配列の各要素に対してコールバック関数を実行し、その戻り値が真となる要素だけを含む新しい配列を生成します。コールバック関数は、第1引数に現在の要素、第2引数に現在のインデックス、第3引数に元の配列を受け取ります。

一般的な使い方

const originalArray = [1, 2, 3, 4, 5, 6];

const newArray = originalArray.filter((element) => {
  return element % 2 === 0;
});

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

コールバック関数の引数を全て指定

const originalArray = [1, 2, 3, 4, 5, 6];

const newArray = originalArray.filter((element, index, array) => {
  console.log(index, array);
  return element % 2 === 0;
});

console.log(newArray);

0 Array [1, 2, 3, 4, 5, 6]
1 Array [1, 2, 3, 4, 5, 6]
2 Array [1, 2, 3, 4, 5, 6]
3 Array [1, 2, 3, 4, 5, 6]
4 Array [1, 2, 3, 4, 5, 6]
5 Array [1, 2, 3, 4, 5, 6]
Array [2, 4, 6]
にほんブログ村 IT技術ブログへ

関連記事

コメント

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です