たまにJavaScriptでタグ実装する人のためのJavaScriptメモ


Javascript固有の技術的事情。
Javascriptからちょっと離れていたり他の言語使っていたりすると忘れてしまうポイントをまとめておく。
まあ自分のための備忘録でもある。

変数の型

  • プリミティブ型
    • 数値型
    • 文字列型
    • 論理型
    • null型
    • undefined型
  • オブジェクト型
    • 配列
    • 連想配列
    • 日付
    • :

値渡しと参照渡し

プリミティブ型は値渡し、オブジェクト型は参照渡し

配列

var arrX = ['test1', 'test2', 'hoge'];

// こういう使い方も便利
var arrX = arrX || [];
arrX.push('test1');
arrX.push('test2');

走査

配列の走査はArray.prototype.lengthで。
長さをその都度参照するのではなく、一旦変数に値として渡してから

var arrX = ['test1', 'test2', 'hoge'];
for (var i = 0, imax = arrX.length; i < imax; i=(i+1)|0) {
    alert(arrX[i]);
}

連想配列(オブジェクトのプロパティ)

var objX = {
    'key1': 'value1',
    'key2': 'value2',
};

// こういう記法もあり
var objX = objX || {};
objX['key1'] = 'value1';
objX.key2 = 'value2'; // オブジェクトのプロパティなので
// キーにハイフンなど付く場合
objX.['key-11'] = 'value11';
objX.key-12 = 'value12'; // ダメ

オブジェクトのプロパティという使い方もするため、
連想配列のキーにはハイフンやドットは使わないほうがいい。

走査

var objX = { 'start': '2013-1-1', end: '2014-1-1' };
for (var i in objX) {
    alert(objX[i]);
}

順序の概念がない

ライブラリ

var myLib = {};
myLib.methodA = function () {
    // 処理
    :
    return result;
};
myLib.methodB = function () {
    // 処理
    :
    return result;
};

クラス

// http://www.yunabe.jp/docs/javascript_class_in_google.html
// クラスとコンストラクタは関数を使って定義します
Person = function(name, age) {
    // this はインスタンスを表します。
    this.name = name;
    this.age = age;
};

// メソッドはコンストラクタの prototype プロパティに定義します
Person.prototype.getName = function() {
    // メンバ変数の定義・参照は this.<メンバ変数> を使います。
    // C++, Java と違い this は省略できません。
    return this.name;
};

Person.prototype.sayHello = function() {
    // メソッド内から他のメソッドを呼ぶ場合も this.<メソッド> を使います。
    // C++, Java と違い this は省略できません。
    console.log('Hello I\'m ' + this.getName());
};

falseの扱い

以下の場合にfalse判定される

if (false) {
    // do something: 実行されない
}

if (null) {
    // do something: 実行されない
}

if (undefined) {
    // do something: 実行されない
}

if ('') {
    // do something: 実行されない
}

if (0) {
    // do something: 実行されない
}

if (NaN) {
    // do something: 実行されない
}

false判定のうまい使い道

if (myObject)  //オブジェクトのインスタンスの有無
if (document.addEventListener) //メソッドの有無
if (items.length) //要素の有無

function(x){
    x = x || 'Hello'; // 変数の初期値設定
        :
}

var myApp = myApp||{}; // 安全な名前空間の登録

false0という値に意味がある場合はうまく動作しなくなるので、そこは気をつけて。
変数の厳密な初期値判定

function(x){
    if (typeof x === undefined) {
        x = 'Hello';
    }
        :
}

制御構造

if / else

if (x > 10) {
    alert('大');
} else if (x < 5) {
    alert('小');
} else {
    alert('中');
}

switch

switch (x) {
    case 1:
        alert('東京');
        break;
    case 2:
        alert('新橋');
        break;
    case 3:
        alert('品川');
        break;
}

while

先に条件判定する

var i = 0;
while (i < 10) {
    alert(i);
    i++;
}

do ... while

後で条件判定する

var i = 0;
do {
    alert(i);
    i++;
} while (i < 10);

for

for ( var i = 0; i < 10; i++ ) {
    alert(i);
}
  • continue→次のループの先頭に
  • break→抜ける

ループのうまい使い方

最速ループ

インクリメントは

i=(i+1)|0

と書くのが速い。

http://qiita.com/keroxp/items/67804391a8d65eb32cb8

for (var i = 0, imax = arrX.length; i < imax; i=(i+1)|0) {
    alert(arrX[i]);
}

文字列処理

文字列の一部取得

str.substr(start[, length])
str.substring(start[, end])

インデックスは文頭が0、文末がstr.length - 1

正規表現

  • マッチするかどうか → regexp.test('str')true / false
  • 正規表現置換 → str.replace(pattern, replacement)
  • マッチした部分を返す → str.match(pattern)(ただし/gで) → マッチした部分の配列

都度実行すると地味に遅くなるので繰り返し処理では避けたほうがいい処理

  • Array.prototype.length
  • document.getElementById('hoge')

→一旦別の変数に格納して

一見jQueryでやりたくなることでもネイティブのJavascriptでできる

非同期処理対策

Javascriptで最もハマるポイントである非同期処理

日付処理あれこれ

JavaScriptで日時を使ってランダムな文字列を作るワンライナー

セッションIDやユーザIDを生成する際などに使う。

  • 日時(マイクロ秒)→ユニーク
  • ランダムな数字列

の結合。前者と後者の結合はドット(.)を使う

[new Date().getTime().toString(), Math.floor(1E12*Math.random())].join('.')

DOM指定

  • IDのみで指定できる場合→document.getElementById()
  • XPathで指定→document.evaluate()
  • CSSPathで指定→document.querySelector()
  • 単純なものはXPathよりCSSPathのほうが速い

HTMLの一部書き換え(追記)

  • node.appendChild(newElement)
  • node.insertBefore(newElement,referenceElement)
  • element.innerHTML = '<div>something</div>'