JavaScriptの配列メソッド: オブジェクトの配列を扱うときに役立つ便利な配列メソッドを分かりやすく解説

サイト構築 -JavaScript

Post on:2023年1月11日

sponsorsr

JavaScriptでオブジェクトの配列を操作するためにもっとも有用な配列メソッドとコードを紹介します。

JavaScript Array Methods: A Comprehensive Guide
by Luca Spezzano

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに
filter()メソッド: オブジェクトの配列からキーstatusがactiveと等しいオブジェクトの配列を取得する
find()メソッド: 配列内から特定のidを持つオブジェクトを検索する
findIndex()メソッド: 配列内の特定のキーを持つオブジェクトのインデックスを検索する
reduce()メソッド: オブジェクトの配列内にある特定のキーの値を合計する
map()メソッド: オブジェクトの配列内に含まれる特定のキーに対応する一意の値の配列を取得する
sort()メソッド: オブジェクトの配列をアルファベット順に並べ替える
flatMap()メソッド: 配列のリストを1つの配列に変換する
終わりに

はじめに

JavaScriptの配列メソッドは、ネイティブにデータを整理および操作するために非常に強力なものです。

Photo by Gabriel Heinzer on Unsplash

JavaScriptで配列を扱うための記事は数多くありますが、これらの多くは文字列や数値の配列のみを対象としています。実際にはオブジェクトの配列を扱う方が一般的で、特にAPIを呼び出すときによく使用されます。
そのため、オブジェクトの配列を操作するために有用な配列メソッドとコードを用意しておくと便利です。

この記事では、オブジェクトの配列を扱うときに役立つもっとも便利な配列メソッドをいくつか解説したいと思います。

以下のコードでは、各メソッドを特定のキーと値で使用する方法を示しています。もちろん、自分のニーズに合わせて任意のキーと値で操作することができます。

filter()メソッド: JavaScriptでオブジェクトの配列からキーstatusがactiveと等しいオブジェクトの配列を取得する

filter()メソッドは、指定したテスト関数に合格したすべての要素を含む新しい配列を生成します。

let listUser = [
  { id: 1, name: 'Alice', status: 'active' },
  { id: 2, name: 'Bob', status: 'inactive' },
  { id: 3, name: 'Charlie', status: 'active' },
  { id: 4, name: 'Dave', status: 'active' }
];

let activeUsers = listUser.filter(object => object.status === 'active');

console.log(activeUsers); 
// [{ id: 1, name: 'Alice', status: 'active' }, { id: 3, name: 'Charlie', status: 'active' }, { id: 4, name: 'Dave', status: 'active' }]

let listUser = [

{ id: 1, name: 'Alice', status: 'active' },

{ id: 2, name: 'Bob', status: 'inactive' },

{ id: 3, name: 'Charlie', status: 'active' },

{ id: 4, name: 'Dave', status: 'active' }

];

let activeUsers = listUser.filter(object => object.status === 'active');

console.log(activeUsers);

// [{ id: 1, name: 'Alice', status: 'active' }, { id: 3, name: 'Charlie', status: 'active' }, { id: 4, name: 'Dave', status: 'active' }]

この場合、テスト関数はオブジェクトのstatusプロパティが'active'であるかどうかをチェックします。もしそうである場合は、そのオブジェクトは新しい配列に含まれます。そうでない場合は、オブジェクトは含まれません。

Array.prototype.filter() -MDN 日本語版

find()メソッド: JavaScriptで配列内から特定のidを持つオブジェクトを検索する

find()メソッドは、指定されたテスト関数を満たす配列内の最初の要素の値を返します。

let listUser = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
  { id: 4, name: 'Dave' }
];

let result = listUser.find(object => object.id === 3);

console.log(result); 
// { id: 3, name: 'Charlie' }

let listUser = [

{ id: 1, name: 'Alice' },

{ id: 2, name: 'Bob' },

{ id: 3, name: 'Charlie' },

{ id: 4, name: 'Dave' }

];

let result = listUser.find(object => object.id === 3);

console.log(result);

// { id: 3, name: 'Charlie' }

この場合、テスト関数はオブジェクトのidプロパティが3に等しいかどうかをチェックします。3に等しい場合は、オブジェクトを返します。そうでない場合は、undefinedが返されます。

Array.prototype.find() -MDN 日本語版

findIndex()メソッド: JavaScriptで配列内の特定のキーを持つオブジェクトのインデックスを検索する

findIndex()は、指定されたテスト関数を満たす配列内の最初の要素のインデックスを返します。

let listUser = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
  { id: 4, name: 'Dave' }
];

let index = listUser.findIndex(object => object.id === 3);

console.log(index); 
// 2

let listUser = [

{ id: 1, name: 'Alice' },

{ id: 2, name: 'Bob' },

{ id: 3, name: 'Charlie' },

{ id: 4, name: 'Dave' }

];

let index = listUser.findIndex(object => object.id === 3);

console.log(index);

// 2

この場合、テスト関数はオブジェクトのidプロパティが3に等しいかどうかをチェックします。3に等しい場合は、オブジェクトのインデックスを返します。そうでない場合は、-1が返されます。

Array.prototype.findIndex() -MDN 日本語版

インデックスが分かるようになると、他のこともできます。たとえば、次のように配列から特定のオブジェクト (インデックスで指定したもの) を削除することができます。

listUser.splice(index, 1);

console.log(listUser); 
// [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 4, name: 'Dave' }]

listUser.splice(index, 1);

console.log(listUser);

// [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 4, name: 'Dave' }]

splice()メソッドは、配列内の要素を削除したり、新しい要素を追加したりして、配列を変更します。第1引数は配列の変更を開始するインデックスで、第2引数は削除する要素の数です。この場合、インデックス2から始めて1つの要素を削除します。

Array.prototype.splice() -MDN 日本語版

reduce()メソッド: JavaScriptでオブジェクトの配列内にある特定のキーの値を合計する

reduce()メソッドは、配列内の各要素に関数を適用して配列を1つの値に減らします。

let listProduct = [
  { name: 'Product 1', quantity: 5 },
  { name: 'Product 2', quantity: 3 },
  { name: 'Product 3', quantity: 7 }
];

let totalQuantity = listProduct.reduce((sum, object) => sum + object.quantity, 0);

console.log(totalQuantity); 
// 15

let listProduct = [

{ name: 'Product 1', quantity: 5 },

{ name: 'Product 2', quantity: 3 },

{ name: 'Product 3', quantity: 7 }

];

let totalQuantity = listProduct.reduce((sum, object) => sum + object.quantity, 0);

console.log(totalQuantity);

// 15

この関数は sumアキュムレータと現在の要素の2つの引数をとります。sumアキュムレータは初期値 (この場合は0) から始まり、各オブジェクトのquantityプロパティの値で更新されます。

Array.prototype.reduce() -MDN 日本語版

map()メソッド: JavaScriptでオブジェクトの配列内に含まれる特定のキーに対応する一意の値の配列を取得する

map()メソッドは、各要素に適用された関数の結果で新しい配列を作成します。

let listProduct = [
  { id: 1, name: 'Apple', type: 'fruit' },
  { id: 2, name: 'Orange', type: 'fruit' },
  { id: 3, name: 'Banana', type: 'fruit' },
  { id: 4, name: 'Tomato', type: 'vegetable' },
  { id: 5, name: 'Carrot', type: 'vegetable' }
];

let types = [...new Set(listProduct.map(object => object.type))];

console.log(types); 
// ['fruit', 'vegetable']

let listProduct = [

{ id: 1, name: 'Apple', type: 'fruit' },

{ id: 2, name: 'Orange', type: 'fruit' },

{ id: 3, name: 'Banana', type: 'fruit' },

{ id: 4, name: 'Tomato', type: 'vegetable' },

{ id: 5, name: 'Carrot', type: 'vegetable' }

];

let types = [...new Set(listProduct.map(object => object.type))];

console.log(types);

// ['fruit', 'vegetable']

この場合、関数はオブジェクトのtypeプロパティを返します。結果として得られる配列はSetオブジェクトに渡され、重複が取り除かれます。結果のセットはスプレッド演算子（...）を使用して配列に戻されます。

sort()メソッド: JavaScriptでオブジェクトの配列をアルファベット順に並べ替える

sort()メソッドは、配列の要素を所定の位置に並べ替え、配列を返します。

let listUser = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Dave' },
  { id: 3, name: 'Charlie' },
  { id: 4, name: 'Bob' }
];

listUser.sort((a, b) => {
  if (a.name < b.name) return -1;
  if (a.name > b.name) return 1;
  return 0;
});

console.log(listUser);
// [{ id: 1, name: 'Alice' }, { id: 4, name: 'Bob' }, { id: 3, name: 'Charlie' }, { id: 2, name: 'Dave' }]

let listUser = [

{ id: 1, name: 'Alice' },

{ id: 2, name: 'Dave' },

{ id: 3, name: 'Charlie' },

{ id: 4, name: 'Bob' }

];

listUser.sort((a, b) => {

if (a.name < b.name) return -1;

if (a.name > b.name) return 1;

return 0;

});

console.log(listUser);

// [{ id: 1, name: 'Alice' }, { id: 4, name: 'Bob' }, { id: 3, name: 'Charlie' }, { id: 2, name: 'Dave' }]

並べ替え（ソート）の順序は、引数として与えられる比較関数を使用して指定することができます。この場合、比較関数は各オブジェクトのnameプロパティを比較し、その順序を示す値を返します。

Array.prototype.sort() -MDN 日本語版

flatMap()メソッド: JavaScriptで配列のリストを1つの配列に変換する

flatMap()は、map()メソッドとflat()メソッドの機能を組み合わせたものです。マッピング関数を使用して各要素をマップし、その結果を新しい配列に変換します。

let listTag = [  
  { id: 1, name: 'Alice', tags: ['a', 'b'] },
  { id: 2, name: 'Bob', tags: ['c', 'd'] },
  { id: 3, name: 'Charlie', tags: ['e', 'f'] },
  { id: 4, name: 'Dave', tags: ['g', 'h'] }
];

let tags = listTag.flatMap(object => object.tags);

console.log(tags); 
// ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']