オブジェクト

ユーザーを説明しているとします。名前、メールアドレス、年齢、サインイン状態などです。これらを4つの別々の変数に散らすこともできますが、それらは一緒に属しており、それらを分けておくと、「ユーザー」を意味するときに毎回4つのことを渡す必要があります。オブジェクトはすべてを1つの値に集め、各部分が検索できる名前を持つようにします。ほとんどのデータ、ユーザー、製品、カートはちょうどこのような形で到着します。

オブジェクトを作成する

**オブジェクト**は名前付き値の集まりで、中括弧で書きます。内部では、key: valueのペアをカンマで区切ってリストします。キーは名前であり、値はそれが保持しているもです：

const user = {
  name: "太郎",
  age: 27,
};

console.log(user.name); // 太郎

ドットとキーで値を読み取ります：user.name。これはドット記法と呼ばれ、ほとんどの場合これを使用します。左のキー、右に保存された値です。

値を読み取るための2番目の方法があり、キーを文字列として角括弧を使用します：

console.log(user["name"]); // 太郎

ほとんどの場合、ドット記法の方がクリーンに読めるため、それを使用してください。括弧は、キーが通常の単語ではない場合（例えばスペースが含まれている場合）や、キーが事前にわからず、別の変数に格納されている場合に活躍します。

const product = {
  title: "デスクランプ",
  price: 40,
  inStock: true,
};

console.log(`${product.title}は${product.price}です`); // デスクランプは40です

オブジェクトは他の値と同様に値です。constに格納し、配列に入れ、関数に渡し、返すことができます。キーはその部分に名前を与え、それが全体です：product.priceはそれが何であるかを言い、変数に座っている裸の40はそうではありません。

Junoオブジェクトを作成するオブジェクトは中括弧内のkey: valueペアとして書かれた名前の下に関連する値を集めます。ドットとキーで値を読み取ります。user.nameのように。キーに奇妙な文字が含まれている場合または変数に格納されている場合にのみ、角括弧形式に手を伸ばしてください。

オブジェクトを変更する

オブジェクトは一度作成されたら固定されていません。新しいキーを追加したり、既存のキーを変更したり、完全に削除したりできます。追加または更新するには、キーに割り当てます：

const user = {
  name: "太郎",
};

user.age = 30; // 新しいキーを追加します
user.name = "太郎山田"; // 既存のものを更新します

console.log(user); // { name: "太郎山田", age: 30 }

キーが既に存在する場合、割り当てると値が置き換わります。そうでない場合は、作成されます。キーを削除するには、deleteを使用します：

delete user.age;
console.log(user); // { name: "太郎山田" }

ここが人々を驚かせる部分です。Aconstオブジェクトでもそのプロパティを変更できます。constは名前userが異なるオブジェクトをポイントできないことを意味しますが、それが指すオブジェクトは公正なゲームです：

const cart = { total: 0 };
cart.total = 25; // 問題ありません。内部を変更する場合
// cart = { total: 25 }; // これはエラーになります。名前を再割り当てする場合

Junoオブジェクトを変更するキーに割り当てて、追加または更新し、deleteを使用して削除します。驚きはconstです。userが別のオブジェクトをポイントするのを停止しますが、保持されているオブジェクトの内部を変更することはできます。すべてをロックするのを期待するのをやめるのに時間がかかりました。

メソッドとthis

オブジェクト内の値は関数です。その場合、**メソッド**と呼ばれます：オブジェクトが保存する事実ではなく、オブジェクトができることです。同じドットと括弧で呼び出します：

const user = {
  name: "太郎",
  greet() {
    return `Hi、I am ${this.name}`;
  },
};

console.log(user.greet()); // Hi、I am 太郎

内部の新しい単語はthisです。user.greet()を呼び出すと、thisは「このメソッドが呼び出されたオブジェクト」を意味し、ここではuserです。そのため、this.nameは同じオブジェクトからnameキーを読み取ります。これは、メソッドが渡されなくても独自のオブジェクトの値に到達する方法です。

Junoメソッドとthis オブジェクト上に格納された関数はメソッドで、ドットと括弧で呼び出されますuser.greet()のように。内部では，thisはメソッドが呼び出されたオブジェクトを意味するため，this.nameはそのオブジェクト自身のnameを読み取ります。これは、メソッドが独自のオブジェクトの値に到達する方法です。

オブジェクトと配列を一緒に

ほとんどの実際のデータは、オブジェクトのリストです。多くのユーザー、多くの製品、各オブジェクト1つのレコード。同じキーを使用します。オブジェクトを配列内に置きます：

const products = [
  { title: "デスクランプ", price: 40 },
  { title: "ノートブック", price: 6 },
  { title: "ペン", price: 3 },
];

console.log(products[0].title); // デスクランプ

位置で1つのオブジェクトに到達し（products[0]）、次にドットでそのフィールドの1つに到達します（.title）。チェーン化され、products[0].titleは最初の製品のタイトルを読み取ります。

すべてのオブジェクトからフィールドを読み取るために、配列をループします：

for (const product of products) {
  console.log(product.title);
}
// デスクランプ
// ノートブック
// ペン

ループの各ターンで、productはリストから1つのオブジェクトであり、product.titleはそのタイトルを読み取ります。このシェイプ、ループするオブジェクトの配列は、ほとんどの場合、実行するデータ作業です。

Junoオブジェクトと配列を一緒にほとんどの実際のデータはオブジェクトの配列です。リスト内の各アイテムが同じキーを持つ1つのレコードであります。products[0]で1つに到達し、products[0].titleでフィールドに到達します。配列をループして、すべてのレコードに接するため、実行するほとんどのデータ作業の背後にあるパターンです。

オブジェクトの次のステップ

オブジェクトと配列は、常に手を伸ばすための2つの構造であり、ほとんどのデータは、配列フィールドを持つオブジェクト、オブジェクトの配列、両方の組み合わせの2つのネストです。配列メソッドと組み合わせるほぼすべてのデータを、必要なシェイプに形成できます。

次のステップはオブジェクトをページで機能させることです。DOMに到達するとき、読み取りと変更をするエレメントもオブジェクトで、設定するキーと呼び出すメソッドを持つため、ここのすべてが直接実行されます。

オブジェクト ​

オブジェクトを作成する ​

オブジェクトを変更する ​

メソッドとthis ​

オブジェクトと配列を一緒に ​