javascriptでの配列の要素へのアクセスや検索方法まとめ

配列を上手く扱うにはまず配列の初期化や値の追加方法について知っていなくはなりません。

そしてその上で配列の要素のアクセスとか検索方法を知っておくとさらに便利です。

という訳で自分の記憶を整理するのも兼ねて配列のアクセス方法についてまとめてみます。

配列のアクセスや検索方法まとめ

ここで紹介する配列のアクセスに関するテクニックは次の3つ

  • 配列要素への基本的なアクセス
  • 配列要素を指定範囲で切り出し
  • 配列要素を条件で検索して取得

このやり方についてコード例を交えながら説明していきます。

配列要素への基本的なアクセス

まずは配列の1つ1つの要素にアクセスする方法です。

やり方は簡単で次のように  []  のなかに添え字(インデックス番号)をつけてアクセスするだけ

このコードのコンソールでの表示結果は次のようになります。

arr[0]とか arr[4] のように書けば特定の場所にある要素を取得できるわけです。

 

ただしこの添え字は必ず 0 から始まることに要注意です。

人間が数を数えるときは1から始まりますが、プログラミングの場合は0から数え始めます。

つまり100個の要素を持つ配列なら要素のアクセスの仕方は次のようになるということ

  • 1番目にアクセスするなら添え字は 0
  • 2番目にアクセスするなら添え字は 1
  • (3~99番目までも同じ...)
  • 100番目にアクセスするなら添え字は 99

これを抽象的にいうならn番目の要素にアクセスするなら添え字は n - 1 ってことです。

 

ちなみに最後の要素へのアクセスは配列の長さ(length)から1を引けば簡単にアクセスできます。

例えば次のような感じで

配列の長さはlengthプロパティから求められるのでそれを利用しています。

配列要素を指定範囲で切り出し

次は配列の要素を一気にまとめて切り出す方法です。

それを行うのに便利なのがslice関数で次のように使えます。

配列.slice(最初の添え字, 最後の添え字);

関数に渡した添え字の範囲で要素をコピーして配列として返してくれる関数です。

ただし最後の添え字」はコピーする要素に含まれないことに要注意

実際にコピーされるのは「最初の添え字」~「最後の添え字 - 1」の範囲になります。

 

例えばある配列の3 ~ 5番目(添え字でいえば 2 ~ 4 )までを切り出しているのは次のコード

上のコード例では  favarites  には  [ 'orange', 'green', 'blue' ] という配列が入ります。

 

このようにslice関数はまとめて要素を切り出したいときにとても便利です。

ただし最後の添え字は含まないことには要注意

配列要素を条件で検索して取得

ある配列で特定の条件を満たすものをまとめて取得したいってことありますよね?

そういう時に便利なのがfilter関数で配列に対して次のように使えます。

配列.filter( 検索用関数 [, thisオブジェクト ] )

検索用の関数オブジェクトを1番目に渡すことでその条件に合う要素を持つ配列を返してくれます。

ちなみにthisオブジェクトは検索用関数の中で this として使われますが、省略可能です。

 

例えば分かりやすい例として1から10までの配列があるとしましょう。

その中で2で割り切れるという条件指定して偶数だけの配列を取得しているのが次のコード例

filter関数に渡したフィルター関数の第1引数が元の配列の各要素になります。

そしてそのフィルター関数内で  num % 2 === 0 のように条件式を指定することでその条件を満たす配列が返ってきます。

この場合だと返ってくる配列 evens の中身は  [ 2, 4, 6, 8, 10 ]  です。

 

これは使いこなせるとかなり便利そうですね、

filter関数については奥が深いのでもっと詳しく知りたいという人は次のリファレンスをどうぞ

ここまでのまとめ

ここまでのことを簡単にまとめると次の通り

  • 配列要素には添え字でアクセス
    arr[3]  とか  arr[5]  のような感じで要素にアクセスできる
    ただし添え字は 0 から始まることに要注意!
  • 要素の切り出しにはslice関数を使う
    arr.slice(3, 5)  のようにすれば添え字の 3 ~ 4 番目までが切り出される
    ただし添え字の最後は切り出した配列に含まれないことに注意
  • 要素の検索にはfilter関数を使う
    arr.filter(条件関数)  のようにして渡した条件関数に合う配列が取得可能

という訳で配列のアクセスとか検索の仕方について紹介しました。

slice関数とかfilter関数は上手く使えるようになりたいです。

ではでは($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください