[モダンJavaScript Deep Diff]Studio-10章オブジェクトテキスト(2)-Property、メソッド、アクセス、値更新、動的作成、削除、拡張

28256 ワード
js deepdive テキストリンク

10.オブジェクト文字(2)


オブジェクトはPropertyの集合で、Propertyはキーと値で構成されます.

10.3%


設定キー:空の文字列を含むすべての文字列またはシンボル値
設定値:JavaScriptで使用可能なすべての値
var person = {
  //프로퍼티 키는 name, 프로퍼티 값은 'lee'
  name : 'lee',
  //프로퍼티 키는 age, 프포퍼티 값은 '20'
  gae : 20
};
  • はカンマ(,)に分けられます.

    • 1.PropertyKey


  • 識別子としてproperty値に近い名前を使用します.

  • シンボル値と文字列を使用しますが、通常は文字列を使用します.
  • の命名規則に合致する識別子は引用符(「...」/「...」)である.省略できます.
  • の命名規則が守られていない場合は、引用符を使用する必要があります.
    ネーミングルールを守らないと面倒になるので、識別子ネーミングルールを守るpropertyキーをできるだけ使用することをお勧めします.
        var person = {
      firstname:'Ung-mo',
      //식별자 네이밍 규칙을 준순한 프로퍼티 키 -> 따옴표 생략!!!
      'last-name' : 'lee'
      //식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키 -> 따옴표 생략 불가!!!
      //(-)는 네이밍 규칙에 어긋난다.
    };
    console.log(person);
  • 例の引用符last-nameは演算子付きの式として解釈されるので、引用符を使用する必要があります.
  • 文字列または文字列で計算できる式を使用してpropertyキーを動的に生成できます.
    式を
  • Propertyキーのかっことして使用します([...])ロープで縛らなければならない.
    •       var obj ={};
      var key = 'hello'; 
      //Es5 프로퍼티 키 동적 생성
      obj[key] = 'world';
      //변수 key의 값인 hello가 프로퍼티 키가 되고 'world'가 그 값으로 들어가게 된다.
      //ES6 : 계산된 프로퍼티 이름
      //var obj = {[key]: 'world'};
      console.log(obj); //{hello:'wolrd'}
  • の空の文字列をpropertyキーとして使用してもエラーは発生しません.ただし身長の意味がないのでおすすめしません.
    var foo ={
'' : ''
};
console.log(foo); //{'':''}
  • propertyキーで文字列またはシンボル値以外の値を使用すると、暗黙的なタイプで文字列に変換されます.
    var foo = {
  0 :1,
  1: 2,
  2:3
};
console.log(foo); //{0:1,1:2,2:3}
// 이 경우에는 프로퍼티 키가 숫자타입이지만, 암묵적 타입 변환으로 문자열이 되었다.
  • var、functionなどの定語をpropertyキーとして使用してもエラーは発生しません.しかし、予期せぬエラーは推奨されません.
    var foo = {
  var : ' ',
  function : ' '
};
console.log(foo); //{var : '', function : ''}
  • 既存のproperty値が宣言された場合、後に宣言されたpropertyが最初に宣言したpropertyが上書きされます.間違いがないように気をつけなさい
    var foo={
  name: 'Lee',
  name: 'Kim'
};
console.log(foo); //{name : 'Kim'}
//lee가 있었지만 나중에 선언된 kim으로 덮어 씌어진 경우이다.

    • 10.4方法


    関数は値として処理できます.
    すなわち,関数がオブジェクトにバンドルされることをメソッドと呼ぶ.
  • の一般的な関数を区別するための方法と呼ばれる.
    •   var circle = {
  radius : 5,
  //원의 지름
  getDiameter : function(){ //메서드
  	return 2 * this.radius; //this는 circle을 가리킨다.
    }
   };
   console.log(circle.getKIameter()); //10

    10.5%アクセス

  • ピリオド記号:ピリオド記号アクセス演算子(.)
    • を使用
  • 角カッコ記号(かっこnotaion):角カッコPropertyアクセス演算子([])
    • を使用
        var person = {
      name : 'lee'
    };
    //마침표 표기법에 의한 프로퍼티 접근
    console.log(persion.name); //lee
    //대괄호 표기법에 의한 프로퍼티 접근
    console.log(persion['name']); //lee
    ※ルール遵守時:句点表記法と角括弧表記法の両方が使用可能
    ※PropertyKey-識別子命名規則に従わない名前:括弧表記のみ!
    ただし、Propertyキーが数字文字列の場合は引用符を省略できます.
    var person = {
  'last-name' : 'lee',
  1:10
};
person.'last-name'; //SyntaxError : Unexpected string
person.last-name; //브라우저 환경 : NaN
				  // Node.js환경 : ReferenceError : name is not defined
person[last-name]; //ReffernceErro : last is not defined
person['last-name']; //lee
    //프로퍼티 키가 숫자로 이루어진 문자열인 경우 따옴표를 생략 할 수 있다.
person.1; //SyntaxError : Unexpected number;
person.'1'; //SyntaxErro : Unexpected string
person[1]; //10 : person[1] -> person['1']
person['1']; //10
  • 角カッコメソッド角カッコ演算子の内部で指定されたPropertyキーは、引用符で囲まれた文字列でなければなりません.
    • var person = {
name : 'Lee'
};
console.log(person[name]); //ReferenceError : name is not defined
즉, 식별자 name을 평가하기 위해 선언된 name을 찾지 못했다는 뜻이다.
  • オブジェクトに存在しないプロパティにアクセスすると、未定義が返されます.
    ReferenceErrorはこの時点で発生しないことに注意してください.
    • var person = {
name : 'Lee'
};
console.log(person.age); //undefined

    10.6%の価格更新


    既存のpropertyに値を割り当てると、property値が更新されます.
    var person - {
  name : 'lee'
};
//person 객체에 name프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다.
person.name = 'Kim';
console.log(person); //{name : 'kim'}

    10.7%動的作成


    存在しないプロセスに値を割り当てると、そのプロセスが動的に作成され、追加され、そのプロセスに値が割り当てられます.
    var person = {
  name : 'lee'
};
//person 객체에는 age 프로퍼티가 존재하지 않는다.
//따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 20;
console.log(person); 
//{name: 'lee', age: 20}

    10.8%削除

    delete 연산자オブジェクトのpropertyを削除します.
    存在しないプログラムを削除すると、間違いなく無視されます.
    var person = {
  name: 'lee'
};
//프로퍼티 동적 생성
person.age = 20;
//person 객체에 age 프로퍼티가 존재한다.
//따라서 delete연산자로 age 프로퍼티를 삭제할 수 있다.
delete.person.age;
//person 객체에 address프로퍼티가 존재하지 않는다.
//따라서 delete연산자로 address프로퍼티를 삭제할 수 없다. 이때 에러가 발생하지 않는다.
delete.person.address;
console.log(person); {name: 'lee'}

    10.9 ES 6に追加されたオブジェクト文字の拡張


    10.9.1%サムネイル表示


    property値は、変数に割り当てられた値、すなわち識別子式であってもよい.
    //ES5
var x =1, y =2;
var obj = {
  x : x,
  y : y
};
console.log(obj); //{x: 1, y:2}
    ES 6でproperty値として変数を使用する場合は、変数名がpropertyキーと同じ名前の場合にpropertyキーを省略できます.この場合、propertyキーは自動的に変数名として生成されます.
    //ES6
let x= 1, y=2;
//프로퍼티 축약표현
const obj{x,y};
console.log(obj); //{x: 1, y:2}

    10.9.2計算されたプロパティ名

  • 計算されたProperty名(computed property name)
    文字列または文字列に変換できるタイプとして評価されるpropertyキーを動的に生成するには、式を使用します.
    Propertyキーとして使用する式をかっこ([])で囲む必要があります.
  • ES 5においてオブジェクト文字以外に括弧記号を使用して作成される場合、ES 6は、オブジェクト内部で計算されたProperty名を使用してProperty鍵を生成することもできる.
    • //ES5
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}
    //ES6
const prefix = 'prop';
let i = 0;
//객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성
const obj = {
[ `${prefix}=${++i}`]: i,
[ `${prefix}=${++i}`]: i,
[ `${prefix}=${++i}`]: i
	};
    console.log(obj); //{prop-1: 1, prop-2: 2, prop-3:3}

    10.9.3方法サムネイル表示


    ES 5でメソッドを定義するには、関数をProperty値に割り当てることができます.
    var obj = {
  name : 'lee'
  sayHi : function(){
    console.log('Hi!'+this.name);
  }
};
obj.sayHi(); //Hi! lee
    ES 6ではメソッドを定義する際に関数キーワードを省略した略語表現を用いることができる.
    const obj = {
  name : 'lee',
  //메서드 축약 표현
  sayHi(){
    console.log('Hi!'+ this.name);
  }
};
obj.sayhi(): //Hi! lee
  • ES 6として定義されたメソッドの略語表現は、Propertyに割り当てられた関数とは異なります.
    • CMYKカラー空間のピクチャをRGBカラー空間のピクチャに変換する
    コンピュータサイエンス(Computerサイエンス)のインタラクティブレンダリングパフォーマンスの最適化