組み込みクラス
Arrayクラス
今まで何気なく扱ってきたJavaScriptの配列ですが、実はArray
クラスのインスタンスです。具体的に言えば、配列リテラルが生成するオブジェクトは、Array
クラスのインスタンスです。
Arrayクラスには、開発効率を劇的に変える便利なメソッドが大量に定義されています。
map
メソッド
Array#map
メソッドは、関数の引数をひとつとり、配列の各要素に対して関数を実行し、それらの戻り値からなる新たな配列を返します。
2行目のmap
メソッドの引数として渡しているアロー関数式value => value * 2
は、引数をひとつとり、その値を2倍にして返す関数です。この関数が配列の各要素に対して実行されて、その戻り値の集合がdoubledNumber
となっています。
filter
メソッド
Array#filter
メソッドは、関数の引数をひとつとり、配列の各要素に対して関数を実行し、それらの戻り値がtruthyだったもののみからなる新しい配列を返します。
アロー関数式value => value % 2 === 0
は、引数が偶数の場合false
を、奇数の場合true
を返す関数です。numbers
のうち6
と8
の場合のみ戻り値がtrue
となるので、その2つのみからなる新しい配列がevenNumbers
に入ります。
DOMオブジェクトと継承
DOMオブジェクトも、何らかのクラスのインスタンスだとみなせます。例えば、
のようにして取得されたdiv
要素は、HTMLDivElement
クラスのインスタンスだと考えられます。
HTMLDivElement
について記述している文書を読んでみましょう。おなじみtextContent
プロパティやstyle
プロパティが存在していませんね。
これには、継承と呼ばれる仕組みが関係しています。継承とは、その名の通り機能を受け継ぐための仕組みです。ここでいう機能とは、例えばプロパティやメソッドです。継承先のオブジェクトでは、継承元のプロパティやメソッドを使用することができます。
DOMは非常に高度な枠組みです。今回の例でいえば、HTMLDivElement
はHTMLElement
を継承しており、HTMLElement
はElement
を、そしてElement
はNode
を継承しています。そしてHTMLDivElement
は、そのすべてを利用できるのです。
実は、textContent
はNode
オブジェクトのプロパティで、style
はHTMLElement
オブジェクトのプロパティです。どのプロパティがどのオブジェクトに所属するのかを具体的に記憶する必要性はあまりありませんが、リファレンスを調べる場合にこの知識は大変有用です。
課題
Array#reduce
メソッドは、配列のすべての要素から、単一の値を導き出す(次元を下げる)メソッドです。
reduce
メソッドの第一引数は、引数を2つとる関数です。配列の各要素をこの関数の第二引数に渡し、戻り値を次の実行時に第一引数として渡します。この第一引数は、初回実行時にはreduce
メソッド自体の第二引数が用いられます(ただしこの引数が省略された場合は配列の最初の要素が用いられ、実行回数が1回分減ります)。
reduce
メソッドを使用して、配列の最小値を求めてみてください。