2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[javascript] 配列の便利な関数(foreach、map、filter、find)

Posted at

はじめに

Typescriptを使用して開発を行なっている際に、配列に対して処理を行う際に下記のようにfor文を用いた繰り返しによってその処理を行なっていました。
ですが、「配列に組み込まれている関数を使用した方が行数を減らせたりコードの意図を理解しやすくなるため使えるようになっておいたほうがいいよ」とアドバイス頂いたのでここに記すことによって定着を測ろうと思い、この記事を書く事にしました。
ここでは配列の関数の中で特に扱う事が多いforeach, map, filter, 'find`を記します。

foreach

foreach()は与えられた関数を配列の各要素に対して1回ずつ実行します。

(配列).foreach((各要素) => (各要素に対して行う関数))

例えば、配列の各要素を順番に出力したい場合は以下のように記述できます。

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

arr.foreach((item) => {
    console.log(item);
});

map

map()は与えられた関数を配列の各要素に対して一回ずつ実行し、その結果を新しい配列として返します。

const (新しい配列) = (配列).map((各要素) => (各要素に対して行う関数))

例えば、配列の各要素を2倍した配列を取得したい場合は以下のように記述できます。

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

const newArr = arr.map((item) => {
    return item *= 2;
});

// newArr = [2, 4, 6, 8, 10, 12, 14];

filter

filter()は与えられた関数の戻り値がtrueになった要素のみを新しい配列として返す事ができます。

const (フィルタされた配列) = (配列).filter((各要素) => (条件式))

例えば、配列の中で偶数の要素のみを選択して新しい配列として取得したい時は以下のように記述できます。

const arr = [1, 2, 3, 4, 5, 6, 7]

const filteredArr = arr.filter((item) => {
    if (item % 2 === 0) {
        return true;
    }
})

// filterdArr = [2, 4, 6];

find

find()は配列の中で条件に合った最初の要素を取得できます。
条件に合う要素が見つからない場合はundefindを返します。

const (条件に合う要素) = (配列).find((各要素) => (条件式))

例えば、数値1~7の配列の中で一番最初の3の倍数を取得したい時は以下のように記述できます。

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

const num = arr.find((item) => item % 3 === 0)

// num = 3

終わりに

以上が私がよく使用する配列の関数です。
何か抜けなどがありましたらご指摘をお願いいたします。
ご覧いただき有難うございました:pray:

2
2
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
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?