Моя самая любимая структура данных в JavaScript это Массив. Каждый раз когда я пишу код я имею дело с ней. Практически во всех моих задачах приходится обрабатывать массивы. В этой статье мы познакомимся с основными методами массива, научимся обрабатывать массивы.
Давайте начнем с определения массива - это упорядоченный набор данных. Упорядоченный подразумевает то что у каждого элемента в массиве есть порядковый номер. В программирование с давних времен повелось что отсчет элементов начинается с 0, а не с 1 как принято считать в обычной жизни.
Создание массива
Можно создать массив с помощью вызова конструктора от объекта Array.
new Array(); // -> []
В конструктор можно передать один аргумент - число, который укажет сколько нужно зарезервировать мест под массив. По факту будет создан объект-массив со свойством length
равным 3.
new Array(3); // -> (3) [empty × 3]
Если передать больше аргументов в конструктор, то эти аргументы будут использоваться как элементы массива.
new Array(1, 4, `Hello`, true)); // -> (4) [1, 4, "Hello", true]
Данные способы я использую редко обычно все ограничивается сокращенной формой создания массива
[]; // -> []
[1, 4, `Hello`, true]; // -> (4)_[1, 4, `Hello`, true]
Есть еще много разных методов, в результате которых можно получить на выходе массив, но эти два подхода самые основные.
Доступ к элементу массива
Чтобы обратиться к элементу массива надо воспользоваться квадратными скобками [].
let array = [1,2,3,4,5,6];
console.log(array[4]); // -> 5
Если вы обратитесь к элементу которого не существует в массиве то получите значение undefined
.
Нужно обратить к последнему элементу массива, воспользуемся свойством length
.
let array = [1,2,3,4,5,6];
console.log(array[array.length - 1]); // -> 6
Перебор элементов массива
Самый простой и понятный способ это использовать цикл со счетчиком
let array = [`A`, `B`, `C`, `D`, `E`];
for(let i = 0; i < array.length; i++) {
console.log(`array[${i}]`, array[i]);
}
Используя цикл со счетчиком можно менять порядок перебора, с конца по начало, через один элемент и т.д.
Можно использовать цикл for…of
, тогда запись будет более краткой.
let array = [`A`, `B`, `C`, `D`, `E`];
for(let item of array) {
console.log(item);
}
Поиск элемента в массиве
Поиск позиции элемента в массиве - indexOf
.
[0, 1, 2, 3].indexOf(2); // -> 3
[0, 1, 2, 3].indexOf(5); // -> -1
Поиск элемента в массиве - find
.
let item = [1,2,3,4,5].find(x => x === 3);
console.log(item); // -> 3
Проверка на существование элемента в массиве - includes
let found = [1,2,3,4,5].includes(3);
let notFound = [1,2,3,4,5].includes(-1);
console.log(found); // -> true
console.log(notFound); // -> false
Изменение элементов массива
Добавление нового элемента в конец массива - push
.
[0,1,2,3,4].push(5); // -> [0, 1, 2, 3, 4, 5]
Удаление элемента с конца массива - pop
.
let array = [0,1,2,3,4];
let last = array.pop(); // -> 4
array; // -> [0, 1, 2, 3]
Удаление элемента с начала массива - shift
.
let array = [0,1,2,3,4];
let first = array.shift(); // -> 0
array; // -> [1, 2, 3, 4]
Добавление элемента в начале массива - unshift
.
let array = [1, 2, 3, 4];
array.unshift(0);
array; // -> [0, 1, 2, 3, 4]
Удаление элемента массива по номеру позиции - splice
.
Метод splice
изменяет содержимое массива удаляя, либо заменяя существующие элементы в определенном месте массива.
В результате работы метода возвращаются массив удаленных элементов.
splice(start, deleteCount?, …items?)
.
Разберём входные аргументы метода
start
- позиция с которой нужно начать изменение массива.
deleteCount
- количество элементов, которые нужно удалить.
items
- элементы которые нужно добавить
let x = [1,2,3];
x.splice(2, 1); // 3
Сортировка массива - sort
let numbers = [5,4,1,2];
console.log(numbers.sort()); // ->[1,2,4,5]
Если нужно отсортировать объекты или порядок отличный от стандартного, в метод sort
можно передать функцию, которая будет сравнивать элементы.
let numbers = [5,4,1,1,2];
numbers.sort((a,b) => b - a);
Итого
Мы рассмотрели основные операции над массивами. Когда вы начнете работать с массивами, ознакомьтесь с полным перечнем методов объекта Array
. Возможно то что вы хотите сделать уже было реализовано, и вам нужно всего лишь вызвать нужный метод.
В следующий раз мы рассмотрим три моих любимых метода объекта Array. - map
, filter
, reduce
.