(JS)オブジェクト(Object)の定義と使い方


対象とは?


名前(key、name)、値(value)として構成されたオブジェクトのセット.
JavaScriptでは、元のタイプ(primitive type)以外のすべてのコンテンツをオブジェクト(Object)として定義します.定義はそうであるが,値は決定されたオブジェクトと見なされるため,オブジェクトとしての特徴も持つ.

オブジェクトの構成参照


JavaScriptでは、オブジェクトのプロセスを2つの方法で参照できます.
  • object.property (Dot Notation)
  • object['property'] (Bracket Notation)
  • Dot Notation

    let obj = {
      cat: "meow",
      dog: "woof"
    };
    
    console.log(obj.cat);
    console.log(obj.dog);
    上記のように、objectName.PropertyNameとして使用するか、オブジェクトのkey値を正確に知るときに使用できます.
  • の割合はアルファベットのみです.
  • 変数は使用できません.
  • 特殊文字が使用可能です.
  • Bracket Notation

    let obj = {
      cat: "meow",
      dog: "woof"
    };
    
    console.log(obj[cat]);
    console.log(obj[dog]);
    DotNotationは使用法と似ていますが、最も重要な違いはBracketに変数を含めることができることです.
    上のコードは実際にはBracketにcatが含まれているように見えますが、catという変数を使用することで、実際のコードにはobj["cat"]の内容が含まれます.
    この方式は主に関数のパラメータでオブジェクトのpropertyを参照する際に使用される方法である.
    変数
  • はproperty文字列または文字列
  • を参照する.
  • 変数orスペースを使用できます.
  • 特殊文字は使用できません.
  • const obj = {
      cat: "meow",
      dog: "woof"
    };
    
    function animal(obj, property) {
      return obj[property]
    }
    
    let catSound = animal(obj, "cat");
    let dogSound = animal(obj, "dog");
    
    console.log(catSound); //"meow"
    sonsole.log(dogSound); //"woof"

    オブジェクトのメソッド参照


    オブジェクトのメソッドを参照するときにメソッドの後ろにカッコ()を付けない場合は、メソッドではなくProperty自体を参照します.
    const obj = {
      cat: "meow",
      dog: "woof",
      animal : function() {
        return `현재 동물은 ${this.cat}${this.dog}가 있습니다.`;
    };
    
      obj.animal() // 현재 동물은 cat과 dog가 있습니다.
      obj.animal //function() { return `현재 동물은 ${this.cat}과 ${this.dog}가 있습니다.`; }

    オブジェクトの操作


    追加


    オブジェクトのプロパティを追加する場合は、既存のプロパティを参照するときに使用する方法で、次の追加するプロパティを使用できます.
    const obj = {
      cat: "meow",
      dog: "woof,
    };
    
    obj.cow = "moo",
    obj["pig"] = "oink";
    
    console.log(obj.cat) // meow
    console.log(obj.pig) // oink

    削除


    削除時にdeleteキーワードを使用できます.
    const obj = {
      dat: "meow",
      dog: "woof",
    };
    
    delete obj.cat;
    console.log(obj.cat) // undefined

    変更


    既存のオブジェクトのキー値に新しいclaue値を宣言すると、変更できます.
    const obj = {
      cat: "meow",
      dog: "woof",
    };
    obj.cat = "mew"
    
    console.log(obj.cat) //mew

    検索


    特定のプロパティクエリ(in演算子)


    in演算子を使用して、オブジェクトのプロパティが存在するかどうかを確認できます.
    結果をBoolean値で返します.
    const obj = {
      cat:"moew",
      dog:"woof"
    };
    console.log("cat" in obj); //true
    console.log("cow" in obj); //false

    すべてのプロパティを検索(for...in)


    for...in反復文でオブジェクトのすべてのkey、valueにアクセスできます.
    const obj = {
      cat: "moew",
      dog: "woof"
    };
    
    for(let key in obj) {
      console.log(`key는 ${key}, value는 ${obj[key]}입니다.`);
    }
    // key는 cat, value는 meow입니다.
    // key는 dog, value는 woof입니다.

    新Object()とコンストラクション関数


    オブジェクトを生成する方法には、上記の方法ではなくnewキーワードとジェネレータを使用する方法があります.

    new Object()


    newキーを使用してObjectジェネレータ関数を呼び出し、空のオブジェクトを取得します.
    let animal = new Object();
    
    animal.cat = "meow";
    animal.dog = "woof;
    animal.cow = "moo";
    
    console.log(animal.cat) // "meow"
    console.log(animal.dog) // "woof"
    console.log(animal.cow) // "moo"

    コンストラクタ


    コンストラクション関数を使用すると、Javaのクラスのように空のオブジェクトボックスを作成できます.既存の関数にnew演算子を追加して呼び出すと、関数は関数を構築する役割を果たします.
    通常、最初の文字を大文字で区別して、通常の関数と構造関数を区別します.
    function Animal(name, sound) {
      //this = {}; //빈 객체로 암시적으로 생성
      //새로운 프로퍼티를this에 추가 
      this.name = name;
      this.sound = sound;
      
      //return this;
    }
    
    let cat = new Animal("cat", "meow");
    let dog = new Animal("dog", "woof");
    
    console.log(`이 동물은 ${cat.name}이고 ${cat.sound}라는 소리를 냅니다.`);
    console.log(`이 동물은 ${dog.name}이고 ${dog.sound}라는 소리를 냅니다.`);
    //이 동물은 cat이고 meow라는 소리를 냅니다.
    //이 동물은 dog이고 woof라는 소리를 냅니다.
    テキストとnewObject()を使用して作成するのとは異なり、同じプロパティを持つ複数のオブジェクトを作成できます.