對象

@serverSerrverlesskiy

對象就像一個壁櫥，用於存儲和傳輸其他類型的數據。 JavaScript是圍繞一個簡單的範例設計的。該概念基於簡單的對象。對像是屬性的集合，每個屬性都包含一個名稱（鍵）和一個與該名稱關聯的值。該屬性值可以是一個函數⚙️，可以稱為對象的方法或任何其他類型。

Object

在本文中，我們將介紹JavaScript對象的最基本屬性，創建和修改以及枚舉屬性。

JavaScript中的對像是簡單的關聯數組，換句話說就是“哈希”。它存儲任何鍵：值匹配，並具有幾種標準方法。

JavaScript中的對象，例如現實生活中的對象（人，公共汽車，建築物等），具有多個具有特定值（15，約翰，黑色）的命名（關鍵🗝️）參數（年齡，姓名，頭髮顏色，狀態） 'true') :

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

JavaScript中的對象方法只是一個函數️，已添加到關聯數組中。

实时编辑器

function learnJavaScript() {
  let obj = {
    // properties: values
    age: 15,
    name: 'John',
    // method: function
    say: () => 'Hello!'
  }
  return obj.say()
}

function learnJavaScript() {
  let obj = {
    // properties: values
    age: 15,
    name: 'John',
    // method: function
    say: () => 'Hello!'
  }
  return obj.say()
}

结果

對象創建

Object

在計算機 ️中，我們可以將“對象”表示為帶有簽名的名稱-屬性（“訪問鍵”）的櫃子。櫥櫃內部抽屜-類似於事物，數據（特定信息）甚至更小的物體。可以很容易地找到，刪除或添加（寫入）新值。key.

obj01

這是用於創建空對象的兩個2️⃣選項：

// equivalent records
let obj = {}
let person = new Object()

第二種選擇在實踐中很少使用。

obj00

進階創作

Extended

可以在創建對象時通過大括號中的列表直接指定屬性 {..., key: value, ...} 並創建複雜的對象：

实时编辑器

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
}

结果

創建的對象包含五個具有特定值的屬性，其中之一是護照數據，這是一個內置對象。注意對對象的遙遠屬性或方法的調用是如何進行的。嘗試返回您的護照號碼。

添加屬性

Adding

有兩種用於將屬性添加到對象的2️⃣語法。 1️⃣第一個是句號，第二個是方括號：

// equivalent records
obj.age = 15
obj['age'] = 15

实时编辑器

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

  obj.age = 15

  return obj.age
}

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

  obj.age = 15

  return obj.age
}

结果

方括號主要用於 properties' 名字在 variable` :

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

在這裡，通過變量 nameProp, 我們設置屬性的名稱 "age", 這是包含以下內容的關聯數組中的鍵 value 15.

实时编辑器

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
}

结果

訪問屬性

Door

通過訪問屬性來訪問它 :

实时编辑器

function learnJavaScript() {
  let obj = {} // object is empty
  obj.age = 17 // equivalent to obj ['age'] = 17 or immediately obj = {age: 17}

  let result1 = obj.age // Option 1
  let result2 = obj['age'] // Option 2

  return result1 + 'or' + result2
}

function learnJavaScript() {
  let obj = {} // object is empty
  obj.age = 17 // equivalent to obj ['age'] = 17 or immediately obj = {age: 17}

  let result1 = obj.age // Option 1
  let result2 = obj['age'] // Option 2

  return result1 + 'or' + result2
}

结果

如果對像不具有此類屬性，則結果為 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對象具有methods.

例如，讓我們創建一個 sport 立即與 run 方法:

实时编辑器

function learnJavaScript() {
  let sport = {
    run: n => 'John' + 'ran' + n + 'meters!'
  }

  return sport.run(300)
}

function learnJavaScript() {
  let sport = {
    run: n => 'John' + 'ran' + n + 'meters!'
  }

  return sport.run(300)
}

结果

添加方法

Add

向現有對象添加方法很簡單，分配功能⚙️ function (n) {...} 到 sport.run 財產。

实时编辑器

function learnJavaScript() {
  let sport = {}

  sport.run = n => 'The athlete ran' + n + 'meters and it was' + 'Nikita'

  return sport.run(350)
}

function learnJavaScript() {
  let sport = {}

  sport.run = n => 'The athlete ran' + n + 'meters and it was' + 'Nikita'

  return sport.run(350)
}

结果

這與類，實例化等無關。簡單-您可以隨時向任何對象添加新方法或刪除現有方法。

遍歷對象屬性

enumeration

要遍歷對象的所有屬性，一種特殊的 for .. in 使用建築:

for(let key in obj) {
   // key - property name
   // obj [key] - property value
  ...
}

例如 :

实时编辑器

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
}