Как создать сайт

Объекты. Как создать объект в JavaScript.

Здравствуйте!  На этому уроке мы с вами рассмотрим  объекты в JavaScript.  Объекты в JavaScript  очень похожи на массивы и напоминают ассоциативные массивы.

Ассоциативные массивы хранят данные любого типа и представляют из себя элементы, состоящие из пар ключ-значение.

Объекты в JavaScript

Ассоциативные массивы

Ассоциативный массив –  это структура данных, в которой можно хранить  данные в формате ключ-значение.

Для лучшего понимания объектов представьте себе  библиотеку, где много ящиков с формулярами и для того чтобы найти нужный формуляр нужно вытащить ящик  например на букву «А» и просмотреть какие там есть формуляры. Так вот формуляры представляют из себя значение, а буква «А» — это ключ.

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

Как создать объект.

Объект в JavaScript можно создать 2 способами:

1. var obj = new Object();
2.  var obj = {}; // пустые фигурные скобки

Как правило используется 2-й способ, потому что он короче.

Операции с объектами

Любой объект может содержать в себе свойства, которые будут доступны по ключу или через оператор «.»

Давайте для примера создадим объект employee, который будет хранить данные о сотруднике:

var emp = {}; // пока пустой

К основным  операциям с объектами – относятся  создание, получение и удаление  различных свойств.
Вот пример  как получить свойство объекта:

// при присвоении свойства в объекте автоматически создаётся "ящик"
// с именем "name" и в него записывается содержимое 'Вася'
emp.name = 'Петя';
emp.age = 35; // запишем ещё одно свойство: с именем 'age' и значением 25

В примере мы добавили к нашему объекту новые свойства, чтобы их получить тоже используется оператор «.»

alert( emp.name + ': ' + emp.age ); // "Петя: 35"

Для того чтобы удалить свойство используется оператор delete:

delete emp.age;

В результате останется только свойство name:
Для проверки, есть ли в объекте свойство с нужным ключом.
Для этой цели служит оператор: «in».
Его синтаксис в общем виде: «prop» in obj, причем имя свойства – в виде строки, то есть его надо заключать в кавычки:

if ("name" in emp) {
  alert( "Есть такое свойство!" );
}

Доступ  к объекту через квадратные скобки

Также существует  и альтернативный синтаксис для получения доступа к свойству, который использует квадратные скобки объект[‘свойство’] вот пример:

var personа = {};
personа['name'] = 'Вася'; // то же что и personа.name = 'Вася'

Записи personа[‘name’] и personа.name аналогичны, но квадратные скобки дают возможность использовать в качестве имени свойства любую строку:

var personа = {};
personа['любимый стиль музыки'] = 'Джаз';

Такое присвоение если бы мы использовали «точку», привело бы к ошибке, поскольку интерпретатор сразу же после первого пробела подумает, что свойство закончилось:

persona.любимый стиль музыки = 'Джаз'; // ???  будет ошибка

В обоих случаях, имя свойства обязано быть строкой. Если использовано значение другого типа – JavaScript приведет его к строке автоматически.

Читайте также  Объекты в функциях

Доступ к свойству объекта через переменную

Квадратные скобки также еще  позволяют обратиться к свойству, имя которого содержится в переменной:

var persona = {};
persona.age = 25;
var key1 = 'age';
alert( persona[key1] ); // выведет persona['age']

В случае, если имя свойства хранить в переменной (var key1 = «age»), то к нему можно обратиться через квадратные скобки — person[key].
Следует отметить, что доступ через точку используется тогда, когда имя свойства известно заранее, а если нет то используются квадратные скобки.

Объявление объекта со свойствами

Каждый вновь созданный объект можно заполнить парами ключ-значение непосредственно во время создания. Давайте разберем пример.

var menu = {
  width: 400,
  height: 300,
  title: "My Menu"
};
// то же самое, что:
var menu = {};
menu.width = 400;
menu.height = 300;
menu.title = 'My Menu';

Названия свойств вы можете перечислять как в кавычках, так и без, оных.
Например:

var menu = {
  width: 400,
  'height': 500,
  "папа мыл дверь": true
};

В качестве значения вы можете указать и другой объект:

var emp = {
  name: "Alex",
  age: 35,
  size: {
    top: 100,
    middle: 50,
    bottom: 80
  }
}
alert(emp.name) // "Alex"
alert(emp.size.top) // 90

В примере значением свойства size выступает объект {top: 90, middle: 60, bottom: 90 }.

Итого

Объекты – представляют из себя  ассоциативные массивы с расширенными возможностями:

  • Доступ к элементам объекта  осуществляется:
    • Напрямую по ключу obj.proper = 5
    • Через переменную, которая содержит ключ:
      var key1 = "prop";
      obj[key1] = 5
  • Удаление ключей: delete obj1.name.

Задачи

Первый объект

Мини-задачи на синтаксис объектов.

  1. Создать пустой объект emp.
  2. Добавить свойство name со значением Петя.
  3. Добавить свойство surname со значением Васин.
  4. Поменять значение name на Андрей.
  5. Удалить свойство name из объекта.

И в заключение смотрите видео по объектам в JavaScript.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

+ 64 = 67

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: