對象

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

在本文中，我們將介紹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()
}

结果

Loading...

對象創建

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

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

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

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

進階創作

可以在創建對象時通過大括號中的列表直接指定屬性 {..., 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
}

结果

Loading...

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

添加屬性

有兩種用於將屬性添加到對象的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
}

结果

Loading...

方括號主要用於 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
}

结果

Loading...

訪問屬性

通過訪問屬性來訪問它 :

实时编辑器

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
}

结果

Loading...

如果對像不具有此類屬性，則結果為 undefined. 在瀏覽器控制台中檢查它。

let obj = {}
obj.nokey

訪問不存在的屬性（特殊值）時不會出現錯誤 undefined 只會返回。 如果沒有 return 函數中的關鍵字，然後 undefined 值也會返回-缺少東西。

刪除屬性

刪除➖屬性運算符 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

對象方法

與其他語言一樣，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)
}

结果

Loading...

添加方法

向現有對象添加方法很簡單，分配功能⚙️ 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)
}

结果

Loading...

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

遍歷對象屬性

要遍歷對象的所有屬性，一種特殊的 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
}

结果

Loading...

秘密地說，幾乎所有變量在JavaScript環境中都是一個微型對象。 因此，不要害怕使用它們。

問題？

Write to Discord chat.

問題:

使用以下命令創建一個空對象：

1. let obj = {}
2. function obj()
3. let x = 10

對象存儲匹配項：

1.鍵：值 2.姓名：姓 3.變量=值

為特定鍵（屬性）分配值的語法:

1. color () = "green"
2. obj.color =" red "
3. function color () =>" yellow "

JavaScript中的對象方法是

1.只是將一個函數添加到關聯數組 2.外部功能 3.在對像外部描述的變量

遍歷對象屬性

1. for (let i = 0; i <= 100; i ++) {sum + = i}
2. for (let key in obj) {}
3. while (condition) {}

為了了解您學到了多少本課程，請對 mobile application 我們學校就這個話題。

鏈接

1. MDN web doc. Developer.mozilla.org - Статья "Типы данных JavaScript и структуры данных"
2. MDN web doc. Developer.mozilla.org - Статья "Инициализация объектов"
3. Статья "Object Types"
4. Статья "Объекты", сайт Learn.javascript.ru
5. Code for Teens: The Perfect Beginner's Guide to Programming, Volume 1: Javascript - Jeremy Moritz

貢獻者 ✨

感謝這些好人(emoji key):

Dmitriy K.

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨