JavaScriptチートシート

Web

HTML5の時代の必須知識、JavaScriptを記述、読解するためのポイントを手短に書きます。以下、CやC++,Javaを使ってきた方むけのカンニングペーパーです。


まずなんでもオブジェクトということを理解しましょう。


var num1 = 1;
var num2 = 2;
var num3 = num1+num2; //数字は足し算

var str1 = "string1";
var str2 = "string2";
var str3 = str1 + string2; //文字列連結

//オブジェクトの生成1
var obj = new Object();

//オブジェクトの生成2
var obj = {};

JavaScriptでは配列もオブジェクトです。配列リテラルでかけるのも特徴的ですかね。

  • 配列オブジェクトの操作
//配列リテラルで初期値ありで配列を生成
var foo = [  1 , 2 , 3 ];
foo[0] = 1;

//配列オブジェクトをコンストラクタで生成、あとで値を埋める
var bar = new Array(3);　// new Array();のみでサイズ 0 の配列
bar[0] = 1;

//配列の最後尾に追加する
bar.push( 4 );

オブジェクトは連想配列でメンバーを持ちます。配列だけでなく連想配列の形でもかけます。これもリテラルで記述できるのも特徴的ですね。

//リテラルで生成する(JSON)
var foo = {  x: 1 , y: 2 , z: 3 }
foo[x] = 1;

//foo[x]をプロパティとして扱うこともできます。
var foo={}
foo.x = 1;
  • 関数定義
//関数定義
function foo( param ){
  var ret = "Hello "+param +" !";
  return ret;
}

//即時関数(その場で処理される関数を無名のまま定義し、実行します。名前がかぶらなくなるので安全にプログラムができます。JavaScriptではグローバルな名前を使用しないように気をつけます）
onclick="function(){ xxxxxx }();"

//コンストラクタ
function Foo( param ){
  //メンバー
  this.param = param;
　//メソッド
　this.foo = function(){ ..... };
}

//オブジェクト生成
var obj = new Foo( 1 );
//メンバーへアクセス
console.log( obj.param ); //1を表示
//関数へアクセス
obj.foo( );

簡単な変数や関数名をつけてしまうと重複する可能性があるので、できるだけ名前空間を人為的に作ります。即時関数の返り値を取得するオブジェクトを作ります。この関数スコープ中でだけ有効なものはプライベートとなり、配列内にもつものはグローバルオブジェクト経由で取り出せます。

var global = (function() { 
  var private = "private"; // 
　var private_func = function(){
      ....
  }
   ...
  var ret = {
    public: 1,
     ...
  };
  ret.method = function(){
     ...
     private_func(); //プライベートはこの即時関数内だけで利用可能
  };
  return ret; // retにはメンバーとメソッドがある
})();

//globalとつくので、名前バッティングしにくい
global.public = 1;
global.method();

列挙は下記のようにかけます。

  • 列挙
  //列挙
　var FooEnum = { X: 1 , Y: 2 , Z: 3 };

　var bar = FooEnum.X;

  switch( bar ){
    case FooEnum.X:
      ....
    case FooEnum.Y;
      ....


文法になれない間は読みにくいソースもあるかもしれません。

  • 読みにくい例
  //長さ２の配列のオブジェクトと、オブジェクトをその場でつくってfoo関数の引数としてfooを呼ぶ
　foo([
       { X: 1 , Y: 2 , Z: 3 },
       { X: 2 , Y: 3 , Z: 4 },
  ],
       { X: 3 }
  );

　//手順を一段階ずつにすると、
　var array = new Array(2);
  array[0] = new Object();
  array[0].X = 1;
  array[0].Y = 2;
  array[0].Z = 3;

  array[1] = new Object();
  array[1].X = 2;
  array[1].Y = 3;
  array[1].Z = 4;

  var obj = new Object();
  obj.X = 3;

  foo( array , obj );