ReactやReduxで開発をしていると、関数型プログラミングのスタイルに出くわします。特にReduxとなると、Middlewareの部分であったり至る所で関数型のスタイルが顔を出してきます。最近は一部で関数型言語が見直されてきていますし、自分もこのようなスタイルですんなりコードを書けるようになりたいと思っているところです。あいにくJavaScriptでは、ES5からmapやreduceといった関数型でよく使われるメソッドがArrayオブジェクトのprototypeメソッドとして追加されています。
今回はmapやreduceなどのメソッド以外にどのようなメソッドが使えそうか確認する意味も込めて、改めて最新のES2016で定義されているArray.prototypeのメソッドを一つ一つ見てみることにしました。それぞれ追加されたバージョンごとに見ていきます。
目次
ES2016で追加されたArray.prototypeメソッド(1メソッド)
ES2016で追加されたArray.prototypeメソッドは以下の1メソッドです。
Array.prototype.includes(searchString [, position])
配列に任意の要素が含まれているか含まれていないかチェックするメソッド
第一引数に検索する要素を渡し、配列内に含まれていればtrue、含まれていなければfalseを返します。検索を開始するインデックス数を指定したい場合は第二引数に任意のインデックスを渡します。
以下はES2016の仕様書となる「ECMA-262 edition 7(ES2016)」となります。細かい仕様は以下をご参照ください。
ES2015で追加されたArray.prototypeメソッド(8メソッド)
ES2015で追加されたArray.prototypeメソッドは以下の8メソッドです。
copyWithin() | fill() | find() | findIndex() | entries() | keys() | values() | @@iterator
Array.prototype.copyWithin(target, start[, end = this.length])
配列内の任意の部分を、任意の位置にコピーするメソッド
第一引数に指定したインデックスの位置から、同じ配列の要素を最初からコピーしていき、戻り値として返します。第二引数と第三引数を使って、コピーする配列の範囲を指定することもできます。第二引数に指定したインデックスの要素から第三引数に指定したインデックスの直前の要素までをコピーします。マイナスで指定した場合のインデックス数は、配列.length – ○となります。
Array.prototype.fill(value[, start = 0[, end = this.length]])
配列の任意の箇所を固定値で埋めるメソッド
配列の要素を、第一引数に指定した固定値に置き換え、戻り値として返します。第二引数と第三引数を使って、置き換える配列の範囲を指定することもできます。第二引数に指定したインデックスの要素から第三引数に指定したインデックスの直前の要素までを固定値で埋めます。マイナスで指定した場合のインデックス数は、配列.length – ○となります。
Array.prototype.find(predicate[, thisArg])
配列の要素が与えた関数で「真」となるかチェックし、「真」となった要素の値を返すメソッド
配列の要素を一つずつ、第一引数に指定した関数で評価し、結果がtrueとなった要素が見つかると、戻り値としてそのtrueとなった要素の値を返します。一つもtrueとなる要素がなかった場合は、undefinedを返します。コールバック関数の引数には、第一引数に要素、第二引数にインデックス数(添え字)、第三引数に配列全体をとり、これらを使って処理を書いていくことになります。
Array.prototype.findIndex(predicate[, thisArg])
配列の要素が与えた関数で「真」となるかチェックし、「真」となった要素のインデックスを返すメソッド
find()と同じように、配列の要素を一つずつ、第一引数に指定した関数で評価していきます。結果がtrueとなった要素が見つかると、戻り値としてそのtrueとなった要素のインデックス数を返します。一つもtrueとなる要素がなかった場合は、-1を返します。コールバック関数の引数には、第一引数に要素、第二引数にインデックス数(添え字)、第三引数に配列全体をとり、これらを使って処理を書いていくことになります。
Array.prototype.entries()
配列の各要素のkey(インデックス)とvalue(値)を持った新しいArray Iteratorオブジェクトを生成するメソッド
配列を、各要素のkey(インデックス)とvalue(値)を持ったイテレータオブジェクトに変換し、戻り値として返します。イテレータはES2015で追加された仕様で、「コレクション中の項目へ一つずつアクセスする方法を備えたオブジェクト」のことです。 メソッドを呼ぶことで順番にkeyとvalueのペアにアクセスすることができます。
Array.prototype.keys()
配列の各要素のkey(インデックス)を持った新しいArray Iteratorオブジェクトを生成するメソッド
配列を、各要素のkey(インデックス)を持ったイテレータオブジェクトに変換し、戻り値として返します。イテレータはES2015で追加された仕様で、「コレクション中の項目へ一つずつアクセスする方法を備えたオブジェクト」のことです。 next()メソッドを呼ぶことで順番にkeyにアクセスすることができます。
Array.prototype.values()
配列の各要素のvalue(値)を持った新しいArray Iteratorオブジェクトを生成するメソッド
配列を、各要素のvalue(値)を持ったイテレータオブジェクトに変換し、戻り値として返します。イテレータはES2015で追加された仕様で、「コレクション中の項目へ一つずつアクセスする方法を備えたオブジェクト」のことです。 next()メソッドを呼ぶことで順番にvalueにアクセスすることができます。
Array.prototype[ @@iterator ]()
配列に[Symbol.iterator]()メソッドを実装し、配列の各要素のvalue(値)を持った新しいArray Iteratorオブジェクトを生成するメソッド
value()と同じ役割のメソッドです。配列を、各要素のvalue(値)を持ったイテレータオブジェクトに変換し、戻り値として返します。イテレータはES2015で追加された仕様で、「コレクション中の項目へ一つずつアクセスする方法を備えたオブジェクト」のことです。 next()メソッドを呼ぶことで順番にvalueにアクセスすることができます。
以下はES2015の仕様書となる「ECMA-262 edition 6(ES2015)」となります。細かい仕様は以下をご参照ください。
ES5で追加されたArray.prototypeメソッド(9メソッド)
ES5で追加されたArray.prototypeメソッドは以下の9メソッドです。
indexOf() | lastIndexOf() | every() | some() | forEach() | map() | filter() | reduce() | reduceRight()
Array.prototype.indexOf(searchElement[, fromIndex])
配列から任意の要素に一致する要素を前方から検索するメソッド
引数に指定した値を、配列の要素と前方から比較し、一致する要素があったら、戻り値として一番最初に見つかった一致する要素のインデックス数(添え字)を返します。一致するものがない場合は、-1を返します。なお、第二引数にインデックス数を指定すると、配列のその箇所から検索を始めることができます。
Array.prototype.lastIndexOf(searchElement[, fromIndex])
配列から任意の要素に一致する要素を後方から検索するメソッド
indexOf()の逆パターンです。引数に指定した値を、配列の要素と後方から比較し、一致する要素があったら、戻り値として一番最初に見つかった一致する要素のインデックス数(添え字)を返します。一致するものがない場合は、-1を返します。なお、第二引数にインデックス数を指定すると、配列のその箇所から前方に向かって検索を始めることができます。
Array.prototype.every(callbackfn[, thisArg])
配列の全要素が、与えた関数で「真」となるかチェックするメソッド
配列の要素を一つずつ、第一引数に指定した関数で評価し、全ての結果がtrueとなった場合、戻り値としてtrueを返します。途中でfalseとなったものがあったら、その時点でfalseを返します。some()の逆パターンです。
Array.prototype.some(callbackfn[, thisArg])
与えた関数で「真」となる要素が配列に一つでもあるかチェックするメソッド
配列の要素を一つずつ、第一引数に指定した関数で評価し、全ての結果がfalseとなった場合、戻り値としてfalseを返します。途中でtrueとなったものがあったら、その時点でtrueを返します。evrery()の逆パターンです。
Array.prototype.forEach(callbackfn[, thisArg])
配列の各要素に対して実行させる関数を呼び出すメソッド
いわゆるループ処理用のメソッドです。配列の要素一つ一つに対して、与えられたコールバック関数を実行します。コールバック関数の引数には、第一引数に要素、第二引数にインデックス数(添え字)、第三引数に配列全体をとり、これらを使って処理を書いていくことになります。元の配列には変更を加えません。
Array.prototype.map(callbackfn[, thisArg])
配列の各要素に対して与えた関数を呼び出し、新たな配列を生成するメソッド
forEach()と同じように、配列の要素一つ一つに対して、第一引数に指定したコールバック関数を実行します。さらに、戻り値として、一つ一つの結果から新たな配列を生成して返します。コールバック関数の引数には、第一引数に要素、第二引数にインデックス数(添え字)、第三引数に配列全体をとり、これらを使って処理を書いていくことになります。元の配列には変更を加えません。
Array.prototype.filter(callbackfn[, thisArg])
配列の各要素に対して与えた関数を呼び出し、条件に一致した要素で新たな配列を生成するメソッド
map()と同じように、配列の要素一つ一つに対して、第一引数に指定したコールバック関数を実行します。コールバック関数はboolean値を返すものとし、trueとなった要素からなる配列を新たに生成し戻り値として返します。コールバック関数の引数には、第一引数に要素、第二引数にインデックス数(添え字)、第三引数に配列全体をとり、これらを使って処理を書いていくことになります。元の配列には変更を加えません。
Array.prototype.reduce(callbackfn[, initialValue])
配列の隣り合う2つの要素を左から右に与えた関数で計算していき、最終的に一つの値を返すメソッド
第一引数に指定したコールバック関数を使って、配列の要素を前方から順々に処理していき、最終的に一つの値にして戻り値として返します。第二引数に値を指定した場合は、その値から処理を始めていきます。コールバック関数の引数には、第一引数に現在処理されている要素の1つ前の要素、第二引数に現在処理されている要素、第三引数にインデックス数(添え字)、第四引数に配列全体をとり、これらを使って処理を書いていくことになります。元の配列には変更を加えません。
Array.prototype.reduceRight(callbackfn[, initialValue])
配列の隣り合う2つの要素を右から左に与えた関数で計算していき、最終的に一つの値を返すメソッド
reduce()の逆パターンです。第一引数に指定したコールバック関数を使って、配列の要素を後方から順々に処理していき、最終的に一つの値にして戻り値として返します。第二引数に値を指定した場合は、その値から処理を始めていきます。コールバック関数の引数には、第一引数に現在処理されている要素の1つ前の要素、第二引数に現在処理されている要素、第三引数にインデックス数(添え字)、第四引数に配列全体をとり、これらを使って処理を書いていくことになります。元の配列には変更を加えません。
以下はES5の仕様書となる「ECMA-262 edition 5.1」となります。細かい仕様は以下をご参照ください。
ES3以前に追加されたArray.prototypeメソッド(12メソッド)
ES2015で追加されたArray.prototypeメソッドは以下の12メソッドです。もうお馴染みとなったものばかりですね。
reverse() | sort() | slice() | splice() | pop() | shift() | unshift() | push() | concat() | toString() | toLocaleString() | join()
Array.prototype.reverse()
配列の要素の並び順を逆にするメソッド
引数はありません。配列に対してこのメソッドを呼び出すと、要素の並び順が逆になります(反転)。
Array.prototype.sort(comparefn)
配列の要素をソートする(並び換える)メソッド
引数に、要素の並びを定義する関数を指定すると、その関数に基づいた並び順で配列をソートします。引数に何も指定しない場合は、アルファベット順にソートします。
Array.prototype.slice(start, end)
配列から任意の場所の要素を取り出すメソッド
第一引数に指定したインデックスの位置から、第二引数に指定したインデックスの直前までの要素を取り出して、戻り値として取り出した要素の配列を返します。第二引数に何も指定しない場合は、第一引数のインデックスの位置から配列の最後までを取り出します。引数にはマイナスの数値も指定可能です。マイナスで指定した場合のインデックス数は、配列.length – ○となります。元の配列は特に変化はなくそのままの状態です。
Array.prototype.splice(start, deleteCount[, item1[, item2[, …]]])
配列の任意の場所の要素を削除または任意の要素で置換し、削除された要素を取り出すメソッド
第一引数に指定したインデックスの位置から、第二引数に指定した数値の数だけ配列から要素を削除し、戻り値として削除した要素の配列を返します。第二引数に何も指定しない場合は、第一引数のインデックスの位置から配列の最後までを削除します。元の配列は要素が削除された状態となります。なお、第三引数に値を指定すると、元の配列の削除された部分に挿入することができます。
Array.prototype.pop()
配列の最後の要素を取り除くメソッド
配列の最後の要素を取り除き、戻り値としてその取り除いた要素を返します。配列が空だった場合は、undefinedを返します。元の配列は、最後の要素が取り除かれた状態となります。
Array.prototype.shift()
配列の最初の要素を取り除くメソッド
配列の最初(添え字が0)の要素を取り除き、戻り値としてその取り除いた要素を返します。配列が空だった場合は、undefinedを返します。元の配列は、最初の要素が取り除かれた状態となります。
Array.prototype.unshift([item1[, item2[, …]]])
配列の先頭に要素を追加するメソッド
引数に追加したい要素を指定すると、配列の最初に追加されます。一度に複数の要素を追加することも可能です。戻り値として追加後の配列の長さ(length値)を返します。元の配列は新たな要素が追加された状態となります。
Array.prototype.push(element1, …, elementN)
配列の最後に新たな要素を追加するメソッド
引数に追加したい要素を指定すると、配列の最後に追加されます。一度に複数の要素を追加することも可能です。戻り値として追加後の配列の長さ(length値)を返します。元の配列は新たな要素が追加された状態となります。
Array.prototype.concat([item1[, item2[, …]]])
配列に別の配列や要素を連結させるメソッド
引数に連結したい配列や要素を指定すると、配列の最後に追加される形で連結されます。戻り値として、連結後に新たに生成された配列を返します。
Array.prototype.toString()
配列自体を文字列に変換するメソッド
引数はありません。配列に対してこのメソッドを呼び出すと、全ての要素を「,(カンマ)」で連結し、文字列として返します。区切り文字のカンマを入れたくない場合は、join()を使います。
Array.prototype.toLocaleString()
配列自体を現在のロケール(国や地域指定)の文字列に変換するメソッド
引数はありません。ほぼほぼtoString()と同じ役割で、配列に対してこのメソッドを呼び出すと、全ての要素を連結し、文字列として返します。その際に、ロケール(国や地域指定)固有の文字列が使用されます。
Array.prototype.join(separator)
配列の全要素を任意の連結文字で連結し、文字列に変換するメソッド
第一引数に指定した連結文字を使って配列の要素を結合して、文字列に変換して返します。要素間に連結文字を入れたくない場合は、空文字を指定します。
以下はES5の仕様書となる「ECMA-262 3rd Edition」(PDF)となります。細かい仕様は以下をご参照ください。
まとめ
今回はArray.prototypのメソッドを洗い出してみましたが、全部で30メソッドあり、正直全部覚えるのは大変かと思います。ただ、全部暗記しなくても、どんなものがあるかということだけでも頭にあれば確認しながらコードを書くことができるようになります。したがって全く知らない状態でコードを書くよりも、余計な処理を自分で書かなくて済むようになるので、かなり効率のよいコードが書けるようになるでしょう。
なお、ES2015やES2016で追加されたメソッドは、ブラウザによっては動かないものもあったりするので、Babelを使ったり、Polyfillを使ったりすると良いでしょう。ブラウザの対応状況は以下にて確認できます。
それから一つ一つのメソッドについて詳しく内容を知りたい場合は、それぞれにMDNのリンクを設けいていますので、そちらを参照してもらえればと思います。
以下のオライリーのリファレンスもES5までの内容となりますが、細かい仕様を確認する上で大変参考になります。最後に紹介しておきます
コメント