オブジェクト範囲の

20718 ワード
JavaScript テキストリンク

対象とは？

  • 複合材料構造
    • は、様々なタイプの値(元の値または他のオブジェクト)を1つのユニットに構成する.
  • 可変値
  • Property:オブジェクトの状態を表す値(データ)
  • メソッド:Propertyを参照/操作する動作
    • var person = {
  // 프로퍼티 (키: 값)
  name: 'Lee',
  age: 20
};

    オブジェクトの作成(オブジェクト文字)

  • 中括弧{}には0個以上のpropertyが定義されている
    var person = {
  name: 'Lee',
  sayHello: function() {
    console.log(`Hello! My name is ${this.name}.`);
  }
};

console.log(typeof person); // object
console.log(person); // {name: 'Lee', sayHello: f}

    保証する

  • キー(キー):空の文字列を含むすべての文字列またはシンボル値
    非=>値をキーとして使用すると、暗黙的に文字列
    • に変換されます.
  • 値(値):JavaScriptで使用可能なすべての値
    • 名前が識別子命名規則に合致する場合、propertyキーは引用符を省略できます.そうでない場合は引用符を使用する必要があります.
    var person = {
  // 식별자 네이밍 규칙 준수 O
  firstName: 'Na-na', 
  // 식별자 네이밍 규칙 준수 X
  last-name: 'Lee' // SyntaxError: Unexpected token -
  // 따옴표로 묶어줘야 한다.
  'last-name': 'Lee'
};
    文字列式を使用してpropertyキーを動的に生成できます.
    この場合、propertyキーとして使用される式は、四角カッコ[]に囲まれる必要があります.
    var obj = {};
var key = 'hello';

obj[key] ='world';

console.log(obj); // {hello: "world"}
    既存のpropertyキーを繰り返し宣言すると、最初に宣言したpropertyが上書きされます.
    エラーは発生しません.
    var foo = {
  name: 'Lee',
  name: 'Kim'
};

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

    方法


    JavaScriptの関数は1レベルのオブジェクトであるため、値としてもpropertyの値としても使用できます.
    property値が関数である場合、通常の関数を区別するためのメソッドと呼ばれます.
    すなわち,メソッドとはオブジェクトにバンドルされた関数を指す.
    var circle = {
  radius: 5,
  
  // 메소드
  getDiameter: function() {
    return 2 * this.radius; // this => circle을 가리킨다.
  }
};

console.log(circle.getDiameter()); // 10
    メソッドの内部で使用されるthisは、オブジェクト自体を指します.

    特許アクセス

  • Propertyキーは識別子命名規則O=>句点記号を遵守し、角括弧記号
    • を有効にする.
  • Propertyキーは識別子命名規則X=>角括弧記号
    • のみをサポートする.
    var person = {
  name: 'Lee'
};

// 마침표 표기법 사용
console.log(person.name); // Lee

// 대괄호 표기법 사용
console.log(person['name']); // Lee
console.log(person[name]); // ReferenceError: name is not defined
    角カッコを使用する場合は、指定したpropertyキーは引用符で囲まれた文字列でなければなりません.
    そうでない場合、javascriptエンジンは識別子として解釈され、参照エラーが発生する可能性があります.
    アクセスオブジェクトに存在しないPropertyの場合はundefinedを返します.
    var person = {
  name: 'Lee'
};

console.log(person.age); // undefined

    プロパティ値の更新

  • は既存の製品割当値
    • である.
    var person = {
  name: 'Lee'
};

person.name = 'Kim'; // 갱신

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

    Property動的作成

  • は存在しない項目割当値
    • である.
    var person = {
  name: 'Lee'
};

person.age = 20;

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

    プロパティの削除

  • delete演算子
    • を使用
    var person = {
  name: 'Lee'
};

delete person.name; // 삭제

console.log(person); // {}

    オブジェクト文字の拡張(ES 6)


    Propertyサムネイル表示


    変数を
  • のパーセンテージ値として使用する=>変数名がパーセンテージキーと同じである場合、パーセンテージキー
    • を省略することができる.
  • Propertyキーは変数名
    • として自動的に生成される.
    var x = 1, y = 2;

var obj = {
  x: x,
  y: y
};

// 프로퍼티 축약 표현
var obj = {
  x,
  y
};

    計算された構成名


    文字列式を使用してpropertyキーを動的に生成することもできます.
    この場合、propertyキーとして使用される式は、括弧[]に囲まれる必要があります.
  • ES 5では、オブジェクト文字の外部に作成する必要があります.
    • var prefix = 'prop';
var i = 0;

var obj = {};

obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}
  • ES 6では、オブジェクト文字の内部に作成することもできます.
    • var prefix = 'prop';
var i = 0;

var obj = {
	[`${prefix}-${++i}`] = i;
	[`${prefix}-${++i}`] = i;
	[`${prefix}-${++i}`] = i;
};

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

    メソッド簡略表示

  • メソッドを定義場合はfunctionキーワード
    • を省略することができる.
    // ES5
var obj = {
  name: 'Lee',
  sayHi: function() {
    console.log('hi! ' + this.name);
  }
};

// 메소드 축약 표현
var obj = {
  name: 'Lee',
  sayHi() {
    console.log('hi! ' + this.name);
  }
};
    メソッドサムネイル定義のメソッドは、Propertyに割り当てられた関数とは異なります.
    あなたのビルドをGulp
    オブジェクトに慣れる