JavaScript 入門 基礎編 07 – オブジェクトを使ってみよう(object)

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

今回は Object の使い方についてです.

JavaScript の Core な部分になるのでここでしっかり使い方をマスターしましょう.

DEMO

今回制作するデモはこちら.

VIDEO

チュートリアルムービー

CODE

<pre>
<script>

// オブジェクト
var obj = { name:"hoge", width:256 };

// 要素へアクセス. 方法は2通り
document.write("-- Access element --\n");
document.write(obj.name + '\n');
document.write(obj["name"] + '\n');

// 全ての要素へアクセス
document.write("-- Access all element --\n");
for (var key in obj) {
    document.write(key + " : " + obj[key]);
    document.write('\n');
}

// 要素を追加
document.write("-- Add element --\n");
obj["height"] = 128;
for (var key in obj) {
    document.write(key + " : " + obj[key]);
    document.write('\n');
}

// 要素を削除
document.write("-- Delete element --\n");
delete obj["name"];
for (var key in obj) {
    document.write(key + " : " + obj[key]);
    document.write('\n');
}

</script>
</pre>

TIPS

オブジェクト型

JavaScript のコアとなる型です.

この後の step で出てくる Function や Array も実はこのオブジェクトを継承してたりします.

プロパティ

オブジェクトは連想配列(map)になっており, キーを指定してデータを入れたり取り出したりすることができます. また, キーとなる文字列をプロパティと呼ばれます.

プロパティへのアクセス方法は2通りあり, ドットもしくはブランケットでキーを指定するとアクセスできます. 今回の例では obj というオブジェクトを生成し, obj.name もしくは obj["name"] でアクセスしています.

for-in

for-in はオブジェクトのプロパティを順番に取り出して処理をします.

for (var key in obj) { ... }

Object の keys メソッドと forEach を使って も上記と同じ事ができます.

Object.keys(obj).forEach(function(key) { ... });

他にも for-each だとか便利なやつもあるのですが, この辺は追々使っていきます.

次回は, 配列についてです.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。