Help us understand the problem. What is going on with this article?

[JavaScript]オブジェクトとプロパティを扱う

More than 3 years have passed since last update.

オブジェクトと配列でツリー構造や多次元配列を実現

Object(), Array(), Function() オブジェクトはほかのオブジェクトを格納することもできる。以下のようにオブジェクトツリーを生成できる。

var object1 = {
  object1_1: {
    object1_1_1: {foo: 'bar'},
    object1_1_2: {}
  },
  object1_2: {
    object1_2_1: {},
    object1_2_2: {}
  }
}

console.log(object1.object1_1.object1_1_1.foo);  //出力: 'bar'


// Array()オブジェクトで、オブジェクトツリーを表現する場合
var myArray = [[[]]];

//Function()を使ったカプセル化の例。中身は空である。
var myFunction = function() {

    var myFunction = function() {

        var myFunction = function() {

        };
    };
};

ブラケット記法でオブジェクトのプロパティにアクセスする

プロパティを設定したりアクセスする場合、以下のようにドット記法が用いられることが多かった。

var cody = new Object();

cody.living = true;
cody.age = 33;
cody.gender = 'male';

console.log(cody.age); //出力: 33

これをブラケット記法で記述する場合は以下のように記述。

var cody = new Object();

cody['living'] = true;
cody['age'] = 33;
cody['gender'] = 'male';

console.log(cody['age']); //出力: 33

ブラケット記法の強み

変数を使ってオブジェクトのプロパティ名を指定することができる

var foobarObject = {property1:'a',property2:'b',property3:'c'};

for(var i = 1; i <= 3; i++){
console.log(foobarObject['property' + String(i)]);
}//出力:a b c

delete 演算子でプロパティを消去

以下のように delete 演算子を使うとプロパティを消去できる。

var foo = {bar: 'bar'};
delete foo.bar;
console.log(foo.bar); //出力:undefined

リファレンス

開眼!JavaScript(第2章) (https://www.oreilly.co.jp/books/9784873116211/)

Knbass
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away