はじめに

こんにちは、SHIFT の開発部門に所属しているmurasawaです。
中途で入社、バックエンド関連の開発を担当しています。

現在、社内基盤の開発を行っています。
開発の中でDB等、新たに学んだり得た知見をアウトプットし理解を深めていくとともに技術の共有として役に立てば幸いです。

今回は配列やオブジェクトによく使うメソッドをまとめて、どういった場面で使えばよいのかをまとめて理解を深めていきます。

配列の操作

以下のような配列を操作します。

[1, 2, 3, 4, 5];

forEach

配列の値を一つ一つ取り出して表示したり、parameterとして参照したい場合、

[1, 2, 3, 4, 5];

forEachを使用します。

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

testNumbers.forEach((testNumber) => console.log(testNumber));

出力
1
2
3
4
5

map

配列の値を一つ一つ取り出して処理を行うなど、配列を処理したい場合、mapを使用します。
今回はすべての値を2倍にする処理を書いてみます。

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

const twiceResult = testNumbers.map((testNumber) => testNumber * 2);
console.log(twiceResult);

出力
[ 2, 4, 6, 8, 10 ]

元の配列を使って新しい配列を作る場合などに役立ちます。

また複数の非同期処理を行い、すべての終了を待ちたい場合など下記のように書くことができます。

const testObjectInArrays = [
	{ id: 1, name: 'sato' },
	{ id: 2, name: 'jiro' },
	{ id: 3, name: 'saburo' },
	{ id: 4, name: 'shiro' },
	{ id: 5, name: 'goro' }
];
await Promise.all(
    testObjectInArrays.map((testObjectInArray) =>
        asyncFunctin(testObjectInArray)
        )
    );

mapで配列の中のオブジェクトを取り出し、「async」関数を呼び出しでpromiseオブジェクトが返されます。

上記では5つpromiseオブジェクトが配列に格納されpromise.allによって終了が待たれます。

filter

配列をフィルタリングして新しい配列を作りたい場合に便利です。

[
	{ score: 98, name: 'taro' },
	{ score: 55, name: 'jiro' },
	{ score: 89, name: 'saburo' },
	{ score: 81, name: 'shiro' },
	{ score: 36, name: 'goro' },
	{ score: 64, name: 'rokuro' }
]

のようなscore配列から80点以上の成績優秀者のみ取り出したい場合

const grades = [
	{ score: 98, name: 'taro' },
	{ score: 55, name: 'jiro' },
	{ score: 89, name: 'saburo' },
	{ score: 81, name: 'shiro' },
	{ score: 36, name: 'goro' },
	{ score: 64, name: 'rokuro' }
];

const highScore = grades.filter((grade) => grade.score > 80);
console.log(highScore);

出力
[
  { score: 98, name: 'taro' },
  { score: 89, name: 'saburo' },
  { score: 81, name: 'shiro' }
]

のようにフィルタリングした結果で新しい配列を作ることができます。

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

オブジェクトの操作

今までは配列[1, 2, 3, 4, 5]などの操作でしたが次は、オブジェクト{ one: 1, two: 2, three: 3, four: 4, five: 5 }などの操作を行います。

Object.keys

オブジェクトのkeyを取り出して処理を行いたい場合、Object.keysが使えます。

const testObjects = { one: 1, two: 2, three: 3, four: 4, five: 5 };

console.log(Object.keys(testObjects));

出力
[ 'one', 'two', 'three', 'four', 'five' ]

forEachと組み合わせて

const testObjects = { one: 1, two: 2, three: 3, four: 4, five: 5 };

Object.keys(testObjects).forEach((key) => console.log(key));
出力
one
two
three
four
five

Object.keys(testObjects).forEach((key) => console.log(testObjects[key]));
出力
1
2
3
4
5

のように使うこともできます。

Object.values

Object.keysのようにvalueを取り出すこともできます。

const testObjects = { one: 1, two: 2, three: 3, four: 4, five: 5 };

console.log(Object.values(testObjects));
出力
[ 1, 2, 3, 4, 5 ]

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object

終わりに

開発で配列やオブジェクトに出会うたびにどのメソッドを使うのが良いのか迷うことがあったので、今回まとめて見ました。それぞれの特性や使いどころがある程度理解でき、開発の役に立てることができそうです。

こういった基本的なことを振り返って少しずつ実力をつけていきたいです。

《このブロガーの他の記事》

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/