Массивы в JavaScript (array)

Массивы в JavaScript (array)

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

Предположим, вы хотите сохранить название цветов в своем коде JavaScript. Хранение имен цветов одно за другим в переменной может выглядеть примерно так:

var color1 = "Red";
var color2 = "Green";
var color3 = "Blue";

Но что произойдет, если вам нужно хранить названия регионов или городов страны в переменных, и на этот раз их будет не три, а сотни. Довольно сложно и неэффективно хранить каждый из них в отдельной переменной. Кроме того, одновременное использование большого количества переменных и отслеживание их всех будет очень сложной задачей для вас, как для программиста. И тут на помощь приходят массивы. Массивы решают эту проблему, предоставляя упорядоченную структуру для хранения нескольких значений или группы значений.

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

Самый простой способ создать массив в JavaScript — заключить список значений в квадратные скобки ([]), разделенный запятыми, как показано в следующем примере:

var myArray = [element0, element1, ..., elementN];

Массив также можно создать с помощью конструктора Array(), как показано в следующем примере. Однако для простоты рекомендуется использовать предыдущий синтаксис.

var myArray = new Array(element0, element1, ..., elementN);

Вот несколько примеров массивов в JavaScript:

var colors = ["Red", "Green", "Blue"]; 
var fruits = ["Apple", "Banana", "Mango"];
var cities = ["Moscow", "Paris", "New York"];
var person = ["Vasya", "Pupkin", 33];

Доступ к элементам массива

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

Индексы массива начинаются с нуля. Это означает, что первый элемент массива хранится с индексом 0, а не с 1, второй элемент хранится с индексом 1 и т.д. Индексы массива начинаются с 0 и доходят до значения количества элементов минус 1. Таким образом, массив из пяти элементов будет иметь индексы от 0 до 4.

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

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

document.write(fruits[0]); // Результат: Apple
document.write(fruits[1]); // Результат: Banana
document.write(fruits[2]); // Результат: Mango
document.write(fruits[fruits.length - 1]); // Результат: Papaya

Как узнать длину массива

Свойство length возвращает длину массива, которая представляет собой общее количество элементов, содержащихся в массиве. Длина массива всегда больше, чем индекс любого его элемента и на единицу больше числового индекса его последнего элемента.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits.length); // Результат: 5

Перебор элементов массива (цикл по массиву)

Вы можете использовать цикл for для доступа к каждому элементу массива в последовательном порядке, например так:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Перебор элементов массива
for(var i = 0; i < fruits.length; i++) { 
  document.write(fruits[i] + "<br>"); // Вывод элемента массива
}

Как добавить новые элементы в массив

Чтобы добавить новый элемент в конец массива, просто используйте метод push(), например:

var colors = ["Red", "Green", "Blue"]; 
colors.push("Yellow");

document.write(colors); // Результат: Red,Green,Blue,Yellow
document.write(colors.length); // Результат: 4

Точно так же, чтобы добавить новый элемент в начале массива, используйте метод unshift(), например:

var colors = ["Red", "Green", "Blue"]; 
colors.unshift("Yellow");

document.write(colors); // Результат: Yellow,Red,Green,Blue
document.write(colors.length); // Результат: 4

Так же, вы можете добавить несколько элементов в начало или конец массива. Для этого, разделите значения запятыми передавая их методам push() или unshift().

Как удалить элементы из массива

Чтобы удалить последний элемент из массива, вы можете использовать метод pop(). Этот метод возвращает значение, которое было удалено. Вот пример:

var colors = ["Red", "Green", "Blue"];
var last = colors.pop();

document.write(last); // Результат: Blue
document.write(colors.length); // Результат: 2

Точно так же вы можете удалить первый элемент из массива, используя метод shift(). Этот метод также возвращает значение, которое было удалено. Пример:

var colors = ["Red", "Green", "Blue"];
var last = colors.shift();

document.write(last); // Результат: Red
document.write(colors.length); // Результат: 2

Добавление или удаление элементов массива в любой позиции

Метод splice() — это очень универсальный метод массива, который позволяет добавлять или удалять элементы любого индекса, используя синтаксис arr.splice(startIndex, deleteCount, elem1, …, elemN).

Этот метод принимает три параметра: первый параметр — это индекс, с которого начинается объединение массива (обязателен); второй параметр — количество удаляемых элементов (используйте 0, если вы не хотите удалять какие-либо элементы) (параметр необязательный), и третий параметр представляет собой набор заменяющих элементов, он также является необязательным. В следующем примере показано, как это работает:

var colors = ["Red", "Green", "Blue"];
var removed = colors.splice(0,1); // Удалить первый элемент

document.write(colors); // Результат: Green,Blue
document.write(removed); // Результат: Red (массив из одного элемента)
document.write(removed.length); // Результат: 1

removed = colors.splice(1, 0, "Pink", "Yellow"); // Вставить два элемента начиная с позиции 1
document.write(colors); // Результат: Green,Pink,Yellow,Blue
document.write(removed); // Пустой массив
document.write(removed.length); // Результат: 0

removed = colors.splice(1, 1, "Purple", "Voilet"); // Вставить два элемента, удалить один
document.write(colors); // Результат: Green,Purple,Voilet,Yellow,Blue
document.write(removed); // Результат: Pink (массив из одного элемента)
document.write(removed.length); // Результат: 1

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

Как создать строку из массива

Могут быть ситуации, когда вы просто хотите создать строку, объединив элементы массива. Для этого вы можете использовать метод join(). Этот метод принимает необязательный параметр, который является строкой-разделителем, которая добавляется между каждым элементом. Если вы опустите разделитель, то JavaScript будет использовать запятую (,) по умолчанию. В следующем примере показано, как это работает:

var colors = ["Red", "Green", "Blue"];

document.write(colors.join()); // Результат: Red,Green,Blue
document.write(colors.join("")); // Результат: RedGreenBlue
document.write(colors.join("-")); // Результат: Red-Green-Blue
document.write(colors.join(", ")); // Результат: Red, Green, Blue

Вы также можете преобразовать массив в строку через запятую, используя toString(). Этот метод не принимает параметр разделителя, как это делает join(). Пример работы метода toString():

var colors = ["Red", "Green", "Blue"];
document.write(colors.toString()); // Результат: Red,Green,Blue

Как извлечь часть массива

Если вы хотите извлечь часть массива (то есть подмассив), но оставить исходный массив без изменений, вы можете использовать метод slice(). Этот метод принимает 2 параметра: начальный индекс (индекс, с которого начинается извлечение) и необязательный конечный индекс (индекс, перед которым заканчивается извлечение), например arr.slice(startIndex, endIndex). Пример:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var subarr = fruits.slice(1, 3);
document.write(subarr); // Результат: Banana,Mango

Если параметр endIndex опущен — извлекаются все элементы до конца массива. Вы также можете указать отрицательные индексы или смещения — в этом случае метод slice() извлекает элементы из конца массива, а не из начала.

Как объединить два или более массива

Метод concat() может использоваться для объединения двух или более массивов. Этот метод не изменяет существующие массивы, вместо этого он возвращает новый массив. Например:

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];

// Создание нового массива animals путем объединения двух массивов pets и wilds
var animals = pets.concat(wilds); 
document.write(animals); // Результат: Cat,Dog,Parrot,Tiger,Wolf,Zebra

Метод concat() может принимать любое количество аргументов массива, поэтому вы можете создать массив из любого количества других массивов.

Поиск по массиву

Если вы хотите найти в массиве определенное значение, вы можете просто использовать indexOf() и lastIndexOf(). Если значение найдено, оба метода возвращают индекс, представляющий элемент массива. Если значение не найдено, возвращается -1. Метод indexOf() возвращает первый индекс, тогда как lastIndexOf() возвращает последний.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

document.write(fruits.indexOf("Apple")); // Результат: 0
document.write(fruits.indexOf("Banana")); // Результат: 1
document.write(fruits.indexOf("Pineapple")); // Результат: -1

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

Вы также можете использовать метод includes(), чтобы узнать, содержит ли массив определенный элемент или нет. Этот метод принимает те же параметры, что и методы indexOf() и lastIndexOf(), но вместо номера индекса возвращает true или false. Например:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];

document.write(arr.includes(1)); // Результат: true
document.write(arr.includes(6)); // Результат: false

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

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];

var result = arr.find(function(element) {
  return element > 4;
});
document.write(result); // Результат: 5

Есть еще один метод, похожий на find(), это метод findIndex(), который возвращает индекс найденного элемента в массиве вместо его значения.

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

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

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];

var result = arr.filter(function(element) {
  return element > 4;
});
document.write(result); // Результат: 5,7
document.write(result.length); // Результат: 2

Источник

Просмотров:

Добавить комментарий