Объекты

Объекты - это как шкаф для вещей, предназначеный для хранения и транспортировки других типов данных. JavaScript спроектирован на основе простой парадигмы. В основе концепции лежат простые объекты. Объект — это набор свойств, и каждое свойство состоит из имени(ключ) и значения, ассоциированного с этим именем. Значением свойства может быть функция⚙️, которую можно назвать методом объекта или любой другой тип.

В этой статье рассмотрим самые базовые свойства объектов JavaScript, создание и изменение, перечисление свойств.

Объект в JavaScript представляет собой обычный ассоциативный массив или, иначе говоря, "хэш". Он хранит любые соответствия "ключ : значение" и имеет несколько стандартных методов.

Объекты в JavaScript как и объекты в реальной жизни (человек, автобус, здание и т.д.) имеют несколько именованных (ключевых🗝️) параметров (возраст, имя, цвет волос, статус) с конкретными значениями (15, John, black, 'true') :

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

Метод объекта в JavaScript - это просто функция️, которая добавлена в ассоциативный массив.

Интерактивный редактор

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()
}

Результат

Loading...

Видео

Создание объекта

В компьютере ️ мы можем представить объект в виде шкафа с подписанными на нём именами-свойствами (ключи доступа). Внутри шкафа ящики - данные (конкретная информация) и даже могут быть более мелкие объекты, по аналогии вещи. По ключу нужный ящик легко найти, удалить или добавить (записать) в него новое значение.

Это два 2️⃣ варианта создания пустого объекта:

// эквивалентные записи
let obj = {}
let person = new Object()

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

Расширенное создание

Свойства можно указывать непосредственно при создании объекта, через список в фигурных скобках вида {..., ключ : значение, ...} и создавать сложные объекты:

Интерактивный редактор

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️⃣ Первый - точка, второй - квадратные скобки:

// эквивалентные записи
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) находится в переменной :

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

Здесь через переменную nameProp задаем имя свойства "age", являющийся ключом в ассоциативном массиве, по которому лежит значение 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 = {} // объект пустой 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
}

Результат

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 есть методы.

Например, создадим объект sport сразу с методом run:

Интерактивный редактор

function learnJavaScript() { let sport = { run: n => 'John' + ' пробежал ' + n + ' метров!' } return sport.run(300) }

function learnJavaScript() {
  let sport = {
    run: n => 'John' + ' пробежал ' + n + ' метров!'
  }

  return sport.run(300)
}

Результат

Loading...

Добавление метода

Добавление метода в существующий объект - просто, присвоим функцию⚙️ function(n) { ... } свойству sport.run.

Интерактивный редактор

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)
}

Результат

Loading...

Здесь не идет речь о классах, создании экземпляров и тому подобном. Просто - в любой объект в любое время можно добавить новый метод или удалить существующий.

Перебор свойств объекта

Для перебора всех свойств объекта используется специальный вид конструкции for .. in:

for(let key in obj) {
  // key - название свойства
  // obj[key] - значение свойства
  ...
}

Например :

Интерактивный редактор

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. Так, что не бойтесь их применять.

React Native

Например нам нужно отобразить имя из объекта obj, то мы это сделаем так:

Попробуйте вывести другие данные, например серию паспорта.

Проблемы?

Пишите в Telegram или ВКонтакте, а также подписывайтесь на наши новости

Вопросы

Пустой объект создается командой:

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

Объект хранит соответствия:

1. имя : фамилия
2. переменная = значение
3. ключ : значение

Синтаксиc присвоения значения конкретному ключу (свойству):

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 (условие) { }

В JavaScript объект - это набор свойств (именованных значений).

1. true
2. false

Когда свойство объекта является функцией, оно носит специальное имя: mothered.

1. true
2. false У него особое название: класс
3. false У него особое название: метод

Для того чтобы понять, на сколько вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в нашем телеграм боте.

Ссылки:

1. MDN web doc. Developer.mozilla.org - Статья "Типы данных JavaScript и структуры данных"
2. MDN web doc. Developer.mozilla.org - Статья "Инициализация объектов"
3. Статья "Object Types"
4. Статья "Объекты", сайт Learn.javascript.ru
5. Код для подростков: прекрасное руководство по программированию для начинающих, том 1: Javascript - Jeremy Moritz

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dmitriy K.

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨