みこむらめもむらむらむら

なんかHTML5とかJS勉強とかやりながらめもを綴るブログ

【JavaScript】関数とは

あ、テキストは下記を使用して勉強中
JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで
いよいよやってまいりました関数!ひゃほー!

関数を定義する3つの方法

与えられた入力(パラメータ)に基づいて何らかの処理を行い
その結果を返す仕組みを関数という
JavaScriptではデフォルトでも多くの関数を提供しているが
アプリケーション開発者が自分で関数を定義することもできる

ユーザ定義関数を定義するには大きく3つの方法がある

  1. function命令で定義する
  2. Functionコンストラクタ経由で定義する
  3. 関数リテラル表現で定義する

ふむふむ‥それぞれを詳しく見ていく!

function命令で定義する

function 関数名([引数1[, 引数2[, ..]]]) {
  関数内で実行される任意の命令(群)
  [return 戻り値;]
}

関数名にについては下記2点に注意

  1. (単なる文字列や式でなく)識別子を指定する必要がある
    • 1文字目は英字/アンダースコア(_)/ドル記号($)のどれか
    • 2文字目以降は、1文字目で利用可能な文字か数字
    • 変数名に含まれる英数字の小文字/大文字は区別される
    • JSで意味を持つ予約語じゃないこと
  2. 「その関数が何の処理をしているのか」がすぐわかるような名前をつける
    • 「showMessage」のように「動詞+名詞」の形式で命名するのが一般的

引数は関数の挙動を決めるためのパラメータ
ここでは呼び出し元から指定された値を
受け取るための変数をカンマ区切りで指定する

引数を受け取るための変数は仮変数をも云い、
関数の内部でのみ参照できる

戻り値は、関数が処理の結果
最終的に呼び出し元に返すための値のこと
通常、関数の末尾にreturn命令を記述して指定する
関数の途中でreturn命令を記述した場合
それ以降の処理は実行されないので要注意
関数の途中で記述する場合は
if/switchなどの条件分岐を合わせて利用するべき

戻り値がない、呼び出し元に値を返さない関数では
return命令を省略しても問題ない
return命令が省略された場合
関数はデフォルトでundefined(未定義値)を返す

定義済みの関数は以下のようにして呼び出す

関数名([引数, ..]);

それでは構文の説明からの具体例!

function triangle(base, height) {
  return base * height / 2;
}

document.writeln('三角形の面積:' + triangle(5, 2));  //5

上記のtriangle関数は引数として
変数base(底辺)、height(高さ)を受け取り
戻り値として三角形の面積を返すための関数である

引数が存在しない場合にも
関数の後方の丸カッコは省略できないので注意

はあく!(・∀・)

Functionコンストラクタ経由で定義する

JavaScriptでは組み込みオブジェクトとして
Functionオブジェクトを用意している
関数はこのFunctionオブジェクトの
コンストラクタを利用して定義することもできる

var 変数名 = new Function([引数[, 引数2[, ..,]]], 関数の本体)

たとえばさっきのtriangle関数を
コンストラクタ経由で書き換えると下記のようになる

var triangle = new Function('base', 'height', 'return base * height / 2;');
document.writeln('三角形の面積:' + triangle(5, 2));  //5

Functionコンストラクタには関数が受け取る仮引数を順に並べ
最後に関数本体を指定するのが基本である
String、Number、Booleanなどのオブジェクトと同じく
new演算子を省略してあたかもグローバル関数であるかのように
記述することもできる

var triangle = Function('base', 'height', 'return base * height / 2;');

また、以下のように仮引数の部分を
ひとつの引数として記述することもできる

var triangle = Function('base, height', 'return base * height / 2;');

ここでは本文に分が一つしか含まれない関数を定義しているが
通常の関数定義と同様、セミコロン(;)で文を区切って
複数の文を含めることもできる

先ほどのfunction命令を使わずに
あえてFunctionコンストラクタを利用するメリットは
「引数や関数本体を文字列として定義できる」ことである

var param = 'height, width';
var formula = 'return height * width / 2;';
var diamond = new Function(param, formula);
document.writeln('ひし形の面積:' + diamond(5, 2));  //5

ここでは単純化のため
変数param、formulaをそれぞれ固定値で指定しているが
スクリプト上で文字列連結して
引数/関数本体を動的に生成することもできる
ただしこのような使い方は
eval関数のときに述べたのと同じ下記理由で濫用すべきではない

  • 第3者による任意のスクリプトが自由に実行できてしまう可能性がある(セキュリティリスク)
  • 通常のコードを実行するよりも処理速度が遅い(パフォーマンスの劣化)

JavaScriptの関数は基本的にfunction命令
または後述する関数リテラルで定義する

と覚えておく、はい!

関数リテラル表現で定義する

JavaScriptにおいて関数はデータ型の一種である
つまり、関数を変数に代入したり、ある関数の引数として渡したり
あるいは、戻り値として関数を返すことすら可能である
これによってJavaScriptは柔軟なコーディングが可能になる

さっきのtriangle関数を
関数リテラルで書き換えると下記のようになる

var triangle = function(base, height) {
  return base * height / 2;
}

document.writeln('三角形の面積:' + triangle(5, 2));  //5

関数リテラルの記法はfunction命令によく似ているが
以下のような違いがある

  • function命令
    • 関数triangleを直接定義している
  • 関数リテラル
    • 「function(base, height) {..}」と名前のない関数を定義上で変数triangleに格納している

関数リテラルは宣言した時点では名前を持たないことから
匿名関数、または無名関数と呼ばれることもある
匿名関数はJavaScriptの関数を利用する上で大変重要な概念である
詳細は後述かーああーなるほどです

【JavaScript】例題やってみる【配列、制御命令などなど】

JavaScriptの勉強をしておりますが
なんていうかなんていうか知識があっちこっちに散らばっていて
なんていうかなんていうか算数でいうなれば公式はわかってるけど
文章問題解いたことないみたいな感じで
ものすごく不安なのであります、ちーん

できるようになるんだろうかーわかるようになるんだろうかー

とかなんとかぼやいていたら先生から例題きた!

var items = [
 {
  "code": "pink_shirt",
  "name": "ピンク色のシャツ",
  "description": "ピンク色のシャツの説明",
  "price": 2000,
  "category": "tops"
 },
 {
  "code": "red_shirt",
  "name": "赤いキャミソール",
  "description": "赤いキャミソールの説明",
  "price": 1000,
  "category": "tops"
 },
 {
  "code": "green_keyholder",
  "name": "グリーンのキーホルダー",
  "description": "グリーンのキーホルダーの説明",
  "price": 1500,
  "category": "accessory"
 },
 {
  "code": "pink_bottoms",
  "name": "ピンクのスカート",
  "description": "ピンクのスカートの説明",
  "price": 3000,
  "category": "bottoms"
 },
 {
  "code": "green_bottoms",
  "name": "みどりのパンツ",
  "description": "みどりのパンツの説明",
  "price": 2500,
  "category": "bottoms"
 }
];

categoryがbottomsのもののcodeの配列を作成を作成せよ





(・∀・;)

よ、よっしやってみるぞ!(`・ω・´;)

30分後‥

var ary = [];
var j = 0;
for(var i = 0; i<items.length; i++){
  if (items[i].category == 'bottoms'){
    ary[j] = items[i].code;
    j++;
  }
};

こ、こうか‥!?(`・ω・´;)


先生に見せたらこうするともっとスマートだよ、と

var ary = [];
for(var i = 0; i<items.length; i++){
  if (items[i].category == 'bottoms'){
    ary[ary.length] = items[i].code;
  }
}

Σ(´□`ノ)ノな、なるほど‥!!


配列aryは中身がないからfor命令に入ってきたとき
「ary.length」は「0」なのか!

要は

ary[0] = items[i].code;

ってことだ!

でもってこの処理が済むと
「ary.length」は「1」になる、おおお
なるほどです!

よくあるやり方だそうです、勉強になります



とか何とか云っていたら先生が一言

じゃあ次はこれをpushメソッド使った形に書き換えてみようか


しれっと課題が増えた‥!(`・ω・´;)

var ary = [];
for(var i = 0; i<items.length; i++){
  if (items[i].category == 'bottoms'){
    ary.push(items[i].code);
  }
}

なるほどこんな風にも書き換えられるのか

配列の最後に追加していくのよねpushメソッド
空の配列追加処理をやるわけですねなるほどー







なんとか書けたのでちょっと自信がつきましたありがとう先生‥
勉強‥むだにならないといいなあ‥(´;ω;`)

【ぼやき】なんかなんとなくなんでもないけど

JavaScriptの勉強をしておりますが
なんていうかなんていうか知識があっちこっちに散らばっていて
なんていうかなんていうか算数でいうなれば公式はわかってるけど
文章問題解いたことないみたいな感じで
ものすごく不安なのであります、ちーん

できるようになるんだろうかーわかるようになるんだろうかー

【JavaScript】基本データを操作する~組み込みオブジェクト【まとめ】

基本データを扱うためのオブジェクト

  • Stringオブジェクト
    • 文字列型(string)の値を扱うためのラッパーオブジェクトで文字列の抽出や加工、検索などを行うための機能を提供する
  • Numberオブジェクト
    • 数値型(number)の値を扱うためのラッパーオブジェクトで数値の整形を行うための機能を提供するとともに無限大/無限小、数値型の最大値/最小値などの特別な値を表すための読み取り専用プロパティ(定数)を公開している
  • Mathオブジェクト
    • 指数計算や平方根、対数関数など数学に関わる演算機能を提供する
    • 全て静的プロパティ/メソッドである
    • また、Mathオブジェクトはnew演算子インスタンス化しようとすると実行エラーになる
  • Arrayオブジェクト
    • 配列型の値を扱うためのオブジェクトで配列に対する要素の追加/削除、結合、並び替えなどを行うための機能を提供する

それぞれ生成する場合は基本的にリテラル表現を使用する

var 変数名 = '文字列';  //Stringオブジェクト
var 変数名 = 数値;  //Numberオブジェクト
Math.プロパティ名;
Math.メソッド名(引数);  //Mathオブジェクト
var 変数名 = [要素, .., ..]  //Arrayオブジェクト

その他の組み込みオブジェクト

  • Dateオブジェクト
    • 日付/時刻データを直観的に表現/操作する機能を提供する
    • Dateオブジェクトのコンストラクタは下記4種類
var d = new Date();
//デフォルトで生成された時点でのシステム日付をセット
var d = new Date('2012/01/30');
//日付文字列をもとにDateオブジェクトを生成する
var d = new Date(2012, 0, 30, 14, 29, 50, 500);
//年月日/時分秒/ミリ秒の形式で指定
var d = new Date(1217862000000);
//1970/01/01 00:00:00からの経過ミリ秒(タイムスタンプ値)で指定
  • RegExpオブジェクト
    • JavaScript正規表現を解析し文字列検索するための機能を提供する
    • コンストラクタ構文では正規表現は文字列として指定している
    • JavaScriptの文字列リテラルにおいて「\」は意味を持った予約字であるため、本来の正規表現パターンである「\w」を認識させるためには「\」を「\\」としてエスケープする必要がある
    • 正規表現リテラルにおいて「/」は正規表現パターンの開始と終了を表す予約文字である
    • 正規表現リテラルで、正規表現パターンそのものに「/」を含む場合にはこれを「\/」のようにエスケープ処理する必要がある
var 変数名 = new RegExp('正規表現', 'オプション');
//コンストラクタ構文
var 変数名 = / 正規表現/ オプション ;
//正規表現リテラル
  • Objectオブジェクト
    • オブジェクトの共通的な性質/機能を提供する
    • すべてのオブジェクトの基本オブジェクトである
    • 組み込みオブジェクトもユーザ定義オブジェクトも「オブジェクト」と名のつくものはすべてObjectオブジェクトで定義されたプロパティやメソッドを共通して利用することができる
  • Globalオブジェクト
変数名
関数名(引数, ..)


こんなもんかなあ‥(・∀・;)

【JavaScript】基本機能を提供する(Globalオブジェクト)

Globalオブジェクトとそのメンバ

Globalオブジェクトはグローバル変数
グローバル関数を管理するために
JavaScriptが自動的に生成する「便宜的な」オブジェクト
グローバル変数/グローバル関数とは
要は、関数配下に属さないトップレベルの変数/関数のこと
グローバル変数/関数は自分自身で定義することも可能だが
JavaScriptではいくつかデフォルトで提供している

特殊値

  • NaN
    • 数値でない(Not a Number)
  • Infinity
    • 無限大(∞)
  • undefined
    • 未定義値

チェック

  • isFinite(num)
    • 有限値かどうか(NaN、正負の無限大でない)
  • isNaN(num)
    • 数値でない(Not a Number)かどうか

変換

  • Boolean(val)
    • 真偽型に変換
  • Number(val)
    • 数値型に変換
  • String(val)
    • 文字列型に変換
  • parseFloat(str)
  • parseInt(str)
    • 文字列を整数値に変換

エンコード

  • escape(str)
    • 文字列をエスケープ処理
  • unescape(str)
    • エスケープ文字列をもとに戻す
  • encodeURI(str)
  • decodeURI(str)
    • 文字列をURIデコード
  • encodeURIConponent(str)
  • 文字列をエンコード
  • decodeURIConponent(str)
  • 文字列をデコード

解析

  • eval(exp)
    • 式/値を評価

これらのグローバル変数/関数は下記構文で参照できる

変数名
関数名(引数, ..)

数値へ明示的に変換する(parseFloat/parseInt/Number関数)

JavaScriptはデータ型に寛容な言語であり
その時々の文脈(前後の関数や演算子)によって
JavaScript側で適切なデータ型に自動変換してくれる
しかし、この自動変換が時として思わぬバグの温床になることがある
そのため、JavaScriptでは
データ型を明示的に変換するための方法を提供している
データ型を明確にした上で処理を行いたい場合
あるいは、変数の内容がそもそも曖昧である場合には
明示的にデータ型を変換することで
スクリプトの思わぬ挙動を未然に防ぐことができる

たとえば以下は与えられた値を数値に変換する
parseFloat/parseInt/Number関数の例である

var n = '123xxx';
document.writeln(Number(n));  //NaN
document.writeln(parseFloat(n));  //123
document.writeln(parseInt(n));  //123

変数nの「123xxx」のような文字列混在の数値が渡された場合
parseFloat/parseInt関数は「123」と解析できる部分だけを数値として取り込む
え、じゃあ「12xx12」みたいに混在したらどうなるの?
と思ってテストしたら「12」だけ返ってきた
あくまで先頭からの連続した数値のみらしい
「xxx123」だと「NaN」を返すのかーふむ

var d = new Date();
document.writeln(Number(d));  //1328161657227
document.writeln(parseFloat(d));  //NaN
document.writeln(parseInt(d));  //NaN

変数dのようにDateオブジェクトが渡された場合
parseFloat/parseInt関数はこれを解析できずにNaNを返すが
Number関数は「Dateオブジェクトを経過ミリ秒に換算した値」を数値として返す

var h = '0777';
document.writeln(Number(h));  //777
document.writeln(parseFloat(h));  //777
document.writeln(parseInt(h));  //511

var e = '1.01e+2';
document.writeln(Number(e));  //101
document.writeln(parseFloat(e));  //101
document.writeln(parseInt(e));  //1

さらに、変数hのように8進数の整数リテラル「0777」を解析した場合
parseInt関数だけはこれを8進数としてみなして「511」と返すが
その他の関数は「777」と返す
また、浮動小数点の指数表現「1.01e+2」を解析した場合
parseFloat/Number関数はこれを正しく解析するが
parseInt関数は末尾の文字列を「e+2」をサプレス(削除)し
さらに小数点以下を切り捨てた「1」を返す

ふむふむ目的に合わせて使い分けるの
気を付けましょうねってとこですね、はあく

グローバルオブジェクトが提供するグローバル関数Numberは
実は組み込みオブジェクトNumberでもある
そのため、下記のように書き換えても
Number関数と同様の結果が得られる

document.writeln(new Number(d));

データ型を明示で気に文字列型、論理型に変換したい場合も同様で、
それぞれString/Boolean関数を使用する
Number関数と同様、String/Boolean関数の実態は
String/Booleanオブジェクトであり
以下のいずれの書き方をしても意味は同じになる

var str = new String('123');
var str = String('123');

補足:算術演算子による文字列/数値への変換

文字列⇔数値の変換は算術演算子「+」「-」を利用することもできる

document.writeln(typeof(123 + ''));  //string
document.writeln(typeof('123' - 0));  //number

「+」演算子は与えられたオペランドのいずれかが文字列である場合
片方も同時に文字列に変換して連結するため
1行目は「string」が返ってくる
また、「-」演算子では与えられたオペランドのいずれかが数値である場合
もう片方を自動的に数値に変換したうえで減算する

クエリ情報をエスケープ処理する(encodeURI/encodeURIComponent関数)

たとえばGoogleやYahoo!のような検索エンジンを利用していると
以下のようなURLをみかけることがある

http://www.google.co.jp/search?q=%E3%81%BF%E3%81%93%E3%82%80%E3%82%89%E3%82%81%E3%82%82%E3%82%80%E3%82%89&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a

このようにURL末尾「~?」以降に「キー名=値&..」の形式で記述されているのは
サーバー上で動くアプリケーションへの問い合わせ必要なデータである
これをクエリ情報という、うんしってるー!
このクエリ情報は簡易である分渡せる情報にはいくつかの制限がある
たとえば、クエリ情報の区切り文字である「?」や「=」をはじめ
「%」、空白、マルチバイト文字などは使用できない
これらの文字がクエリ情報に含まれる可能性がある場合は
予め無害な文字列(「%xx」の形式)に変換しておく必要がある
このような変換処理をURIエンコードという
JavaScriptではencodeURI/encodeURIComponent関数で
URIエンコード処理を提供している

var str = '!"#$%&()+=*?@~_|;:,.';
document.writeln(encodeURI(str));
//!%22#$%25&()+=*?@~_%7C;:,.
document.writeln(encodeURIComponent(str));
//!%22%23%24%25%26()%2B%3D*%3F%40~_%7C%3B%3A%2C.

encodeURIComponent関数では
「#」「$」「+」「-」「/」「@」「;」「:」「,」なども
エンコードされている
それに対しencodeURI関数では変換されていない
また「!」「(」「)」「-」「*」「~」「_」などは
いずれの関数でも変換されない
encodeURI/encodeURIComponent関数でエンコードされた文字列は
decodeURI/decodeURIComponent関数を利用することで
元の文字列にデコードすることができる

encodeURI/encodeURIComponent関数によく似た関数として
escape関数があるがこちらは使用しているプラットフォームや
ブラウザ環境、文字コードなどによって得られる結果が異なるため
「下位互換性を維持したい」など特別な理由がない限り使用しない

動的に生成したスクリプトを実行する(eval関数)

eval関数は与えられた文字列を
JavaScriptのコードとして評価/実行する

var str = 'window.alert("eval 関数")';
eval(str);  //「eval 関数」と表示

これは文字列として渡されたwindow.alertメソッドを
eval関数で解析/実行する例である

このようにしてみると、eval関数は自在にJavaScriptのコードを引き渡し
実行することが可能になり柔軟にコーディングできるように見えるが
以下のような理由から、濫用は避けるべきである

  • 第3者による任意のスクリプトが自由に実行できてしまう可能性がある(セキュリティリスク)
  • 通常のコードを実行するよりも処理速度が遅い(パフォーマンスの劣化)

eval関数の利用はせいぜいJSONデータを解析する場合に留めるのが無難
その他の状況でeval関数を利用している場合
他の方法で置き換えられないか検討してみるべきである

了解いたしました‥

【JavaScript】すべてのオブジェクトのひな形(Objectオブジェクト)

Objectオブジェクトとは

Objectオブジェクトとは、オブジェクトの共通的な性質/機能を提供する
すべてのオブジェクトの基本オブジェクトである
組み込みオブジェクトもユーザ定義オブジェクトも
「オブジェクト」と名のつくものはすべて
Objectオブジェクトで定義されたプロパティやメソッドを
共通して利用することができる

Objectオブジェクトで利用可能なメンバ

  • constructor
  • toString()
    • オブジェクトの文字列表現を取得
  • valueOf()
    • オブジェクトの基本型表現(多くは数値)を取得
  • hasOwnProperty(prop)
    • 指定したプロパティを持つか
  • propertylsEnumerable(prop)
    • for..in命令によってプロパティ/メソッドを列挙できるか
  • isPrototypeOf(obj)
    • 呼び出し元のオブジェクトが指定したオブジェクトのプロトタイプであるか

オブジェクトを基本型に変換する(toString/valueOfメソッド)

toString/valueOfメソッドは
それぞれのオブジェクトの内容を基本型の値に変換する

  • toStringメソッド
    • 文字列を返す
  • valueOfメソッド
    • 文字列以外の値が返されることを「期待して」使われる
var obj = new Object();
document.writeln(obj.toString());  //[object Object]
document.writeln(obj.valueOf());  //[object Object]

var dat = new Date();
document.writeln(dat.toString());  //Wed Feb 01 2012 19:25:40 GMT+0900
document.writeln(dat.valueOf());  //1328091940780

var ary = ['red', 'blue', 'yellow'];
document.writeln(ary.toString());  //red,blue,yellow
document.writeln(ary.valueOf());  //red,blue,yellow

var num = 10;
document.writeln(num.toString());  //10
document.writeln(num.valueOf());  //10

var reg = /\d{3}-\d{4}/;
document.writeln(reg.toString());  ///\d{3}-\d{4}/g
document.writeln(reg.valueOf());  ///\d{3}-\d{4}/g

デフォルトのObjectオブジェクトは
toString/valueOfメソッドともに意味のある情報を返さない
もし自前のオブジェクトを定義する場合、
toString/valueOfメソッドが意味ある情報を返すように
自分でtoString/valueOfメソッドを
定義(上書き)する必要がある
(メソッドの定義方法は後述)

主な組み込みオブジェクトは基本的に
toString/valueOfメソッドともに同じ結果を返す
唯一Dateオブジェクトに関しては以下のように違う値を返す

  • toStringメソッド
    • 日付の文字列表現
  • valueOfメソッド
    • タイムスタンプ値(数値表現)

まちがいなくそうなってるね、うん

JavaScript
オブジェクトを文字列に変換する必要がある文脈では
自動的にtoStringメソッドを呼び出すため
document.writelnメソッド、+演算子などでは
明示的にtoStringメソッドをを呼び出さなくても
暗黙的に文字列表現に変換される、すてきね

インスタンスのオブジェクト型を判定する(constructorプロパティ)

変数のデータ型を判定するtypeof演算子は既に勉強したが
typeof演算子はあくまで基本型を識別することしかできない

というのも、参照型の値については
たとえばObject、Array、Dateオブジェクト
いずれインスタンスであってもtypeof演算子
一様に"object"としか返さないため

参照型(オブジェクト型)の変数を識別するには
constructorプロパティを使用する必要がある

var data = [];
if (typeof data == 'object' && data.constructor == Array){
  document.writeln('変数dataはArrayオブジェクトのインスタンスです');
  //変数dataはArrayオブジェクトのインスタンスです
}

厳密にはconstructorプロパティは戻り値として
インスタンスの生成に使用された
コンストラクタ(Functionオブジェクト)を返す
オブジェクト名(文字列)を返しているわけではない
よって

data.constructor == 'Array'

のようにクォートで括って文字列扱いしてはいけない

またconstructorプロパティと同等の機能を持つ演算子として
instanceof演算子も存在する
さっきの例をinstanceof演算子を利用して
下記のように書き換えることができる

if (typeof data == 'object' && data instanceof Array){

なるほどですねー

匿名オブジェクトを作成する

Objectオブジェクトは直接インスタンス化することで
ユーザが自前のオブジェクトを
定義するのに利用することができる

var obj = new Object();

このようなオブジェクトを
「独自のオブジェクト名を持たない」という意味で
匿名オブジェクト無名オブジェクトと呼ぶ
匿名オブジェクトは、作成した直後は
オブジェクト共通のプロパティ/メソッドの他は
何らデータを持たない、いうなれば空の状態
この空の器に対してデータ(つまりプロパティ)を追加するには
以下のような記述をする

obj.name = '石原 さとみ';
obj.birth = new Date(1986, 12, 24);
obj.old = 25;

さとみなのは私の趣味です
このように定義したプロパティは通常のプロパティと同様
ドット演算子でアクセスすることができる

document.writeln(obj.name);

匿名オブジェクトを利用すれば
その場限りしか使わず再利用することのないような
ちょっとしたデータを受け渡しする場合にも
いちいち後述するような「クラス」を定義する必要がないので
コードをシンプルに記述することができる
(たとえば「関数で複数の値を返したい」などという場合は
配列や匿名オブジェクトを利用すると便利)
ふむふむはあくしますた

プロパティだけでなくメソッドを定義することもできるが
そのために必要な関数の知識は後述する、とのことです
はーい!早く関数やりたい
一時的なデータの受け渡し目的で
利用することが多い匿名オブジェクトで
メソッドを指定する機会はあまり多くないはず

また、匿名オブジェクトを生成するために
Objectオブジェクトだけでなく、Array/Dateのような
既存の組み込みオブジェクトを利用することもできる
しかし、匿名オブジェクトを生成するために
これら特定の目的を持ったオブジェクトをベースにする理由はない
かえって間違いやバグのもととなる可能性があるため
通常はオブジェクトとして中性的な機能のみを持つ
Objectオブジェクトを使うべき
了解しましたー!

さらにさらに
本文の記述はリテラル表現をつかって書くこともできる

var obj = {name:'', birth: new Date(1986, 12, 24), old:25};

「オブジェクトリテラルでオブジェクトを生成する」というのは
「匿名オブジェクトを定義する」ことと同じ意味になる

【JavaScript】 大丈夫だと思えないので正規表現ちょっとまとめ

JavaScriptで利用が可能な主な正規表現

基本

  • ABC
    • 「ABC」という文字列
  • [ABC]
    • A、B、Cのいずれか1文字
  • [^ABC]
    • A、B、C以外のいずれか1文字
  • [A-Z]
    • A~Zの間の1文字
  • A|B|C
    • A、B、Cのいずれか

量指定

  • X*
    • 0文字以上のX("fe*"は"f"、"fe"、"fee"などにマッチ)
  • X?
    • 0、または1文字のX("fe?"は"f"、"fe"にマッチ"fee"にはアンマッチ)
  • X+
    • 1文字以上のX("fe+"は"fe"、"fee"などにマッチ、"f"にはアンマッチ)
  • X{n}
    • Xとn回一致("[0-9]{3}"は3桁の数字)
  • X{n,}
    • Xとn回以上一致("[0-9]{3,}"は3桁以上の数字)
  • X{m,n}
    • Xとm~n回一致("[0-9]{3,5}"は3~5桁の数字)

位置指定

  • ^
    • 行の先頭に一致
  • $
    • 行の末尾に一致

文字セット

  • .
    • 任意の1文字に一致
  • \w
    • 大文字/小文字の英字、数字、アンダースコア(_)に一致("[A-Za-z0-9]"と同意)
  • \W
    • 文字以外に一致("[^\w]"と同意)
  • \d
    • 数字に一致("[0-9]"と同意)
  • \D
    • 数字に一致("[^0-9]"と同意)
  • \n
    • 改行(ラインフィード)に一致
  • \r
    • 復帰(キャリッジリターン)に一致
  • \t
    • タブ文字に一致
  • \s
    • 空白文字に一致("[\n\r\t\v\f]"と同意)
  • \S
    • 空白以外の文字に一致("[^\s]"と同意)
  • \~
    • 「~」で表される文字

RegExpオブジェクトを生成する方法

var 変数名 = new RegExp('正規表現', 'オプション');  //Regオブジェクトのコンストラクタを経由する
var 変数名 = / 正規表現/ オプション ;  //正規表現リテラルを利用する
  1. コンストラクタ構文の特徴
    • コンストラクタ構文では正規表現は文字列として指定している
    • JavaScriptの文字列リテラルにおいて「\」は意味を持った予約字であるため、本来の正規表現パターンである「\w」を認識させるためには「\」を「\\」としてエスケープする必要がある
  2. 正規表現リテラルの特徴

オプション

  • g
    • 文字列全体に対してマッチングするか(無指定の場合、1度マッチングした時点で処理を終了)
  • i
    • 大文字/小文字を区別するか
  • m
    • 複数行に対応するか(改行コードを行頭/行末と認識)

オプションを複数指定する場合には
"gi"のように並べて記述する

正規表現による検索

String.matchメソッド

  • 正規表現パターンにマッチした文字列を配列として返す

RegExp.execメソッド

  • グローバル検索(gオプション)が有効か否かに関わらず一度の実行で一つの結果しか返さない
  • マッチ文字列全体とサブマッチ文字列を配列として返す
  • 最後にマッチした文字位置をはじめ直近のマッチ情報を参照するためにいくつかのプロパティを公開している
  • lastIndex
    • 検索を開始する位置
  • leftContext
    • $`
    • 最後のマッチ文字列の前の文字列
  • rightContext
    • $'
    • 最後のマッチ文字列の後に続く文字列
  • lastMatch
    • $&
    • 最後にマッチした文字列(Operaは未対応)
  • lastParen
    • &+
    • 最後にマッチした()で囲まれたグループの文字列(Operaは未対応)
  • lastParen
    • パターンマッチした文字列を順に格納(最大9個)

マッチングの成否を検証する

  • testメソッド
    • 与えられた文字列を検索しマッチングの成否を真偽値(true/false)で返す
正規表現オブジェクト.test(検索対象の文字列)
  • String.searchメソッド
    • 指定された正規表現で最初にマッチした文字位置を返す
    • マッチ文字が存在しない場合に戻り値として-1を返す
検索対象の文字列.search(正規表現オブジェクト)

正規表現で文字列を置き換える

  • String.replaceメソッド
    • 正規表現でマッチした文字列を置換する
    • 置換後の文字列には「$1..$9」といった特殊変数を埋め込める
    • この特殊変数はサブマッチ文字列を保存するための変数
置き換え対象の文字列.replace(正規表現オブジェクト, 置換後の文字列)

正規表現で文字列を分割する

  • String.splitメソッド
    • 正規表現で文字列を分割する
    • 戻り値として分割した結果を配列として返す
分割対象の文字列.split(正規表現オブジェクト)



わーああー(・∀・;)