Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
248
Help us understand the problem. What is going on with this article?
@pentla

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

More than 1 year has passed since last update.

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.find(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;
});

と同じものです。

248
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
pentla
jxpress
技術力で「ニュースの産業革命」を起こす。言語処理・データ解析分野の専門家が集まる、News Techベンチャー。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
248
Help us understand the problem. What is going on with this article?