JavaScript 第 5 版 7 章まとめ

今回はボリューム多め。
この章で、今まであまり馴染みがなかった Object クラスのメソッドと、しっかり把握できていなかった配列のメソッドを抑えられたと思います。

7 章 オブジェクトと配列

7.1 オブジェクトの生成

• {}（オブジェクトリテラル）と new 演算子を使ってコンストラクタ関数を呼び出して生成する方法がある。
• {} と new Object() は同じ意味となる。
• {} の中に、プロパティ名と値のペアをカンマ区切りで記述する。
• プロパティ名には識別子または文字列が使用できる。

var obj1 = {};
var obj2 = new Array();  // Array オブジェクトを生成する
var obj3 = {
  "name": "hoge",
  'value': 1,
  obj: {x: 0, y: 0}
};

7.2 オブジェクトのプロパティ

• var の宣言は不要で、オブジェクトのプロパティに値を代入することでプロパティを生成できる。

7.2.1 オブジェクトプロパティの調査

• for/in ループでユーザ定義のプロパティを調べられる。

var obj = {
  name: "hoge",
  value: 1
};
var s = "";
for(var o in obj) {
  s += o + " : " + obj[o] + "¥n";
}
alert(s);

7.2.2 プロパティの存在確認

• in 演算子を使ってプロパティが存在するかどうかを調べられる。

var o = {x: 0};
if("x" in o) o.x = 1;
alert(o.x);  // 1

• in 演算子を使わなくても実現できる。ただし o.x = undefined （プロパティ自体は存在していて値が未定義値）の場合は正しい結果にならないので注意する。

var o = {x: 0};
if(o.x !== undefined) o.x = 1;
alert(o.x);

• undefined でも null でもない場合は以下の記述で実現できる。

var o = {x: 0};
if(o.x) alert("hoge");

7.2.3 プロパティの削除

• delete 演算子で削除できる。
• undefined が設定されるのではなくプロパティが削除されるので、for/in ループでも調べられなくなる。

var o = {x: 0, y: 0};
delete o.x;
var s = "";
for(var i in o) {
  s += i + "¥n";
}
alert(s);  // y¥n

7.3 連想配列としてのオブジェクト

• オブジェクトのプロパティにアクセスするには、ドット演算子の他に “[]“（配列演算子）を使ってアクセスできる（連想配列とも呼ばれる）。
• 配列演算子を使用した場合、実行中に生成することができる。

var addr = "";
for(var i = 0; i < 4; i++) {
  addr += customer["address" + i] + "¥n";  // customer オブジェクトの address0 〜 3 プロパティの値を読み出せる
}

7.4 Object のプロパティとメソッド

• 全てのオブジェクト（Array() や Date() も含めて）は Object クラスのプロパティやメソッドを継承する。

7.4.1 constructor プロパティ

• オブジェクトの初期化で使用されたコンストラクタ関数を参照する。
• instanceof 演算子で constructor プロパティの値を調べられる。

※Safari（というか Webkit）ではバグがあるらしく、false になりました。

var d = new Date();
alert(d.constructor == Date);  // true
alert(d instanceof Date);  // true

7.4.2 toString() メソッド

• 呼び出したオブジェクトの値を表す文字列を返す。

7.4.3 toLocaleString() メソッド

• オブジェクトを表すローカライズされた文字列を返す。

7.4.4 valueOf() メソッド

• オブジェクトを文字列以外の基本型（数値型が多い）に変換する。

7.4.5 hasOwnProperty() メソッド

• 継承したものではないプロパティを持つ場合に true を返す。

7.4.6 propertyIsEnumerable() メソッド

• 継承したものではないプロパティを持ち、かつそのプロパティが for/in ループで調べられる場合に true を返す。
• hasOwnProperty() メソッドと同じ値を返す。

7.5 配列

• 配列はオブジェクトに length プロパティ等の+αの機能が追加されているだけのものである。
• []（配列リテラル）または Array() コンストラクタを使って生成する。

var arr1 = [];
var arr2 = [1, 2, 3];
var arr3 = [,];  // 1個の空要素を持つ配列
var arr4 = [1, "hoge", true {x: 2, y: 3}, [4, 5]];
var arr5 = new Array();
var arr6 = new Array(1, 2, "hoge");
var arr7 = new Array(10);  // 10個の空要素を持つ配列

7.6 配列の要素の読み書き

• 配列はオブジェクトの一種なので、配列に対して名前付きのプロパティを定義できる。
• 配列のインデックスには 0 〜 2^32 -2 までしか使えない。
• それ以上大きな値や負数、浮動小数点等をインデックスとして使うと、その値を文字列に変換し、変換された文字列をプロパティ名として使用する。

var a = [1, 2, 3];
alert(a.length);  // 3
a[-1] = 0;
alert(a.length);  // 3
alert('-1'];  // 0

7.6.1 配列の要素の追加

• 配列のインデックスは、連続した番号でなくてもよい。
• JavaScript は配列の中で実際に格納される要素だけにメモリを割り当てる。

var a = [];
a[0] = 0;
a[99] = 99;
alert(a[1]);  // undefined
alert(a.length);  // 100

• 配列の要素をオブジェクトに追加することもできる。

var c = new Circle(1, 2, 3);
c[0] = "hogehoge";  // 0 という名前のプロパティを追加

7.6.2 配列の要素の削除

• delete 演算子を使って配列の要素に undefined を指定できるが、要素自体は削除されない。
• 要素を削除するには shift(), pop(), splice() 関数を使う。

7.6.3 配列の長さ

• [] や Array() で生成された配列は length プロパティを持っている。
• length プロパティには配列に格納されている要素の個数、厳密には配列のインデックスの最大値より 1 つ大きい値を持っている。

var a = new Array(1, 2, 3);  // a.length は 3
a [10] = -1;  // a.length は 11

7.6.5 配列の長さの変更

• length プロパティは読み書きが可能である。
• 現在値より小さな値を length プロパティに設定すると、配列の長さが切り詰められ、この長さに収まらない要素は廃棄される。
• 現在値より大きな値を length プロパティに設定すると、指定された長さになるまで配列の最後に未定義値が追加される。

var a = new Array(1, 2, 3, 4, 5);
a.length = 3;
alert(a.join());  // 1,2,3
a.length = 5;
alert(a.join());  // 1,2,3,,

7.6.6 多次元配列

• 本当の意味での多次元配列はサポートしていないが、配列の配列という方法で実現できる。

var a = new Array(10);
for(var i = 0; i < a.length; i++) {
  a[i] = new Array(10);
}
for(var r = 0; r < a.length; r++) {
  for(var c = 0; c < a[r].length; c++) {
    a[r][c] = r * c;
  }
}

7.7.1 join() メソッド

• 配列の全ての要素を文字列に変換し連結する。

var a = [1, 2, 3];
alert(a.join());  // 1,2,3

7.7.2 reverse() メソッド

• 配列の要素の順番を逆にする。
• 新しい配列は生成されず、既存の配列の中で並び替える。

var a = [1, 2, 3];
a.reverse();
alert(a.join());  // 3,2,1

7.7.3 sort() メソッド

• 配列の要素をソートする。
• 新しい配列は生成されず、既存の配列の中でソートする。
• 引数を指定しないとアルファベット順にソートされ、それ以外の順序でソートしたい場合は引数に比較関数を指定する。

var a = [4444, 22, 3, 111];
a.sort().join();  // 111,22,3,4444
a.sort(function(a, b) {
	return a - b;
}).join();  // 3,22,111,4444

7.7.4 concat() メソッド

• 配列に要素を追加して、新たな配列を生成する。
• 引数が配列自身である場合、要素を個々に取り出して配列に追加される。ただし配列の配列は展開されない。

var a = [1, 2, 3];
var b = a.concat(4, 5);  // [1, 2, 3, 4, 5]
var c = a.concat([4, 5, 6]);  // [1, 2, 3, 4, 5, 6]
var d = a.concat(4, [5, [6, 7]]);  // [1, 2, 3, 4, 5, [6, 7]]

7.7.5 slice() メソッド

• 指定された配列のサブ配列（スライス）を返す。
• 1 番目の引数に配列の先頭を、2 番目の引数に配列の末尾を指定する。
• スライス配列には 1 番目の引数で指定された要素から、2 番目の引数で指定された要素の直前の要素までが格納される。
• 第 2 引数を指定しなかった場合、要素の最後までがスライス要素に格納される。
• 負数を引数に指定した場合は、配列要素の最後からの相対位置になる。

var a = [1, 2, 3, 4, 5];
var b = a.slice(0, 3);  // [1, 2, 3]
var c = a.slice(3);  // [4, 5]
var d = a.slice(1, -1);  // [2, 3, 4]

7.7.6 splice() メソッド

• 配列に要素を挿入したり、配列から要素を削除する。
• slice() や concat() と違い、新たな配列は生成しない。
• 第 1 引数には挿入や削除を開始する位置を指定する。
• 第 2 引数には配列から削除する要素の個数を指定する。
• それより後ろの引数を指定した場合、1 番目の引数で指定された位置に挿入する要素になる。ただし、配列は展開されない。

var a = [1, 2, 3, 4, 5];
a.splice(1, 2);  // [2, 3] が返される。a は [1, 4, 5] になる。
a.splice(1);  // [4, 5] が返される。a は [1] になる。
var a = [1, 2, 3, 4, 5];
a.splice(2, 1, 'a', 'b');  // [3] が返される。a は [1, 2, "a", "b", 4, 5] になる。
a.splice(2, 2, [1, 2], 3);  // ["a", "b"] が返される。a は [1, 2, [1, 2], 3, 4, 5] になる。

7.7.7 push() メソッドと pop() メソッド

• push() メソッドは、配列の最後に要素を追加し、追加後の配列の長さを返す。
• pop() メソッドは、配列の最後の要素を削除し、配列の長さを減らし、削除した要素の値を返す。
• どちらのメソッドも配列そのものを操作し、新たな配列は生成しない。

7.7.8 unshift() メソッドと shift() メソッド

• unshift() メソッドは、配列に先頭に要素を追加し、既存の配列要素のインデックスを大きい番号にシフトさせてから、追加後の配列の長さを返す。
• shift() メソッドは、配列の先頭の要素を削除し、残りの配列要素のインデックスを小さい番号にシフトして、削除した要素の値を返す。

関連リンク

• Safari の JavaScript の不備: Days on the Moon

関連する記事

• 連続するページの JSONP を取得して最後に Callback 関数を呼ぶライブラリ
• 短縮 URL を展開する Greasemonkey
• 相手に Follow されてるかどうかを表示するグリモン
• マク語に変換する bookmarklet
• Twitter の投稿日時のフォーマットを変更するグリモン