TypeScript 覚えておくべき配列操作のメソッド
はじめに
JavaScript、TypeScriptを扱う上で覚えておくべき配列操作のメソッドについてまとめています。
紹介する6つのメソッドを覚えておくだけで、配列操作が結構楽になります。
今回扱う配列
各メソッドのコード例では、以下の配列booksを用いて説明しています。
type Book = {
id: number;
title: string; // タイトル
author: string; // 著者
genre: string; // ジャンル
pages: number; // ページ数
};
const books: Book[] = [
{
id: 1,
title: "Book1",
author: "Author1",
genre: "Fantasy",
pages: 250,
},
{
id: 2,
title: "Book2",
author: "Author2",
genre: "Horror",
pages: 300,
},
{
id: 3,
title: "Book3",
author: "Author3",
genre: "Fantasy",
pages: 400,
}
];
forEach
forEach
は、配列内の各要素に対して処理を実行します。返り値はありません。
以下の例では、booksの各要素のtitleを出力する処理を行います。
books.forEach((book) => console.log(book.title));
// => 'Book1', 'Book2', 'Book3'
map
map
は、配列内の各要素に対して処理を実行し、その結果からなる配列を返します。
配列内の各要素に対して何かしらの操作をしたいというときに便利です。
以下の例では、forEach
とmap
の処理を変数に代入し、その変数をコンソールに出力します。
一見同じように見えますが、forEach
ではundefinedを返すのに対し、map
では配列を返しています。
// forEachの場合
const bookTitles = books.forEach((book) => book.title);
console.log(bookTitles)
// => undefined
// mapの場合
const bookTitles = books.map((book) => book.title);
console.log(bookTitles)
// => ["Book1", "Book2", "Book3"]
filter
filter
は、指定した条件を満たす要素を配列として返します。満たす要素が1つもない場合、空の配列を返します。
以下の例では、ページ数が300ページ以上である要素を調べます。
const thickBooks = books.filter((book) => book.pages >= 300);
console.log(thickBooks);
/* => [{
id: 2,
title: "Book2",
~~ 省略 ~~
},
{
id: 3,
title: "Book3",
~~ 省略 ~~
}]
*/
some
some
は、指定した条件を少なくとも1つの要素が満たすときtrue
、そうでないときはfalse
を返します。
以下の例では、Author2、kagunyanという著者を持つ要素があるかどうかを調べます。
const isAuthor2 = books.some((book) => book.author >= 'Author2');
console.log(isAuthor2)
// => true
const isKagunyan = books.some((book) => book.author >= 'kagunyan');
console.log(isKagunyan)
// => false
every
every
は、指定した条件を配列内の全ての要素が満たすときtrue
、そうでないときはfalse
を返します。
以下の例では、全ての要素が100ページ以上であるかどうか、全ての要素がFantasyジャンルであるかどうかを返します。
const hasAll100Pages = books.every((book) => book.pages >= 100);
console.log(has100Pages)
// => true
const isAllFantasyGenre = books.every((book) => book.genre === 'Fantasy');
console.log(isAllFantasyGenre)
// => false
find
find
は、指定した条件を満たす1つ目の要素を返します。満たす要素が1つもない場合、undefinedを返します。
以下の例では、Fantasyジャンルである要素、SFジャンルである要素を調べます。
const hasFantasyBook = books.find((book) => book.genre === 'Fantasy');
console.log(hasFantasyBook)
/* => {
id: 1,
title: "Book1",
author: "Author1",
genre: "Fantasy",
pages: 250,
}
*/
const hasSFBook = books.find((book) => book.genre === 'SF');
console.log(hasSFBook)
// => undefined
まとめ
今回まとめた各メソッドの返り値は以下のようになります。
返り値 | |
---|---|
forEach | なし |
map | 配列 |
filter | 配列 |
some | 真偽値 |
every | 真偽値 |
find | 要素 |
配列を操作するメソッドはMDNの公式から閲覧できます。
おわりに
- 今回まとめたのは6つですが、他のメソッドについてもよく使うものが出てきたらまとめてみようと思います。
Discussion