Массивы и объекты в 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; // на пустую четвёртую позицию добавили значение
Если таким образом добавить элемент на позицию, которая не является последней, то пропущенные позиции будут содержать значение "undefined". При этом длина массива, полученная челе метод ".length" будет считать все элементы, в том числе "undefined".
Есть функции, которые добавляют элементы в конец или начало массива. Это удобно, потому что не надо высчитывать порядковые номера:
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); // вернёт строку "Тише, мыши, кот на крыше"
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: