Массив и объект: первое знакомство

Пока мы храним по одному значению на переменную. Но список покупок, друзья в соцсети, товары в корзине – это наборы значений. Для них у языка два контейнера: массив – пронумерованный список, и объект – записи «имя: значение».

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

Когда одной переменной мало

Список покупок в двадцати переменных – путь в никуда.

массив: доступ по номеру 0 'хлеб' 1 'сыр' 2 'чай' объект: доступ по имени name: 'Ира' age: 25
Массив нумерует с нуля, объект подписывает по-человечески.

Массив: список с номерами

Массив записывают в квадратных скобках через запятую. Элемент достают по номеру в квадратных скобках – и нумерация, как у символов строк, идёт с нуля: list[0] – первый элемент. Свойство .length знает размер списка.

Значения в массиве кладутся по одному, в конец, и каждое получает свой номер. Посмотрите, как это выглядит: к массиву с одним значением добавляются ещё два, а потом ячейка с номером 1 меняет содержимое.

list.jsjs
const list = ['хлеб', 'сыр', 'чай'];// хлеб – нумерация с нуляconsole.log(list[0]);console.log(list[2]);  // чай// 3 – в списке три элементаconsole.log(list.length);

Менять элементы и хранить что угодно

Номер в квадратных скобках работает в обе стороны: слева от знака присваивания он не читает элемент, а заменяет его. list[1] = 'масло' – и на месте сыра теперь масло; сам массив остаётся тем же, меняется только его ячейка.

И ещё одно, что стоит знать сразу: массив не привередлив к содержимому. В одном списке могут лежать строки, числа, логические значения – любые типы вперемешку. На практике так делают редко (однородный список удобнее), но язык это позволяет.

change.jsjs
const list = ['хлеб', 'сыр', 'чай'];// заменили элемент по номеруlist[1] = 'масло';// [ 'хлеб', 'масло', 'чай' ]console.log(list);// типы можно смешиватьconst mixed = ['Ира', 25, true, null];console.log(mixed[1]);  // 25console.log(mixed.length);  // 4
Слева от = квадратные скобки не читают элемент, а заменяют его.

Объект: записи по имени

Объект записывают в фигурных скобках парами имя: значение. Такая пара называется свойством: слева имя, справа значение. Читают свойство через точку: user.name – «у объекта user возьми свойство name».

Если запросить свойство, которого нет, ошибки не будет – вернётся уже знакомый undefined. Это тот же смысл, что и у необъявленного значения переменной: «такого тут не клали».

name: 'Ира' age: 25
У массива ячейки пронумерованы, у объекта – подписаны именами.
user.jsjs
const user = { name: 'Ира', age: 25 };console.log(user.name);  // Ираconsole.log(user.age);  // 25// undefined – такого свойства нетconsole.log(user.email);

Свойства можно менять и добавлять после создания объекта. Точка слева от знака присваивания меняет значение свойства, а если такого имени ещё не было – добавляет его. Убрать свойство целиком умеет оператор delete.

edit.jsjs
const user = { name: 'Ира', age: 25 };// изменили существующее свойствоuser.age = 26;// такого имени не было – свойство добавилосьuser.city = 'Пермь';delete user.name;  // и удалили целиком// { age: 26, city: 'Пермь' }console.log(user);
const-contents.jsjs
const user = { name: 'Ира' };// можно: меняем содержимое объектаuser.age = 25;// { name: 'Ира', age: 25 }console.log(user);// TypeError: Assignment to constant variableuser = { name: 'Оля' };
const охраняет саму переменную, а не то, что лежит внутри объекта.

// теперь вы знаете

  1. Объект – пары ключ: значение в фигурных скобках; доступ через точку
  2. Массив – упорядоченный список в квадратных скобках; индексы с нуля
  3. Элемент массива меняют по номеру: list[1] = значение; типы внутри могут быть любыми
  4. Свойство объекта точкой меняют и добавляют, а delete – удаляет
  5. const запрещает менять переменную, но не содержимое массива или объекта
  6. Подробные главы об объектах и массивах – в части III

Проверьте себя

Дан массив const pets = ['кот', 'пёс', 'хомяк']. Что вернёт pets[1]?

Чему равен ['а', 'б', 'в', 'г'].length?

переключают уроки · не работают при фокусе в полях ввода