Как добавить элемент в массив JS или работаем с массивами в JavaScript как профи
Учимся индексировать массивы в js, удалять и добавлять их элементы.
Массив в JavaScript — это глобальный объект, предназначенный для хранения списка значений.
Он похож на другие переменные тем, что может хранить данные любого типа. Но у массива есть одно важное отличие от переменной: в нём может одновременно храниться больше одного элемента.
Массив — это упорядоченный набор значений. Каждое значение называется элементом и имеет свой номер, который называется индекс.
Элемент внутри массива может быть любого типа. Причём элементы одного массива могут быть разных типов: числа, строки, логические элементы и даже объекты или другие массивы.
Порядок элементов массива отсчитывается с 0. Получается, что в массиве всегда будет смещение индекса на единицу: у первого элемента будет индекс 0, у второго 1, и т.д.
Вот пример массива с элементами различных типов:
| Индекс | 0 | 1 | 2 | 3 |
| Значение | "Супермэн" | 84 | true | ["Бэтмэн", "Робин"] |
Создание (объявление) массива
Массивы очень удобны, потому что в них можно хранить столько данных, сколько нужно. Максимально возможный размер js-массива- 232 элемента.
Нужно сказать JavaScript, что мы хотим создать именно массив. Для этого есть два варианта: значение в квадратных скобках или ключевое слово new.
Короткая запись: при помощи квадратных скобок
Заключённый в квадратные скобки список значений, разделённых запятыми.
var myArray = [ "Джек", "Сойер", "Джон", "Дезмонд" ];Содержимое массива определяется тем, что находится между квадратными скобками. При этом каждое значение отделяется запятой.
Значения задаются так же, как и простые переменные, то есть строки нужно объявлять заключёнными в кавычки и т.д.
Чтобы объявить пустой массив, оставьте скобки пустыми:
var myArray = [];Длинная запись: при помощи конструктора Array()
var lostArray = new Array("Джек", "Сойер", "Джон", "Дезмонд" );
var twinPeaksArray = new Array("Лора", 2, ["Боб", "Лиланд", "Дейл"]);Ключевое слово new говорит JavaScript создать новый массив, значения которого передаются как параметры.
Если вы заранее знаете, сколько элементов будет в вашем массиве, можно сразу передать это значение в конструкторе.
var myArray = new Array(80);Выражение, приведенное выше, создаст пустой массив, состоящий из 80 слотов со значениями undefined.
Объявление пустого массива:
var myArray = new Array();Доступ к элементам массива
С помощью индекса каждого элемента можно работать с любыми данными в массиве, обращаясь к ним при помощи оператора []:
var myArray = ["Джек", "Сойер", "Джон", "Дезмонд"];
console.log(myArray[0]); // Выводит “Джек”
console.log(myArray[3]); // Выводит “Дезмонд”В массиве может быть несколько уровней, то есть каждый элемент может сам быть массивом. В итоге получится двумерный js-массив. Как же обратиться к этим массивам, которые располагаются внутри других — «многомерным массивам»?
Для примера давайте рассмотрим массив, представляющий семью. Дети из этой семьи записаны отдельным массивом внутри главного:
var familyArray = ["Мардж", "Гомер", ["Барт", "Лиза", "Мэгги"]];Можно представить его следующим образом:
| 0 | 1 | 2 | ||
| Мардж | Гомер | 0 | 1 | 2 |
| Барт | Лиза | Мэгги | ||
Что делать, если мы хотим обратиться к значению «Лиза»? Можно обозначить позицию «Лизы» оранжевым: это индекс 1 внутри массива, расположенного на индексе 2 главного массива:
| 0 | 1 | 2 | ||
| Мардж | Гомер | 0 | 1 | 2 |
| Барт | Лиза | Мэгги | ||
Для обращения к значению «Лиза»:
var lisa = familyArray[2][1];
console.log(lisa); // выводит «Лиза»Так можно продолжать практически бесконечно, что позволяет хранить в массивах вложенные друг в друга наборы данных и обращаться к ним при помощи индексов.
Как добавить элемент в массив JS
Мы разобрались, как обращаться к элементам массива при помощи соответствующих им индексов. Похожим образом можно добавлять (или изменять) элементы, объявляя, например:
var myArray = [ "Кейт", "Сун"];
myArray[2] = "Джулиет";
console.log(myArray); // Выводит "Кейт, Сун, Джулиет"В примере, приведенном выше, я добавил индекс 2 со значением «Джулиет», которого до этого не было.
Что произойдёт, если я объявлю элемент с индексом, перед которым нет других элементов? Массив сам создаст все недостающие элементы и присвоит им значение undefined:
var myArray = ["Кейт", "Сун"];
myArray[5] = "Джулиет";
console.log(myArray.length); // Выводит «6»
console.log(myArray); // Prints ["Кейт", "Сун", undefined, undefined, undefined, "Джулиет"]Узнать какова длина js-массива можно, воспользовавшись свойством length. В примере, приведенном выше, в массиве шесть элементов, и для трёх из них не было задано значение — они обозначены как undefined.
Метод push()
С помощью метода push() можно добавить в js-массив один или несколько элементов. Push() принимает неограниченное количество параметров, все они будут добавлены в конец массива.
var myArray = [ "Кейт", "Сут"];
myArray.push("Джулиет"); // Добавляет в конец массива элемент "Джулиет"
myArray.push("Либби", "Шеннон");// Добавляет в конец массива элементы "Либби" и "Шеннон"
console.log(myaArray); // Prints ["Кейт", "Сун", " Джулиет ", "Либби", "Шеннон"]Метод unshift()
Метод unshift() работает также как и push(), только добавляет элементы в начало массива.
var myArray = [ "Кейт", "Сун"];
myArray.unshift("Джулиет"); // Добавляет в начало массива элемент "Джулиет"
myArray.unshift("Либби", "Шеннон"); // Добавляет в начало массива элементы "Либби" и "Шеннон"
console.log(myArray); // Выводит ["Либби", "Шеннон", "Джулиет", "Кейт", "Сун"]Удаление элементов массива
Методы pop() и shift()
Методы pop() и shift() удаляют последний и первый элемент массива, соответственно:
var myArray = ["Джек", "Сойер", "Джон", "Дезмонд", "Кейт"];
myArray.pop(); // Удаляет элемент "Кейт"
myArray.shift(); // Удаляет элемент "Джек"
console.log(myArray); // Выводит ["Сойер", "Джон", "Дезмонд"]Метод splice()
С помощью метода splice() можно удалять или добавлять элементы в массив, при этом точно указывая индекс элементов.
В следующем примере метод splice() добавляет два элемента, начиная с индекса 2 (то есть с третьего элемента):
var fruitArray = ["яблоко", "персик", "апельсин", "лимон", "лайм", "вишня"];
fruitArray.splice(2, 0, "дыня", "банан");
console.log(fruitArray); // Выводит ["яблоко", "персик", "дыня", "банан", "апельсин", "лимон", "лайм", "вишня"]Первый параметр метода splice() — индекс. Он указывает, на какой позиции нужно добавить/удалить элементы. В нашем примере мы выбрали индекс 2 (со значением «апельсин»).
Второй параметр — количество элементов, которые требуется удалить. Мы указали значение 0, поэтому ничего не удалится.
Следующие параметры — необязательные. Они добавляют в массив новые значения. В нашем случае нужно добавить «дыню» и «банан», начиная с индекса 2.
Чтобы удалить один элемент массива js на индексе 2, нужен следующий код:
var fruitArray = ["яблоко", "персик", "апельсин", "лимон", "лайм", "вишня"];
fruitArray.splice(2,1);
console.log(fruitArray); // Prints ["яблоко", "персик", "лимон", "лайм", "вишня"]Стоит также сказать о методе slice(), который тоже удаляет значения из массива, но не изменяет оригинальный массив, а возвращает новый.