Введение в массивы JavaScript и способы доступа и изменения элементов внутри них.

Массивы являются фундаментальной частью написания кода на JavaScript и очень универсальны, они могут помочь нам организовать наш код, делая его более читабельным и удобным в сопровождении.

В этой статье объясняется, что такое массив, рассматриваются некоторые методы, доступные при работе с массивами, а также методы мутаторов и методов доступа.

Что такое массив?

Массив — это тип глобального объекта, который может использоваться для хранения данных и состоит из упорядоченной коллекции или списка элементов. Массивы не содержат ключей, как объекты и карты, вместо этого они используют нумерованные индексы, начинающиеся с 0, для доступа к элементам.

Существует два способа создания массива:

  1. Синтаксис литерала массива, в котором используются квадратные скобки []
  2. Конструктор массива, который использует ключевое слово new

В следующем коде показано, как создать пустой массив с помощью вышеуказанных методов.

const myArray = [];
const myArray = new Array();

Массивы могут содержать данные любого типа, включая строки, числа, объекты и даже другие массивы.

Давайте создадим пример массива, содержащегося в переменной с именем animals.

const animals = ['lion', 'elephant', 'zebra', 'hippo', 'giraffe'];

Обычно при проверке типа чего-либо в JavaScript мы используем оператор typeof. Это возвращает строку, указывающую тип данных невычисленного операнда. Давайте посмотрим, что возвращает typeof, когда мы передаем ему наш массив animals.

typeof animals // object

К сожалению, при использовании typeof в JavaScript нет типа массива, поэтому он возвращает object.

Вместо этого мы можем использовать метод Array.isArray(), который появился с ECMAScript 5. Этот метод вернет true, если значение переменной равно массиву, в противном случае он вернет false.

Array.isArray(animals); // true
Array.isArray(12345); // false

Теперь, когда мы создали массив, мы можем начать с ним работать и манипулировать им, но сначала нам нужно понять, как массивы индексируются.

Индексирование

Массивы не имеют key:value пар. Вместо этого они индексируются целочисленными значениями, начинающимися с 0.

Если мы возьмем наш массив animals, первым элементом будет lion, который проиндексирован как 0. Далее следует elephant с индексом 1. Последний элемент в нашем массиве — giraffe с индексом 4.

Мы можем определить, сколько элементов находится в массиве, используя свойство length.

animals.length; // 5

Хотя индексы нашего массива животных состоят из чисел от 0 до 4, свойство length будет выводить только количество элементов в массиве, начиная с 1.

Если мы хотим узнать порядковый номер определенного элемента в массиве, мы используем метод indexOf().

animals.indexOf('lion'); // 0
animals.indexOf('zebra'); // 2
animals.indexOf('giraffe'); // 4

Если метод не может найти индекс, например, искомое значение не существует, то он вернет -1.

animals.indexOf('cat'); // -1

Доступ к свойствам внутри массива

Чтобы получить доступ к элементу в массиве, нам нужно указать порядковый номер элемента в квадратных скобках.

animals[1]; // elephant

Мы знаем, что 0 всегда выводит первый элемент массива. Мы также можем легко найти последний элемент, убрав единицу из длины нашего массива и применив ее в качестве порядкового номера.

const lastItem = animals.length - 1;
animals[lastItem]; // giraffe

Если мы попытаемся получить доступ к несуществующему индексу, JavaScript вернет undefined.

animals[22]) // undefined

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

Для добавления элементов в массив мы используем метод push(). Это добавляет один или несколько элементов в конец массива.

animals.push('hyena'); // ["lion", "elephant", "zebra", "hippo", "giraffe", "hyena"]

Если мы хотим добавить элемент в начало массива, мы используем метод unshift().

animals.unshift('rhino'); // ["rhino", "lion", "elephant", "zebra", "hippo", "giraffe"]

Стоит отметить, что мы можем добавлять элементы в массив, вручную присваивая им порядковый номер.

animals[5] = 'leopard'; // ["lion", "elephant", "zebra", "hippo", "giraffe", "leopard"]

Однако это может вызвать проблемы, если мы пропустим порядковый номер. В этом случае JavaScript создает элемент empty в массиве.

animals[6] = 'meerkat'; // ["lion", "elephant", "zebra", "hippo", "giraffe", empty, "meerkat"]

Если мы попытаемся получить доступ к этому элементу, JavaScript вернет undefined.

animals[5]; // undefined

Чтобы предотвратить эти проблемы, придерживайтесь метода push() для добавления элементов.

Изменение элементов в массиве

Мы перезаписываем значение в массиве с помощью оператора присваивания, как и при работе с обычными переменными.

animals[0] = 'chimpanzee'; // ["chimpanzee", "elephant", "zebra", "hippo", "giraffe"]

Другой способ изменить значения элементов в массиве — использовать метод splice(), но сначала нам нужно понять, что такое методы мутатора.

Методы мутатора

Методы-мутаторы изменяют исходный массив. Мы уже использовали методы-мутаторы с push() и unshift().

Мы меняем порядок элементов в массиве, используя метод reverse().

animals.reverse(); // ["giraffe", "hippo", "zebra", "elephant", "lion"]

Мы сортируем элементы в массиве по первому символу, используя метод sort() .

animals.sort(); // ["elephant", "giraffe", "hippo", "lion", "zebra"]

Если есть элементы с одинаковым первым символом, JavaScript будет сравнивать второй символ и так далее. Поскольку сортировка основана на первом символе Unicode, JavaScript будет сортировать строки в верхнем регистре перед строчными.

const animals = ['lion', 'elephant', 'ZEBRA', 'HIPPO', 'giraffe'];
animals.sort(); // ["HIPPO", "ZEBRA", "elephant", "giraffe", "lion"]

Интересно отметить, что sort() не сортирует по числовому размеру, а проверяет только первый символ каждого числа.

const numbers = [55, 1, 19, 30, 98, 71, 7, 3];
numbers.sort(); // [1, 19, 3, 30, 55, 7, 71, 98]

Чтобы решить эту проблему, мы можем добавить пользовательскую функцию сравнения, которая обрабатывает числовую сортировку, и мы можем сортировать в порядке возрастания или убывания.

const numbers = [55, 1, 19, 30, 98, 71, 7, 3];
numbers.sort((a, b) => a - b); // [1, 3, 7, 19, 30, 55, 71, 98]
numbers.sort((a, b) => b - a); // [98, 71, 55, 30, 19, 7, 3, 1]

Мы рассмотрели изменение элементов в массиве с помощью оператора присваивания, но мы также можем использовать для этого метод splice(). Splice() принимает три параметра:

1. Номер индекса, с которого нужно начинать

2. Количество удаляемых элементов

3. Необязательный параметр элементов для добавления

В следующем примере мы начинаем с elephant, удаляем два элемента и заменяем их на antelope:

const animals = ['lion', 'elephant', 'zebra', 'hippo', 'giraffe'];
animals.splice(1, 2, 'antelope'); // ["lion", "antelope", "hippo", "giraffe"]

Мы можем установить второй параметр splice() равным 0, если мы хотим только добавить элемент, а не удалить его. Первый параметр становится порядковым номером, в который будет вставлен новый элемент.

animals.splice(1, 0, 'antelope'); // ["lion", "antelope", "elephant", "zebra", "hippo", "giraffe"]

Это делает splice() более мощным, чем использование методов push() или unshift(), поскольку мы можем указать номер индекса.

Методы доступа

Методы доступа возвращают новое значение или представление массива и не изменяют оригинал.

Мы рассмотрели метод доступа, когда использовали indexOf() для возврата индекса элемента. Если в массиве есть повторяющиеся элементы, JavaScript вернет индекс первого экземпляра элемента.

const animals = ['lion', 'elephant', 'zebra', 'hippo', 'giraffe', 'lion'];
animals.indexOf('lion'); // 0

Если нам нужно узнать индекс последнего экземпляра элемента, мы можем использовать метод lastIndexOf().

const animals = ['lion', 'elephant', 'zebra', 'hippo', 'giraffe', 'lion'];
animals.lastIndexOf('lion'); // 5

Мы используем метод filter() для создания нового массива элементов, передавая логику, реализованную в нашей функции. В следующем примере мы создаем массив названий животных, длина имени которого больше пяти.

const animals = ['lion', 'elephant', 'zebra', 'hippo', 'giraffe'];
const longAnimalNames = animals.filter(animal => animal.length > 5);
console.log(longAnimalNames); // ["elephant", "giraffe"]

Чтобы скопировать часть массива в новый массив, мы используем метод slice(). Метод slice() принимает два параметра:

1. Начальный индекс

2. Конечный индекс (не включительно)

Исходный массив остается неизменным.

const animals = ['lion', 'elephant', 'zebra', 'hippo', 'giraffe'];
console.log(animals.slice(1, 3)); // ["elephant", "zebra"]
console.log(animals.slice(2, 4)); // ["zebra", "hippo"]
console.log(animals.slice(2)); // ["zebra", "hippo", "giraffe"]

В последнем примере мы передали только одно число в качестве параметра. Если мы опустим конечный параметр, по умолчанию слайс будет извлекаться до конца массива.

Сводка

  • Массив — это тип глобального объекта, который может использоваться для хранения данных и состоит из упорядоченной коллекции или списка элементов.
  • Массивы не содержат ключей, вместо этого они индексируются целочисленными значениями, начинающимися с 0.
  • Порядок свойств в массиве сохраняется
  • Мы можем создавать новые массивы, используя синтаксис литерала массива или конструктор массива.
  • Чтобы получить доступ к элементу в массиве, нам нужно указать порядковый номер элемента в квадратных скобках.
  • Чтобы добавить элементы в массив, мы можем использовать методы push() , unshift() или splice().
  • Чтобы изменить элементы в массиве, мы используем оператор присваивания или splice()
  • Методы-мутаторы изменяют исходный массив
  • Методы доступа возвращают новое значение или представление массива и не изменяют исходный массив.
  • Мы можем использовать метод slice() для копирования части массива в новый массив.