Массивы и объекты в JavaScript

Массивы - это один из наиболее популярных типов данных в JavaScript. На реальных проектах сайтов они являются лучшим помощником разработчика.

Создание и чтение массивов

Давайте создадим пустой массив. Это можно сделать так:

var a = [];

Можно создать не пустой массив, а содержащий элементы. Элементами массива могут быть практически любые типы данных. Попробуем заполнить массив числами и словами:

var a = ['Сыр', 'Мышь', 15, 'Кот', 18];

Внутри массива, через запятую, записываются его элементы. Получился массив, который содержит 5 элементов. Строки надо записывать в кавычках, а цифры можно без. Чтобы получить значение элемента массива, необходимо выбрать его по порядковому номеру, начиная с нуля. Приведём пример обращения:

var a = ['Сыр', 'Мышь', 15, 'Кот', 18];

console.log(a[0]); // результат: 'Сыр'
console.log(a[1]); // результат: 'Мышь'
console.log(a[4]); // результат: '18'

Читатель наверняка заметит, что обращение к элементам массива по их порядковому номеру - это неудобно. Лучше задать пару "ключ-значение" и обращаться по текстовому ключу. Поговорим об этом далее.

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

Если Вы уже знакомы с языком программирования PHP, то наверняка спросите про ассоциативные массивы, которые используется крайне часто. Так для этих целей в JavaScript есть объекты. В объектах можно создать подобие ассоциативных массивов с доступом к значениям по ключу. Создадим объект и получим значение по ключу:

var a = {'Мышь': 'Большая', 'Кот': 'Маленький', 'Сыр': 100};

console.log(a['Мышь']); // результат: 'Большая'
console.log(a['Кот']); // результат: 'Маленький'
console.log(a['Сыр']); // результат - число 100

В отличии от массива, объект задаётся через фигурные скобки { }. Ключами могут быть как строки, так и цифры. Существует другой способ обращение к элементам объекта - через точки на название ключа. Но для него лучше сделать ключи в виде латинских символов. Продемонстрируем:

var a = {mouse: 'Большая', cat: 'Маленький'};

console.log(a.mouse); // результат: 'Большая'
console.log(a.cat); // результат: 'Маленький'

При такой записи говорят, что происходит обращение к свойству объекта.

Добавление элементов в массивы и объекты

Рассмотрим способы добавления пары "ключ-значение" в массив и в объект. Сначала добавим в массив произвольные элементы несколькими разными способами:

var a = ['Сыр', 'Мышь'];

a[2] = 'Кот'; // на пустую третью позицию добавили значение
a[3] = 15; // на пустую четвёртую позицию добавили значение

Есть функции, которые добавляют элементы в конец или начало массива. Это удобно, потому что не надо высчитывать порядковые номера:

var a = ['Сыр', 'Мышь'];
m.push(6);
a.push('Кот'); // добавляет элемент 'Кот' в конец массива
a.unshift('Кот');  // добавляет 'Кот' в начало массива

Теперь добавим элементы в объект:

var b = {'Мышь': 'Большая', 'Кот': 'Маленький'};

b['Сыр'] = 100; // в конец добавили ключ 'Сыр' и значение 100
b[18] = 'Котята'; // в конец добавили ключ '18' и значение 'Котята'

Удаление элементов из массивов и объектов

Теперь разберёмся как удалять элементы массива. Попробуем удалить первый и последний элемент массива

var a = ['Сыр', 'Мышь'];

a.pop('Кот'); // удаляет элемент из конца массива
a.shift('Кот');  // удаляет элемент из начала массива

Если необходимо удалить элемент из центра массива, то необходимо использовать функцию X.splice( Y, Z );. Эта функция удаляет из массива X элементы начаиня с позиции Y в количестве следующих Z элементов. Позиция Y считается от нуля. Продемонстрируем это:

var a = ['Сыр', 'Мышь', 'Кот', 18];

a.splice(2, 1); // удаляет 1 элемент с позиции 2
console.log(a); // вернёт ['Сыр', 'Мышь', 18]

Теперь попробуем удалить элемент объекта по ключу. Делается это с помощью функции delete:

var b = {'Мышь': 'Сыр', 'Кот': 'Молоко'};

delete b['Кот']; // удалили элемент с ключом 'Кот'
console.log(b); // вернёт {'Мышь': 'Сыр'}

Обратите внимание, что с помощью delete нельзя удалить весь объект, а только элемент внутри. Чтобы обнулить объект используйте такую конструкцию:

var b = {'Мышь': 'Сыр', 'Кот': 'Молоко'};

b = {}; // удалим все элементы из объекта
console.log(b); // вернёт пустой объект { }

Строку в массив и обратно

Существуют функция split( ), которая позволяет быстро создать массив из строки. В скобках у неё ставится один аргумент - разделитель, по которому строка будет разбита на элементы массива. Это довольно популярная функция, она часто используется в проектах. Приведём пример её использования:

var a = 'Тише, мыши, кот на крыше';
var b = a.split(',');
console.log(b); // вернёт массив [ "Тише", " мыши", " кот на крыше" ]

В параметр функции split( ) ставится разделитель, по которому строка будет разделена на элементы массива. Это может быть точка, запятая, пробел или любой другой символ, который есть в строке. Если разделитель не будет найден в строке, то будет возвращён массив с одним элементом, в котором будет вся строка. Если же разделитель встречается в строке, то она будет разделена на элементы массива.

Существует функция join( ). По своей работе она противоположна split( ) и тоже часто используется в проектах. Эта функция объединяет элементы массива в строку. Параметром в этой функции ставится строка-соединитель, которая будет между элементами. Соединителем может быть любой символ, даже пробел и пустая строка (по умолчанию соединитель - это запятая):

var a = ['Тише', 'мыши', 'кот на крыше'];
var b = a.join(', ');
console.log(b); // вернёт строку "Тише, мыши, кот на крыше"