メインコンテンツまでスキップ

組み込みクラス

Array クラス​

今まで何気なく扱ってきた JavaScript の配列ですが、実はArrayクラスのインスタンスです。具体的に言えば、配列リテラルが生成するオブジェクトは、Arrayクラスのインスタンスです。

Array クラスには、開発効率を劇的に変える便利なメソッドが大量に定義されています。

mapメソッド​

Array#mapメソッドは、関数の引数をひとつとり、配列の各要素に対して関数を実行し、それらの戻り値からなる新たな配列を返します。

const numbers = [1, 3, 6, 8];
const doubledNumbers = numbers.map((value) => value * 2); // [2, 6, 12, 16]

2 行目のmapメソッドの引数として渡しているアロー関数式value => value * 2は、引数をひとつとり、その値を 2 倍にして返す関数です。この関数が配列の各要素に対して実行されて、その戻り値の集合がdoubledNumberとなっています。

filterメソッド​

Array#filterメソッドは、関数の引数をひとつとり、配列の各要素に対して関数を実行し、それらの戻り値が truthy だったもののみからなる新しい配列を返します。

const evenNumbers = numbers.filter((value) => value % 2 === 0); // [6, 8]

アロー関数式value => value % 2 === 0は、引数が偶数の場合falseを、奇数の場合trueを返す関数です。numbersのうち6と8の場合のみ戻り値がtrueとなるので、その 2 つのみからなる新しい配列がevenNumbersに入ります。

DOM オブジェクトと継承​

DOM オブジェクトも、何らかのクラスのインスタンスだとみなせます。例えば、

document.querySelector("div");

のようにして取得されたdiv要素は、HTMLDivElementクラスのインスタンスだと考えられます。

HTMLDivElementについて記述している文書を読んでみましょう。おなじみtextContentプロパティやstyleプロパティが存在していませんね。

これには、継承と呼ばれる仕組みが関係しています。継承とは、その名の通り機能を受け継ぐための仕組みです。ここでいう機能とは、例えばプロパティやメソッドです。継承先のオブジェクトでは、継承元のプロパティやメソッドを使用することができます。

DOM は非常に高度な枠組みです。今回の例でいえば、HTMLDivElementはHTMLElementを継承しており、HTMLElementはElementを、そしてElementはNodeを継承しています。そしてHTMLDivElementは、そのすべてを利用できるのです。

実は、textContentはNodeオブジェクトのプロパティで、styleはHTMLElementオブジェクトのプロパティです。どのプロパティがどのオブジェクトに所属するのかを具体的に記憶する必要性はあまりありませんが、リファレンスを調べる場合にこの知識は大変有用です。

課題​

Array#reduceメソッドは、配列のすべての要素から、単一の値を導き出す（次元を下げる）メソッドです。

const sum = [1, 2, 3, 4, 5].reduce(
  (previous, current) => previous + current,
  0,
);
console.log(sum); // 15

reduceメソッドの第一引数は、引数を 2 つとる関数です。配列の各要素をこの関数の第二引数に渡し、戻り値を次の実行時に第一引数として渡します。この第一引数は、初回実行時にはreduceメソッド自体の第二引数が用いられます（ただしこの引数が省略された場合は配列の最初の要素が用いられ、実行回数が 1 回分減ります）。

reduceメソッドを使用して、配列の最小値を求めてみてください。

const numbers = [6, 9, 1, 3, 2];
const minimumNumber = numbers.reduce(/** ここに記述 */);
console.log(minimumNumber); // 1