JavaScriptの関数表記・正規表現
JavaScript独特な書き方で理解が困難かつWebを探してもまとまったサイトが無かったのでまとめました。
オブジェクト
オブジェクトリテラル
オブジェクトは複数のプロパティを含むコンテナであり、プロパティは名前と値で構成されている。
var flight = {
airline: "Oceanic",
departure: {
IATA: "SYD",
"city-name": "Sydney" // JavaScriptの名前規則に従わないはクォート「""」が必要
},
arrival: {
city_name: "Los Angeless" // JavaScriptの名前規則に従う場合はクォート「""」が不要
}
};
flight.departure.IATA // "SYD"が取得できる
関数
JavaScriptにおける関数はオブジェクトです。そのためそれ以外の値と同様に扱うことができます。
関数を変数やオブジェクト、配列に格納することもできます。
var add = function (a, b) {
return a + b;
};
関数呼び出しパターン
メソッド内で別の変数を定義し、その中にthisの値を代入すれば、内部関数ではその変数を通じてthisの値にアクセスできるようになります。変数の名前は「that」とするのが通例です。
myObject.dobule = function () {
var that = this; // 値の待機
var helper = function () {
that.value = add(that.value, that.value);
};
helper(); // helperを関数として呼び出す
}
myObject.dobule();
document.writeln(myObject.value);
変数型の拡張
標準で用意されている変数型を拡張することができる。
例1）数値の符号によって小数点以下の切り捨て、切り上げを決定する
Number.method('integer', function () {
return Math[this < 0 ? 'ceil' : 'floor'](this);
});
document.writeln((10/3).integer()); // -3
例2）文字列の後ろにある空白を取り除く
String.method('trim', function () {
return this.replace(/^\s+|\s+$g, '');
});
document.writeln('"' + " neat ".trim() + '"');
引数を複数利用
パラメータを限定しない関数を書くためには次のように書くことができる。
var sum = function() {
var i, sum = 0;
for (i = 0; i < arguments.length; i += 1) {
sum += arguments[i];
}
return sum;
}
document.writeln(sum(4, 8, 15, 16, 23, 42)); // 108
JavaScriptの設計時のミスにより、argumentsは本物の配列ではなく「配列に似た」オブジェクトです。このためlengthプロパティは存在するが、配列で利用できるメソッドはいずれも使えません。
コールバック
ネットワークやサーバの速度が遅かった場合、レスポンスの速度低下は受け入れがたいものになるでしょう。
よいアプローチは非同期のリクエストを行うことです。
カリー化
カリー化は関数に引数を固定して新しい関数を生成する
メモ化
メモ化は前回の操作の結果をオブジェクトに記憶しておくことができる
正規表現
例）URLにマッチする正規表現
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var url = "http://www.hoge.com:80/hage?q#fragment";
var result = parse_url.exec(url);
var names = ['url', 'scheme', 'slash', 'host', 'port', 'path', 'query', 'hash'];
var blanks = ' ';
var i;
for (i = 0; i < names.length; i += 1) {
document.writeln(names[i] + ':' + blanks.substring(names[i].length) + result[i]);
}
結果
url: http://www.hoge.com:80/hage?q#fragment scheme: http slash: // host: www.hoge.com port: 80 path: hage query: q hash: fragment
| 正規表現 | 説明 |
|---|---|
| ^ | 文字の先頭。 文字列の先頭にURLではない文字がある場合に読み飛ばさないようにするため |
| (?:([A-Za-z]+):)? | 「:（コロン）」で終わるスキーム名にマッチする。 「(?:..)」は非キャプチャグループを意味する。 最後の「?」はそのグループが省略可能を意味する |
| (\/{0,3}) | キャプチャグループ。 「\/」は「/（スラッシュ）」という文字に一致。 「{0,3}」は「/」が0回、1回、2回、3回のいずれかの回数連続していることを意味する |
| ([0-9.\-A-Za-z]+) | キャプチャグループ。 ホスト名にマッチする。 ホスト名は「-」を含む。 「-」は範囲を表すハイフンと区別するため「\-」のようにエスケープされている。 |
| (?::(\d+))? | ポート名。 省略可能。 「\d」は数字を表す。 |
| (?:\/([^?#]*))? | 省略可能。 文字クラス「^?#」の文字クラスは「?」と「#」を除く全ての文字を表している。 「*」はその文字クラスが0回（存在しない）か1回以上繰り返すことを意味する。 |
| (?:\?([^#]*))? | 省略可能。 「?」で始まるグループを意味する。 「^#」は「#」を除く0個以上の文字列をキャプチャする |
| (?:#(.*))? | 省略可能。 「.」は改行文字以外の全ての文字にマッチする。 |
| $ | 「$（ドル）」は文字列の最後を意味する。 |
非キャプチャグールプにすることで「処理速度の向上」「どの部分をキャプチャするかの明確化」などの利点があるので場合によってい使い分けましょう。
正規表現のフラグ
| フラグ | 意味 |
|---|---|
| g | Global（複数回マッチする。この正確な意味はメソッドにより異なる） |
| i | Insensitive（大文字・小文字を区別しない） |
| m | Multiline（^と$が待つ記号にマッチする） |
正規表現のキャプチャグループ
| キャプチャグループ | マッチした文字列はキャプチャされる。キャプチャグループには番号が振られる |
|---|---|
| 非キャプチャグループ | 「?:」で始まる。単なるマッチのみを行い、マッチした文字列をキャプチャしない |
| 肯定先読み | 「?=」で始まる。非キャプチャグループと似ているが、マッチした後テキストの中の走査位置がグループがマッチした場所まで巻き戻される |
| 否定先読み | 「?!」で始まる。肯定先読みグループと似ているが、走査が続行されるのはグループのマッチが失敗した場合のみである |
最短一致
| 表現 | 意味 |
|---|---|
| {a} | 直前の文字の a回にマッチ |
| {a,} | 直前の文字の a回以上にマッチ |
| {a,b} | 直前の文字の a回以上 b回以下にマッチ |
| {a,}? | ?マークが付く事で最短を表現できる |
| {a,b}? | ?マークが付く事で最短を表現できる |
JavaScriptでは なるべくたくさんマッチしようとする [ 最長一致 ] となります。
s.str = s.str.replace(/<br(.*)>/gmi, "");
入力文字列：
あ<br />い<br />う
結果：
あう
最長一致モードで動作すると、途中に「>」が出てきているのですが、そこでは止まらず、最後の「>」までマッチしています。つまり最長一致とは、できるだけ長くマッチングさせるという意味になります。
これを防ぐためには、次のように、「>」の前に「?」（最短一致記号）をつけます。
s.str = s.str.replace(/<br(.*?)>/gmi, "");
入力文字列：
あ<br />い<br />う
結果：
あいう
ひとつの文字や数字
| . | 改行文字を除く任意の1文字 |
| c | メタキャラではない1文字 |
| [a-z0-9] | [ ]の中の任意の1文字(小文字大文字は別として扱う） |
| [^a-z0-9] | [ ]の中にない任意の1文字 |
| \w | アルファベット、数字又は下線 |
| \W | アルファベット、数字、下線以外 |
| \d | 数字 |
| \D | 数字以外[^0-9]と同じ |
| \s | 空白文字（スペース、タブ、改行） |
| \S | 空白文字以外 |
| \n | 改行 |
| \r | リターン（復帰） |
| \t | タブ |
| \d | バックスペース |
| \o | 8進数の値 |
| \x811 | 16進数の値 |
| \cx | 制御文字 |
数量子
| ? | 直前の文字が0個または1個 |
| * | 直前の文字が0個以上 |
| + | 直前の文字が1個以上 |
| {a} | 直前の文字がa個 |
| {a,} | 直前の文字がa個以上 |
| {a,b} | 直前の文字がa個以上b個以下 |
| ?? | 直前の文字が0個または1個 |
| *? | 直前の文字が0個以上 |
| +? | 直前の文字が1個以上 |
| {a}? | 直前の文字がa個 |
| {a,}? | 直前の文字がa個以上 |
| {a,b}? | 直前の文字がa個以上b個以下 |
位置指定
| ^ | 行頭 |
| $ | 行末 |
| \b | 単語の区切り |
| \B | 単語の区切り以外 |
その他
| \ | 次のメタ文字をクォートする |
| () | グループ化 |
特殊変数
| \1、$1 | はじめにマッチした項目 |
| \2、$2 | 2番目にマッチした項目 |
オススメ書籍
HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。
