概要
個人的なJavaScript本格入門(改訂新版)の読書録②
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
オブジェクト
オブジェクト = プロパティ＋メソッド
オブジェクトはプロパティとメソッドから構成される。
プロパティ：オブジェクトの状態や特性を表すための情報。入力フォームを表すFromのようなオブジェクトの場合、フォームの名前、フォームに含まれるテキストボックスや選択ボックスなどの要素、フォームによる送信先などが、プロパティに相当する。
メソッド：オブジェクトを操作するための道具。Formオブジェクトであれば、「フォームの情報をサーバーに送信する」「フォームの内容をクリアする」などの機能がメソッドに当たる。
| プロパティ | メソッド | |
|---|---|---|
| 概要 | モノの状態や特性を表す情報 | モノを操作するための道具 |
| 役割例① | フォームの名前 | フォームを送信する |
| 役割例② | フォームの送信先URL | フォームをクリアする |
| 役割例③ | フォームに含まれる要素群 | フォームを無効化する |
オブジェクトを利用するための準備
オブジェクトをインスタンス化するにはnew演算子を利用する。
example.js
var 変数名 = new オブジェクト名([引数, ・・・])
オブジェクトには、オブジェクトを初期化するために、オブジェクトと同名のメソッドが用意されている。この初期化メソッドのことをコンストラクターとよぶ。オブジェクト名は、正確にはコンストラクター名、となる。
また以下のような組み込みオブジェクトなるものが存在する。これは、JavaScriptが動作する全ての環境で、特別な宣言や定義なしで利用できる。例えば
example.js
var str = 'こんにちは！';
console.log(str.length);
のように、インスタンス化を意識せずにオブジェクトを利用できる。
| オブジェクト | 概要 |
|---|---|
| (Global) | JavaScriptの基本機能にアクセスするための手段を提供 |
| Object | 全てのオブジェクトの雛形になる機能を提供 |
| Array | 配列を操作するための手段を提供 |
| Map/WeakMap | キー/値からなる連想配列を操作するための手段を提供 |
| Set/WeakSet | 一意な値の集合を管理するための手段を提供 |
| String | 文字列を操作するための手段を提供 |
| Boolean | 真偽値を操作するための手段を提供 |
| Number | 数値を操作するための手段を提供 |
| Function | 関数を操作するための手段を提供 |
| Symbol | シンボルを操作するための手段を提供 |
| Math | 数値演算を実行するための手段を提供 |
| Date | 日付を操作するための手段を提供 |
| RegExp | 正規表現に関わる機能を提供 |
| Error/XxxxxError | エラー情報を管理 |
| Proxy | オブジェクトの挙動をカスタマイズする手段を提供 |
| Promise | 非同期処理を実装するための手段を提供 |
文字列の操作
Stringオブジェクト
Stringオブジェクトで利用可能なメンバーは以下表の通り。
| 分類 | メンバー | 概要 |
|---|---|---|
| 検索 | indexOf(substr [,start]) | 文字列前方(start+1文字目)から部分文字列substrを検索 |
| 検索 | lastIndexOf(substr [,start]) | 文字列後方(start+1文字目)からsubstrを検索 |
| 検索 | startsWith(search [,pos]) | 文字列が指定された部分文字列searchで始まるか(引数posは検索開始位置) |
| 検索 | endsWith(search [,pos]) | 文字列が指定された部分文字列searchで終わるか |
| 検索 | includes(search [,pos]) | 文字列に指定された部分文字列searchが含まれるか |
| 部分文字列 | charAt(n) | n+1番目の文字を抽出 |
| 部分文字列 | slice(start [,end]) | 文字列からstart+1 ~ end文字目を抽出 |
| 部分文字列 | substring(start [,end]) | 文字列からstart+1 ~ end文字目を抽出 |
| 部分文字列 | substr(start [,cnt]) | 文字列からstart+1 ~ cnt文字を抽出 |
| 部分文字列 | split(str, [,limit]) | 文字列を分割文字列strで分割し、その結果を配列として取得(引数limitは最大分割数) |
| 正規表現 | match(reg) | 正規表現regで文字列を検索、合致した部分文字列を取得 |
| 正規表現 | replace(reg, rep) | 正規表現regで文字列を検索、合致した部分を部分文字列repで置換 |
| 正規表現 | search(reg) | 正規表現regで文字列を検索、一致する最初の文字位置を取得 |
| 大文字⇄小文字 | toLowerCase() | 小文字に変換 |
| 大文字⇄小文字 | toUpperCase() | 大文字に変換 |
| コード変換 | charCodeAt(n) | n+1番目の文字をLatin-1コードに変換 |
| コード変換 | fromCharCode(c1, c2, ...) | Latin-1コードc1, c2...を文字に変換 |
| コード変換 | codePointAt(n) | n+1番目の文字をUTF-16エンコードされたコードポイント値に変換 |
| コード変換 | fromCodePoint(num,...) | コードポイント値から文字列を生成 |
| その他 | concat(str) | 文字列の後方に文字列strを連結 |
| その他 | repeat(num) | 文字列をnum回だけ繰り返したものを取得 |
| その他 | trim() | 文字列の前後から空白を削除 |
| その他 | length | 文字列の長さを取得 |
Numberオブジェクト
数値型の値を扱うためのラッパーオブジェクト。数値を整形するための機能、無限大/無限小、最大値/最小値など、特別な値を表すための読み取り専用プロパティを含め公開している。
| 分類 | メンバー | 概要 |
|---|---|---|
| プロパティ | MAX_VALUE | Numberで表せる最大の値。1.79E + 308 |
| プロパティ | MAX_SAFE_INTEGER | Numberで安全に表せる最大の整数値。9007199254740991 |
| プロパティ | MIN_VALUE | Numberで表せるゼロに近い数値。5.00E - 324 |
| プロパティ | MIN_SAFE_INTEGER | Numberで安全に表せる最小の整数値。-9007199254740991 |
| プロパティ | EPSILON | 1と、Numberで表せる1より大きい最小の値との差。 |
| プロパティ | NaN | 数値でない(Not a Number) |
| プロパティ | NEGATIVE_INFINITY | 負の無限大 |
| プロパティ | POSITIVE_INFINITY | 正の無限大 |
| メソッド | toString(rad) | rad進数の値に変換(radは2~36) |
| メソッド | toExponential(dec) | 指数形式に変換(桁数が不足する場合は0で補う) |
| メソッド | toFixed(dec) | 小数点第dec位になるように四捨五入 |
| メソッド | toPrecision(dec) | 指定桁数に変換(桁数が不足する場合は0で補う) |
| メソッド | isNaN(num) | NaNであるか判定 |
| メソッド | isFinite(num) | 有限値であるか判定 |
| メソッド | isInteger(num) | 整数値であるか判定 |
| メソッド | isSafeInteger(num) | Safe Integerであるかを判定 |
| メソッド | parseFloat(str) | 文字列を小数点数に変換 |
| メソッド | parseInt(str [,radix]) | 文字列を整数に変換(引数radixは基数) |
値の集合オブジェクト
Arrayオブジェクト
配列型の値を扱うためのオブジェクト。生成方法はいくつかあるが、下記のような定義が望ましい。
example.js
var ary = [1, 2, 3]; //指定要素で配列を生成
var ary = []; // 空の配列を生成
Arrayオブジェクトで利用できる主なメンバー
| 分類 | メンバー | 概要 |
|---|---|---|
| 基本 | length | 配列のサイズ |
| 基本 | isArray(obj) | 指定したオブジェクトが配列であるか(静的メソッド) |
| 基本 | toString() | 「要素、要素、・・・」の形式で文字列に変換 |
| 基本 | toLocaleString() | 配列を文字列に変換(区切り文字はロケールによって変化) |
| 基本 | indexOf(elm [,index]) | 指定した要素に合致した最初の要素のキーを取得(indexは検索開始位置) |
| 基本 | lastIndexOf(elm [,index]) | 指定した要素に合致した最後の要素のキーを取得(indexは検索開始位置) |
| 基本 | entries() | 全てのキー/値を取得 |
| 基本 | keys() | 全てのキーを取得 |
| 基本 | values() | 全ての値を取得 |
| 加工 | concat(ary) | 指定配列を現在の配列に連結 |
| 加工 | join(del) | 配列内の要素を区切り文字delで連結 |
| 加工 | slice(start [,end]) | start+1 ~ end番目の要素を抜き出し |
| 加工 | splice(start, cnt [,rep [,...]]) | 配列内のstart+1 ~ start+cnt番目の要素をrep,...で置き換え |
| 追加/削除 | pop() | 配列末尾の要素を取得し、削除 |
| 追加/削除 | push(data1 [,data2, ...]) | 配列末尾に要素を追加 |
| 追加/削除 | shift() | 配列先頭の要素を取得し、削除 |
| 追加/削除 | unshift(data1 [,data2, ...]) | 配列先頭に指定要素を追加 |
| 並べ替え | reverse() | 逆順に並び替え |
| 並べ替え | sort([fnc]) | 要素を昇順に並び替え |
| コールバック | forEach(fnc [,that]) | 配列内の要素を関数fncで順に処理 |
| コールバック | map(fnc [,that]) | 配列内の要素を関数fncで順に加工 |
| コールバック | every(fnc [,that]) | 全ての配列内の要素が条件fncに合致するか |
| コールバック | some(fnc [,that]) | いずれかの配列内の要素が条件fncに合致するか |
| コールバック | filter(fnc [,that]) | 条件fncに合致した要素で配列を合成 |
| コールバック | reduce(fnc [,init]) | 隣同士の2つの要素を左から右へ関数fncで処理して単一の値にする(引数initは初期値) |
| コールバック | reduceRight(fnc [,init]) | 隣同士の2つの要素を右から左へ関数fncで処理して単一の値にする(引数initは初期値) |
forEachメソッド
配列内の要素を指定した関数で順に処理する。
callback_foreach.js
var data = [2, 3, 4, 5]
data.forEach(function(value, index, array){
console.log(value * value); //結果：4, 9, 16, 25
});
forEachメソッドでは、配列の要素を順番に取り出して、ユーザー定義関数callbackに渡していく。そうして渡された値を関数callbackが処理していく。このため、関数callback側では以下の引数を用意し、配列の情報を受け取れるようにしておく。
- 第1引数value(要素の値)
- 第2引数index(インデックス番号)
- 第3引数array(元の配列)
だたし、上記の例では引数index/arrayは利用しないので、省略してもOK。
mapメソッド
配列を指定された関数で加工する。
callback_map.js
var data = [2, 3, 4, 5]
var result = data.map(function(value, index, array){
return value * value;
});
console.log(result); //結果：[4, 9, 16, 25]
このようにmapは、関数callbackからの戻り値をまとめて、新たな配列を作成する。
filterメソッド
指定された関数でここの要素を判定し、条件に合致した要素だけを取り出す。
例えば、配列dataから奇数だけを取り出してみる。
callback_filter.js
var data = [4, 9, 16, 25]
var result = data.filter(function(value, index, array){
return value % 2 === 1;
});
console.log(result); //結果：[9, 25]
上記のように、関数callbackがtrueを返した時のみ、その時の要素を結果配列に書き戻す。
Mapオブジェクト
Mapオブジェクトは、キー/値のセット(連想配列、ハッシュ)を管理するためのオブジェクト。ES2015で初めて提供された。
利用可能なメンバーは以下の通り。
| メンバー | 概要 |
|---|---|
| size | 要素数 |
| set(key, val) | キー/値のペアの要素を追加。重複時は上書き |
| get(key) | 指定したキーの要素を取得 |
| has(key) | 指定したキーの要素が存在するか判定 |
| delete(key) | 指定したキーの要素を削除 |
| clear() | 全ての要素を削除 |
| keys() | 全てのキーを取得 |
| values() | 全ての値を取得 |
| entries() | 全てのキー/値を取得 |
| forEach(fnc [,that]) | マップ内の要素を関数fncで順に処理 |
オブジェクトリテラルとの違いは
- 任意の型でキーを設定できる：オブジェクトやNaNなどもキーになり得る。
- マップのサイズを取得できる：オブジェクトリテラルでは、for...inループなどでオブジェクトを走査し、手動でカウントする必要がある。
- クリーンなマップを作成できる。
Setオブジェクト
Setオブジェクトは、重複しない値の集合を管理するためのオブジェクト。ES2015で初めて提供された。
正規表現(RegExpオブジェクト)
主なパターン
| 分類 | パターン | マッチする文字列 |
|---|---|---|
| 基本 | ABC | 「ABC」という文字列 |
| 基本 | [ABC] | A, B, C いずれか１文字 |
| 基本 | [^ABC] | A, B, C 以外のいずれか１文字 |
| 基本 | [A-Z] | A~Z の間の１文字 |
| 基本 | A|B|C | A, B, C のいずれか |
| 量指定 | X* | 0以上のX('fe*'は、'f', 'fe', 'fee'などにマッチ) |
| 量指定 | X? | 0, または１文字のX('fe?'は、'f', 'fe' にマッチ。 'fee'にはマッチしない) |
| 量指定 | X+ | １文字以上のX('fe+'は、'fe', 'fee'などにマッチ。 'f'にはマッチしない) |
| 量指定 | X{n} | Xとn回一致('[0-9]{3}'は３桁の数字) |
| 量指定 | X{n,} | Xとn回以上一致('[0-9]{3,}'は３桁以上の数字) |
| 量指定 | X{m,n} | Xとm~n回一致('[0-9]{3,5}'は３桁以上５桁以下の数字) |
| 位置指定 | ^ | 行の先頭に一致 |
| 位置指定 | $ | 行の末尾に一致 |
| 文字セット | . | 任意の１文字に一致 |
| 文字セット | \w | 大文字/小文字の英字、数字、アンダースコアに一致('[A-Za-z0-9]'と同義) |
| 文字セット | \W | 文字以外に一致('[^\w]')と同義 |
| 文字セット | \d | 数字に一致('[0-9]'と同義) |
| 文字セット | \D | 数字以外に一致('[^0-9]'と同義) |
| 文字セット | \n | 改行(ラインフィード)に一致 |
| 文字セット | \r | 復帰(キャリッジリターン)に一致 |
| 文字セット | \t | タブ文字に一致 |
| 文字セット | \s | 空白文字に一致 |
| 文字セット | \S | 空白以外の文字に一致 |
| 文字セット | ~ | 「〜」で表される文字 |
RegExpオブジェクトの生成
JavaScriptで正規表現を解析し、文字列検索するための機能を提供するのがRegExpオブジェクト。その生成方法は大きく2つあり、
- RegExpオブジェクトのコンストラクターを利用する
- 正規表現リテラルを利用する
それぞれの構文を見ていく。
var 変数名 = new RegExp('正規表現', 'オプション')
var 変数名 = /正規表現/オプション;
正規表現リテラルでは、正規表現全体をスラッシュで括る必要がある。
またオプションは正規表現の挙動を決めるパラメーターで、以下のような値を指定できる。
| オプション | 概要 |
|---|---|
| g | 文字列全体に対してマッチするか(無指定の場合、一度マッチした時点で処理を終了) |
| i | 大文字/小文字を区別するか |
| m | 複数行に対応するか(改行コードを行頭、行末と認識) |
| u | Unicode対応 |