268
Help us understand the problem. What are the problem?

posted at

updated at

Organization

ES6でよく使う、配列の中身を操作・検索する関数

JavaScriptで、関数を操作するときによく使う関数をまとめました。
es6のアロー関数を用いています。

Map

配列全体を加工して、新しい配列を作成します。

const a = 3
const ary = [1, 2, 3, 4, 5]

// 配列のすべての値をaの値だけ足します。
const result = ary.map(item => item + a)
// result = [4, 5, 6, 7, 8]

返り値として新しく作成された配列が返ってきます。
関数の中でreturnした内容が、そのまま配列の要素として上書きされていきます。

forEach

配列全体に対して、処理をしたい時に使用します。

const ary = [1, 2, 3, 4, 5]

// 配列の中のものをすべてconsole.logします。
ary.forEach(item => {
  console.log(item)
})

返り値はundefinedです。

filter

配列の中から、必要な要素だけ抜き出すことができます。

const ary = [1, 2, 3, 4, 5]

// 3より小さいものだけを抜き出します。
const result = ary.filter(item => item < 3)
// result = [1, 2]

関数の中ではtrue, falseのいずれかを返す必要があります。
trueならその要素が残り、falseであれば破棄されます。

find

es6から対応です。
配列の中から、特定の要素を1つ抜き出すことができます。

const a = 'blue'
const ary = ['red', 'green', 'blue', 'yellow', 'white']

// aと同じ要素があれば、抜き出します。
const result = ary.find(item => item === a)
// result = 'blue'

最初に関数の中がtrueを返した時点で処理が中断され、要素がそのまま返ってきます。2つ以上要素があった場合でも、最初の要素のみが返ってきます。
見つからなかった場合は、undefinedが返ってきます。

findIndex

es6から対応です。
配列の中から、特定の要素のインデックスを返します。
基本的な使い方はfindと同じです。

const a = 'blue'
const ary = ['red', 'green', 'blue', 'yellow', 'white']

// aと同じ要素があれば、そのインデックス(何番目か)を返します。
const index = ary.findIndex(item => item === a)
// index = 2

const result = ary[index]
// result = 'blue'

一点注意なのが、検索結果が見つからなかったとき、findIndexは -1 を返します。
つまり、要素が存在するかどうかを判定するのに、

const index = ary.findIndex(item => item === 2)

if (!index) {
  // ... (合致した要素がなかった場合)
}

では誤りで、

if (index === -1) {
 // ... (合致した要素がなかった場合)
}

という書き方になります。
配列の内容を操作したい時は、findよりも、findIndexの方が適しています。

some

配列の中に、条件を満たした要素があるかどうかをチェックする関数です。
返り値はtrue, falseのどちらかです。

const ary = [1, 2, 3, 4, 5]

// 配列の中に偶数が含まれているかどうかをチェックします
const isIncludeEven = ary.some(item => item % 2 === 0)

// isIncludeEven = true

every

配列のすべての要素に対してチェックを行い、
そのすべてが合致すればtrue, ひとつでも違うものがあればfalseを返します。

const ary = [2, 4, 7, 8, 10]

// 配列の中身がすべて2で割れるかどうかをチェックします
const isAllEven = ary.every(item => item % 2 === 0)

// 7は、2で割った余りが1なので、条件に合致しない。
// isAllEven = false

アロー関数

補足です。
アロー関数とは、es6から追加された新しい関数の書き方です。
特徴としては

  • 1行で書く場合にはreturn文、ブラケット{}を省略できる。
  • thisのスコープが固定される

など、functionを用いた書き方に比べてシンプルに記述することができます。

const result = ary.map(item => item * 2)

これは、

const result = ary.map(function(item) {
  return item * 2;
});

と同じものです。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
268
Help us understand the problem. What are the problem?