【読書】JavaScript逆引きレシピ

引数のデフォルト値設定

function getXxx(x) {
    if (x === undefined) {
        x = 1;
    }
}

配列・オブジェクトの定義・表示

配列

for inでは処理順が保障されないなどの問題があるため、forを使う。

var arr = ['a','b','c'];

arr.push('d');    // 末尾に追加
arr.unshift('z'); // 先頭に追加
arr.pop();        // 末尾を取得
arr.shift();      // 先頭を取得
arr.toString();

// 表示
for (var i = 0, len = arr.length; i < len; i++) {
    arr[i];
}

オブジェクト

var obj = {
    name:'あいうえお',
    type:'ひらがな'
    };

// 表示
for (var i in obj) {
    i + '：' + obj[i];
}

// 表示
$.each(obj, function(i, value) {
    i + '：' + value;
});

// 順に加工
$.map(obj, function(value, index) {
    return 処理内容;
});

// 絞込み。trueになったものだけを残す。
$.grep(obj, function(value, index) {
    return 処理内容;
}, false); // trueで結果の反転

即時関数

参考:即時関数のメリットと主な用途

(function() {
   // 処理
}).call(this);

クラス

var Animal = function(name) {
   this.name = name;

   var _name = name;
   this.getName = function() {
       return _name;
   };
};

Animal.prototype.toString = function() {
   return 'Animal: ' + this.name;
};

var dog = new Animal('dog');
dog.toString(); // Animal: dog

文字列の検索

一致した場合は、開始文字位置を。一致しない場合は-1を返す。

var str = "aiueo";

str.indexOf('a', 検索開始位置：先頭から);
str.lastIndexOf('a', 検索開始位置：後方から);

str.indexOf('a');    // 0
str.indexOf('a', 2); // -1
str.indexOf('iu');   // 1
str.indexOf('z');    // -1

str.lastIndexOf('a');    // 0
str.lastIndexOf('a', 2); // 0
str.lastIndexOf('iu');   // 1
str.lastIndexOf('z');    // -1

正規表現

var p = new RegExp('[0-9][a-z]', 'gim');
var p = /[0-9][a-z]/gim;

// 修飾子
g // 文字列全体を検索。なければ、最初に一致したところで検索を終了
i // 大文字小文字を区別しない。
m // 改行コードを行頭/行末と区別するか

正規表現.test(文字列); // true, false
文字列.search(正規表現); // 開始文字位置, -1
文字列.match(正規表現); // マッチした文字列,

文字列.replace(正規表現, 置換後の文字列);
文字列.split(正規表現);

設定時間後に処理実行

var test = setTimeout(function() {
    // 処理
}, 10000);

clearTimeout(test);

一定時間おきに処理実行

var test = setInterval(function() {
    // 処理
}, 10000);

clearInterval(test);

jQueryの読み込み

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// CDNエラー対策
<script>window.jQuery || document.write('<script src="jquery-2.1.1.js"><\/script>');</script>

Ajax

// 共通処理
$(document)
.ajaxStart(function(){})
.ajaxSend(function(){})
.ajaxSuccess(function(){})
.ajaxError(function(){})
.ajaxComplete(function(){})
.ajaxStop(function(){});

$(document)
.ajax('url' ,function(){
   type:     'POST',
   datatype: 'text',
   timeout:  1000,
   data:     {}
})
.done(function(){})
.fail(function(){})
.always(function(){});