JS基本へ:オブジェクト

私がコアJS概念を再訪するので、これはノートの私のシリーズの一部です.

コンセプトカバー

一般的なオブジェクトリテラル概要

ドット表記対ブラケット表記

オブジェクト参照とクローニング

コンストラクター関数はこの記事ではカバーされません.
私の最後の記事では、私はJSの原始的なデータ型の詳細に入りました.今回はJS - Objectの他のデータ型です.
原始型とは対照的に、オブジェクトは複雑なエンティティを格納するために使用されます.一般的に、関連するプロパティやメソッドのコレクションです.
プロパティは“key : value”ペアで、キーは文字列で、値は何でも(配列を含む)ことができます.メソッドは、値が関数の場合です.

const user = {
name: 'Poulami',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
greet: function() {
    alert(`Hi! I'm ${this.name}.`);
  }
}

心に留めておくべきこと

として宣言されたオブジェクトconst を変更することができます.'ユーザ'を再利用することはできません

const user = {
name: 'Poulami',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
greet: function() {
    console.log(`Hi! I'm ${this.name}.`);
  }
}
user.greet(); // Hi! I'm Poulami.

user.name = "Unknown"
user.greet(); // Hi! I'm Unknown.

user = {
name: 'Unknown',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
greet: function() {
    console.log(`Hi! I'm ${this.name}.`);
  }
}
// Uncaught TypeError

キー変数名が何であるかについての制限はありません.という名前の変数を除く_proto_ これは' object '型でなければなりません.(これはプロトタイプに関連しており、本条には含まれない)

存在しないプロパティにアクセスしようとするとエラーは発生しません.
プロパティが存在するかどうかを確認するには、in operator -指定したプロパティがオブジェクトにある場合にtrueを返します

user.age // undefined
'age' in user //false

ドット表記対ブラケット表記
オブジェクトのプロパティにアクセスするには2つの方法があります.ドット表記を使用し、ブラケット表記を使用します.

//Get
user.name
user['name']

//Set
user.name = "Unknown"
user['name']= "Unknown"

どちらも基本的に同じように動作します.ただし、括弧記法が唯一の場合は動作しません.

キー名の変数の使用

let requested = "handle";
console.log(user.requested) //undefined
console.log(user[requested]) //poulamic

マルチワードプロパティ名

const user = {
name: 'Poulami',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
"has published" : true, //multiword keys are in quotes
greet: function() {
    console.log(`Hi! I'm ${this.name}.`);
  }
}

user["has published"] // true

オブジェクトリテラル内では、四角形のブラケットが計算されたプロパティに使用されます.つまり、リテラルを作成している間、変数を介してプロパティ名を設定します

let social = "twitter";
const user = {
name: 'Poulami',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
"has published" : true,
[`${social}account`]: true,
greet: function() {
    console.log(`Hi! I'm ${this.name}.`);
  }
}
console.log(user.twitteraccount) // true

オブジェクト参照とクローニング
プリミティブとオブジェクトは変数が変数名を指定して値を割り当てるときに異なる動作をします.

let a = 5;
let b = a;

期待値は2つの独立変数' a 'と' b 'を持つことです.そして、それは真実です-値が原始的なデータ型であるとき.(フードの下で、彼らは記憶の2つの異なる点)です.

let p = "poulami";
let q = p;
console.log(p,q) // poulami poulami
q= "unknown"
console.log(p,q) // poulami unknown

しかし、それはオブジェクトの場合ではありません.オブジェクトの場合、実際のオブジェクトはメモリーのどこかに格納される.そして、変数はそれに「参照」を有する.

let user = {
name: 'Poulami',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
greet: function() {
    alert(`Hi! I'm ${this.name}.`);
  }
}

let user2 = user;

この場合、2つの変数がありますが、1つの値だけです.値はメモリ内の点を持ち、変数の両方は同じオブジェクトを参照します.オブジェクトにアクセスすることができ、どちらの変数も変更することができます.

let user = {
name: 'Poulami',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
greet: function() {
    alert(`Hi! I'm ${this.name}.`);
  }
}

let user2 = user;
user2.name = "unknown";
console.log(user.name,user2.name) //unknown unknown

私たちは共有ドキュメントのように考えることができます-プリミティブの場合、変数はオリジナルに影響することなく変更できるシートの複製されたコピーを与えられますオブジェクトの間、varは同じシートへの作者許可を与えられます.
独立したコピーをするには、配列をクローン化する必要があります.つの方法は[Object.assign()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) メソッド.

let user2 =Object.assign({}, user);
user2.name = "unknown";
console.log(user.name,user2.name) //Poulami unknown

働くようです!もう一つ試してみましょう

let user2 = Object.assign({}, user);
user2.name = "unknown";
user2.interests[0] = 'Design'
console.log(user2.interests) // [ "Design", "front-end", "generative art" ]
console.log(user.interests) //  [ "Design", "front-end", "generative art" ]

どうした?
さて、上記のメソッドはプリミティブ値で動作しますが、オブジェクトデータ型では動作しません.オブジェクトの中でさえ、ネストされたオブジェクト(配列のような)は上で議論したように振る舞う―変数はオブジェクトに参照しています.そう.親オブジェクトがクローンされるとき、それはコピーされている参照です.

浅いコピー
浅いコピーは、他のものがまだ元の変数(同じ参照を通して)に接続される間、1つのレベルだけがコピーされる1つです.これはほとんど原始的な値だけを含んでいるオブジェクトのためにうまく働きます.
一方、深いコピーでは、すべての値(入れ子を含む)は、メモリ内に独自のスポットを持ち、元の変数から切り離されます.
This medium article JavaScriptの浅い/深いコピーオブジェクトと配列にいくつかのメソッドを説明します.
参考文献
javascript.info
MDN