オブジェクト

@serverSerrverlesskiy

オブジェクトは、他の種類のデータを格納および転送するためのクローゼットのようなものです。 JavaScript シンプルなパラダイムで設計されています。コンセプトはシンプルなオブジェクトに基づいています。オブジェクトはプロパティのコレクションであり、各プロパティは名前 (キー) とその名前に関連付けられた値で構成されます。プロパティの値は、オブジェクトのメソッド、またはその他の型と呼ばれる関数であることができます。

Object

この記事では、オブジェクトの最も基本的なプロパティを見ていきます。 JavaScript, プロパティの作成と変更、列挙。

のオブジェクト JavaScript 通常の連想配列、つまり「ハッシュ」です。それはすべての一致を保存します "キー: 値" およびいくつかの標準メソッドがあります。

のオブジェクト JavaScript 現実世界のオブジェクト (人、バス、建物など) のように、特定の値を持ついくつかの名前付き (key壁紙) パラメータ (年齢、名前、髪の色、ステータス) があります。 (15, John, black, 'true') :

let obj = {
  age: 15,
  name: 'John',
  color: 'black',
  student: true
}

のオブジェクトメソッド JavaScript - これは、連想配列に追加される単なる関数️です。

Live Editor

function learnJavaScript() {
  let obj = {
    // プロパティ: 値
    age: 15,
    name: 'John',
    // メソッド: 関数
    say: () => 'Hello!'
  }
  return obj.say()
}

function learnJavaScript() {
  let obj = {
    // プロパティ: 値
    age: 15,
    name: 'John',
    // メソッド: 関数
    say: () => 'Hello!'
  }
  return obj.say()
}

Result

オブジェクト作成

Object

コンピューターで想像できる オブジェクト 名前 - プロパティが署名されたキャビネット装置玩具保管の形で (アクセスキー). キャビネットの中には、データ (特定の情報) であるボックスがあり、物との類似性により、より小さなオブジェクトさえあるかもしれません。沿って キー 目的のボックスは簡単に見つけたり、削除したり、新しいボックスを追加 (書き込み) したりできます。値.

obj01

これらは、空のオブジェクトを作成するための 2️⃣ 2️⃣ オプションです。:

// 同等の記録
let obj = {}
let person = new Object()

Второй вариант очень редко используется в практике.

obj00

高度な作成

Extended

プロパティは、オブジェクトの作成時に、フォームの中括弧内のリストを介して直接指定できます。 {..., キー: 値, ...} 複雑なオブジェクトを作成します:

Live Editor

function learnJavaScript() {
  const obj = {
    age: 15,
    name: 'John',
    color: 'black',
    passport: {
      serial: 5721,
      number: 258963,
      date: '27.10.2015'
    },
    student: true
  }

  return obj.passport.date
}

function learnJavaScript() {
  const obj = {
    age: 15,
    name: 'John',
    color: 'black',
    passport: {
      serial: 5721,
      number: 258963,
      date: '27.10.2015'
    },
    student: true
  }

  return obj.passport.date
}

Result

作成された寒暖装置あえ️ オブジェクトには、特定の値を持つ 5 つのプロパティが含まれています。そのうちの 1 つは、組み込みオブジェクトであるパスポートデータです。オブジェクトの離れたプロパティまたはメソッドの呼び出しがどのように行われるかに注意してください。パスポート番号を取り戻してみてください。

プロパティの追加

Adding

オブジェクトにプロパティを追加するための 2️⃣ 構文があります。 1️⃣ 最初はピリオド、2番目は角かっこ:

// 同等の記録
obj.age = 15
obj['age'] = 15

Live Editor

function learnJavaScript() {
  let obj = {
    name: 'John'
  }

  obj.age = 15

  return obj.age
}

function learnJavaScript() {
  let obj = {
    name: 'John'
  }

  obj.age = 15

  return obj.age
}

Result

角括弧は主に次の場合に使用されます。 プロパティ名 (properties) にあります 変数 :

let nameProp = 'age'
obj[nameProp] = 15

ここで変数を介して nameProp プロパティの名前を設定します "age", これは、ある連想配列のキーです。 値 15.

Live Editor

function learnJavaScript() {
  let obj = {
    name: 'John'
  }

  let nameProp = 'age'
  obj[nameProp] = 15

  return obj.age
}

function learnJavaScript() {
  let obj = {
    name: 'John'
  }

  let nameProp = 'age'
  obj[nameProp] = 15

  return obj.age
}

Result

プロパティへのアクセス

Door

プロパティは、それにアクセスすることによってアクセスされます :

Live Editor

function learnJavaScript() {
  let obj = {} // オブジェクトが空です
  obj.age = 17 // 同等 obj['age']=17 またはすぐに obj={age:17}

  let result1 = obj.age // オプション 1
  let result2 = obj['age'] // オプション 2

  return result1 + ' または ' + result2
}

function learnJavaScript() {
  let obj = {} // オブジェクトが空です
  obj.age = 17 // 同等 obj['age']=17 またはすぐに obj={age:17}

  let result1 = obj.age // オプション 1
  let result2 = obj['age'] // オプション 2

  return result1 + ' または ' + result2
}

Result

オブジェクトの場合 そのようなプロパティはありません, 結果は次のようになります 'undefined'. ブラウザのコンソールで確認してください。

let obj = {}
obj.nokey

nokey

存在しないプロパティにアクセスした場合、エラーは発生しません。単に特別な値を返します undefined. 関数内にキーワード внутри がない場合 return, 同じ値が返されます undefined - 何もない。

プロパティの削除

Delete

固執プロパティの演算子を削除します delete. 前の例からパスポート番号を削除してみてください。

コンソールで前の例からオブジェクトを作成します。

const obj = {
  age: 15,
  name: 'John',
  color: 'black',
  passport: {
    serial: 5721,
    number: 258963,
    date: '27.10.2015'
  },
  student: true
}

ネストされたオブジェクトを削除します passport

delete obj.passport

さて、私たちがそれに目を向けると、結果として得られます undefined

obj.passport

delete obj

プロパティの削除

Description

他の言語と同じように、プログラミング装置 JavaScript 有る メソッド.

たとえば、オブジェクトを作成してみましょう sport メソッドで直接 run:

Live Editor

function learnJavaScript() {
  let sport = {
    run: n => 'John' + ' 走った ' + n + ' メートル!'
  }

  return sport.run(300)
}

function learnJavaScript() {
  let sport = {
    run: n => 'John' + ' 走った ' + n + ' メートル!'
  }

  return sport.run(300)
}

Result

メソッドの追加

Add

既存のオブジェクトにメソッドを追加するのは簡単、関数を代入しております function(n) { ... } 財産 sport.run.

Live Editor

function learnJavaScript() {
  let sport = {}

  sport.run = n => 'アスリートが走った ' + n + ' メートルでした ' + 'Nikita'

  return sport.run(350)
}

function learnJavaScript() {
  let sport = {}

  sport.run = n => 'アスリートが走った ' + n + ' メートルでした ' + 'Nikita'

  return sport.run(350)
}

Result

これは、クラスやインスタンス化などについてではありません。シンプル - いつでも新しいメソッドを追加したり、既存のメソッドをオブジェクトに削除したりできます。

オブジェクトプロパティのループ

enumeration

オブジェクトのすべてのプロパティを反復処理するには、特別なタイプの構築が使用されます。 for .. in:

for(let key in obj) {
  // key - プロパティ名
  // obj[key] - 資産価値
  ...
}

例えば :

Live Editor

function learnJavaScript() {
  let result = ''

  const obj = {
    age: 15,
    b: 'true',
    color: 'red'
  }

  for (let key in obj) {
    result += key + ':' + obj[key] + ' '
  }

  return result
}

function learnJavaScript() {
  let result = ''

  const obj = {
    age: 15,
    b: 'true',
    color: 'red'
  }

  for (let key in obj) {
    result += key + ':' + obj[key] + ' '
  }

  return result
}