TIL 72|オブジェクト1(オブジェクト定義、オブジェクト変更)

21730 ワード
TIL JavaScript WeCode 上のコード テキストリンク
オブジェクトの定義、Propertyとメソッドの定義、Propertyにアクセスする2つのメソッド、およびオブジェクト値の変更(削除、追加、更新)

オブジェクト

  • JSはオブジェクトベースのプログラミング言語であり、JavaScriptを構成するほとんどの「すべて」はオブジェクト
    • である.
  • オブジェクトタイプは、複数種類の値(元の値または他のオブジェクト)からなる1単位の複合材料構造
    • である.
  • 元の値は変更できませんが、オブジェクトタイプの値、すなわちオブジェクトの変更可能な値
    • です.
  • オブジェクトは0以上のpropertyからなる集合であり、propertyはキーと値からなる
  • Property:オブジェクトの状態を表す値
  • メソッド:Property(ステータスデータ)を参照および操作する操作

    • オブジェクトを作成するには、さまざまな方法があります。

  • オブジェクト文字から
    • を生成する.
  • オブジェクトジェネレータ関数
  • ジェネレータ関数
  • Object.createメソッド
  • クラス(ES 6)

    • propertyって何?

  • オブジェクトはpropertyの集合であり、propertyはキーと値から構成されます.
  • Propertyキー:空の文字列を含むすべての文字列またはシンボル値
  • パーセント値:JSで使用可能なすべての値
    • let person = {
  name: 'Lee',
  age: 20
}
  • 文字列または文字列で計算できる式を使用してpropertyキーを動的に生成することもできます.この場合、式をpropertyキーとして使用します([...])
    • で縛るべきです
    let obj = {};
let key = 'hello'

obj[key] = 'world' // == {[key]: 'world'}
console.log(obj); // {hello: "world"}
  • Propertyキーで文字列またはシンボル値以外の値を使用すると、暗黙的なタイプで文字列
    • に変換される.
    let foo = {
  0: 1,
  1: 2,
  2: 3
}

console.log(foo); // {0:1, 1:2, 2:3}
  • 既存のpropertyキーを繰り返し宣言すると、後に宣言されたpropertyが最初に宣言したpropertyが上書きされます.
    
let foo = {
  name: 'Lee',
  name: 'Kim'
}

console.log(foo); // {name: "Kim"}

    反復法とは?

  • JSのすべての使用可能な値は、property値
    • として使用できます.
  • propertyの値が関数である場合、一般関数を区別するためのメソッド(method)と呼ばれる.メソッドとは、オブジェクトにバンドルされた関数です.
    • let circle = {
  radius: 5,
  getDiameter: function() {     // <-- 메서드이다
    return 2 * this.radius;    //  <---- this는 circle을 가리킨다
   }
}

console.log(circle.getDiameter()); // 10

    オブジェクトの変更


    アクセス発プロパティ（2つの方法）

  • 句点表記法
    • let person = {
  name: 'Lee'
};

console.log(person.name); // Lee
  • 角括弧記号(括弧記号)
  • のかっこ表現を使用する場合、カッコPropertyアクセス演算子内で指定するPropertyキーは、引用符で囲まれた文字列(例1)
    • である必要があります.
  • アクセス演算子の内部に指定するpropertyキーを使用して変数を指定する場合は、引用符(例2)
    • を使用せずにカッコタグを使用する必要があります.
  • Propertyキーが識別子命名規則に従わない名前である場合、Propertyにはカッコ記号のみでアクセスできます.propertyキーが数字の場合、引用符(例3)
    • を省略することができる
    -예시1-
let person = {
  name: 'Lee'
};

console.log(person['name']); // Lee
console.log(person[name]); // 참조에러

-예시2-
let mySelf = {
  cats : ['냥순','냥돌'],
  myKey : 'Hello World'
}

let myKey = "cats"
console.log(mySelf) // {cats: ['냥순','냥돌'], myKey: 'Hello World'}

console.log(mySelf["cats"]) //  ['냥순','냥돌']

console.log(mySelf[myKey]) // ['냥순','냥돌']
>> == console.log(mySelf["cats"])  
>> !== console.log(mySelf.myKey)  // "Hello World"
            

-예시3-
let people = {
  'last-name': 'Lee',
  1: 10
}

console.log(people.last-name)  //NaN
console.log(people.'last-name') // 문법에러
console.log(people[last-name]) // 참조에러
console.log(people['last-name']) // "Lee"


console.log(people.1)  // 문법에러
console.log(people.'1')   // 문법에러
console.log(people[1]) // 10
console.log(people['1']) // 10
  • オブジェクトのオブジェクトへのアクセス:グローブボックスの値の出力
    番組を5つの記号で接続したり、カッコで接続したり、混ぜて接続したりすることができます.
    (四角カッコを使用する必要がある場合は、ルールを守ってください)
    • function accessObject() {
  let myStorage = {
    "car": {
      "inside": {
        "glove box": "maps",
        "passenger seat": "crumbs"
       },
      "outside": {
        "trunk": "jack"
      }
    }
  };
  

  let gloveBoxContents = myStorage.car.inside['glove box']
  
  return gloveBoxContents;
}

console.log(accessObject()) // "maps"
  • オブジェクトの配列へのアクセス:pineを出力
    配列内の要素にアクセスするときにカッコとインデックス番号を使用
    • function accessArray() {
  let myPlants = [
    {
      type: "flowers",
      list: [
        "rose",
        "tulip",
        "dandelion"
      ]
    },
    {
      type: "trees",
      list: [
        "fir",
        "pine",
        "birch"
      ]
    }
  ];
  

  let foundValue = myPlants[1].list[1]
  return foundValue;
}

console.log(accessArray()) // "pine"

    価格の更新

  • 既存のpropertyに値を割り当てると、property値
    • が更新される.
    let person = {
  name: 'Lee'
}

person.name = 'Kim'
console.log(person) // {name: 'Kim'}

    すべて動的に生成

  • が存在しないPropertyに値を割り当てると、動的にPropertyが作成され、Propertyが追加され、Property値
    • が割り当てられます.
    let people = {
  name: 'Lee'
}

people.age = 20
console.log(people) // {name: 'Lee', age: 20}

    すべてのプロパティを削除

  • delete演算子は、オブジェクトのpropertyを削除します.この場合、delete演算子の被演算子はproperty値にアクセスできる式でなければなりません.存在しない番組を削除すると、
    • は間違いなく無視される.
    let person = {
  name: 'Lee'
}

person.age = 20;
console.log(person) // {age: 20, name: 'Lee'}

delete person.age;
console.log(person) // {name: 'Lee'}

delete person.address;
console.log(person) // {name: 'Lee'}
    ORB_SLAM 2試行
    データ・ディクショナリの統合管理、動的ドロップダウン・ボックス