28
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Javascriptのオブジェクト入門

Posted at

オブジェクトとは

Javascriptでは、変数型として、数値、文字列、真偽値、null、undefinedがあるが、これ以外の値は全てオブジェクトである。
Javascriptでは、配列も関数も、正規表現も全てオブジェクトである。

オブジェクトは、複数のプロパティを含むコンテナで、プロパティは名前と値で構成される。
プロパティ名は、任意の文字列が利用可能で 空文字も利用可能である。
プロパティの値は、undefinedを除く全てのJavascriptの値をセット出来る。

オブジェクトリテラル

オブジェクトリテラルは、2つの中括弧で囲まれ、その中に名前と値のペアが列挙されたもので、式が記述可能な場所であればどこでも記述出来る。
プロパティ名の前後に付けるクォート("")は、文字列が予約でなくでJavascriptの名前に則っていれば省略することが可能になる。
例えば、「first-name」の場合はクォートが必要だが「first_name」だったら省略可能。

var stooge = {
    "first-name": "Hoge",  // クォートが必要
    "": "empty",           // プロパティ名は空文字も指定可能
    first_name: "Fuga"     // Javascriptの名前に則ってるのでクォート省略可能
};

console.log(stooge["first-name"]);  // Hoge
console.log(stooge[""]);            // empty
console.log(stooge["first_name"]);  // Fuga
console.log(stooge.first_name);     // Fuga

console.log(hoge["first-name"]); // hoge

値の取得

基本的に文字列を[]で囲んで指定することで、オブジェクトから値を取り出すことが可能。
もし文字列が文字列リテラルで、予約語でないJavascriptの名前のルールに則っているなら、[]の代わりに.を利用することも出来る。
.を使った方がシンプルですっきりするので好む人がおおい。

  • 存在しないメンバを取得した場合は、undefinedが返される
  • ||演算子を使って、デフォルト値を設定することが出来る
  • undefinedに対して、さらにそのプロパティを取得しようとするとTypeError例外が投げられる。&&演算子を利用するとこの事態を防げる。
var stooge = {
    "first-name": "Hoge",  // クォートが必要
    "": "empty",           // プロパティ名は空文字も指定可能
    first_name: "Fuga"     // Javascriptの名前に則ってるのでクォート省略可能
};

// 存在しないメンバを指定
console.log(stooge["middle-name"]); // undefined
console.log(stooge.firmily_name);   // undefined

// ||演算子でデフォルト指定
var middle = stooge["middle-name"] || "middle";
var firmily_name = stooge.firmily_name || "firmily";
                               
console.log(middle);         // middle
console.log(firmily_name);   // firmily

// undefinedに対してプロパティを取得しようとした時の例外を&&で防ぐ
console.log(stooge.hoge);         // undefined
console.log(stooge.hoge.fuga);    // TypeError例外が投げられる
console.log(stooge.hoge && stooge.hoge.fuga);         // undefined

参照

オブジェクトは参照渡しが行われて、コピーされることはない。

 var x = {};
 x.nickname = 'hoge';
 var y = x;  // nicknameというプロパティを持ったxを参照することになる
 
 console.log(x.nickname); // hoge
 console.log(y.nickname); // hoge
 
 // 参照元のxの値を更新したので、yの値も変わる
 x.nickname = 'fuga';
 
 console.log(x.nickname); // fuga
 console.log(y.nickname); // fuga

プロパティの列挙

for in文を利用すると、オブジェクト内に存在する全てのプロパティを取得することが出来る。

var hoge = {
    first_name: "Hoge",
    last_name: "Fuga",
};
var name;
for (name in hoge) {
    console.log(name); // Hoge, Fuga
}

ただし、このfor in文の場合、プロパティの順序は保証されないので、保証したい場合はプロパティの順序を記述した配列を用意して、for文で回すしかない。

var hoge = {
    first_name: "Hoge",
    last_name: "Fuga",
};

var i;
var properties = [
    'first_name',
    'last_name'
];

for (i = 0; i < properties.length; i++) {
    console.log(hoge[properties[i]]);
}
28
34
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?