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

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

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

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

このページの目次

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

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

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

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

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

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

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

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

let arr = ['a', 'b', 'c', 'd', 'e', 'f'];
console.log('arr[0] = ' + arr[0]);
console.log('arr[4] = ' + arr[4]);

let arr = ['a', 'b', 'c', 'd', 'e', 'f'];

console.log('arr[0] = ' + arr[0]);

console.log('arr[4] = ' + arr[4]);

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

arr[0] = a
arr[4] = e

1 2	arr[0] = a arr[4] = e

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

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

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

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

１番目にアクセスするなら添え字は 0
２番目にアクセスするなら添え字は 1
(３～９９番目までも同じ...)
１００番目にアクセスするなら添え字は 99

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

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

例えば次のような感じで

let last = arr[arr.length - 1];

1	let last = arr[arr.length - 1];

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

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

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

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

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

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

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

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

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

let colors = ['red', 'yellow', 'orange', 'green', 'blue', 'purple'];
let favorites = colors.slice(2, 5);

1 2	let colors = ['red', 'yellow', 'orange', 'green', 'blue', 'purple']; let favorites = colors.slice(2, 5);

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

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

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

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

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

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

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

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

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

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

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

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evens = nums.filter(function(num){
  return (num % 2 === 0);
});
console.log(evens);

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let evens = nums.filter(function(num){

return (num % 2 === 0);

});

console.log(evens);

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

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

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

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

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

MDN Web Docs

Array.prototype.filter()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成します。

ここまでのまとめ

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

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