Массивы в JavaScript: что это и как с ними работать

Массив в JavaScript — это упорядоченный список элементов с указанным индексом (ключом к ним). Когда мы хотим сохранить список определенных элементов, а затем получить к ним доступ с помощью одной переменной, именно тогда применяем массив. В отличие от остальных языков, где массив — это ссылка на несколько переменных, в JavaScript — это единственная переменная, в которой может храниться несколько элементов.

Особенности массива в JS:

• В массиве хранятся значения смешанных типов. То есть, массив может содержать в себе числа, строки и объекты других массивов.
• У длины массива — динамический характер. Нам не надо заранее указывать размер массива — он меняется (увеличивается/уменьшается) автоматически.
• Его применяют для содержания нескольких значений в одной переменной.

Пара квадратных скобок [] обозначает массив, элементы разделяются запятыми (,). Положение элемента в массиве обозначается индексом.

Важно! Отсчет индекса начинается с 0 и дальше увеличивается на единицу. Число элементов в массиве определяет его длину.

Допустим, есть список каких-то фруктов, которые мы запишем в отдельные переменные:

let fruit1 = "Ananas";

let fruit2 = "Orange";

let fruit3 = "Lemon";

При условии, что фрукта всего три, задача легко решается. А что, если фруктов несколько сотен, а нам нужен конкретный? Для этого используют массив, когда с помощью индекса (ключа) мы можем получить доступ к нужному элементу.

const fruits = ["Ananas","Orange","Lemon"];

fruit1[0]; // "Ananas"   фрукт под индексом 0 это Ananas

fruit3[2]; //"Lemon"    фрукт под индексом 2 это Lemon

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

const fruits = ["Ananas","Orange","Lemon"];

const len = fruits.length;

 fruits[len - 1]; // "Lemon"fruits[len - 2]; // "Orange"

Интересно, что у массивов в JS нет фиксированной длины. Мы можем изменить ее в любой момент.

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

В JavaScript есть несколько способов формирования массива, самый простой — присвоить переменной значение массива, как мы это сделали ранее:

const fruit = ["Ananas","Mango","Lemon"];

Пробелы и перенос строки не важны. Наш пример можно записать и так:

const fruit = [

   "Ananas",

   "Orange",

   "Lemon"

];

Также можно создать массив, а затем представить элементы:

const fruit = [];
fruit[0]= "Ananas";
fruit[1]= "Orange";
fruit[2]= "Lemon";

Можно использовать Array:

const fruit = new Array("Ananas", "Orange", "Lemon");

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

let fruit  = ["Ananas", 100, "2Orange", "Lemon", true];

Можно поменять местами значения двух переменных:

let fruit1 = 'Ananas';

let fruit2 = 'Mango';

[fruit1,fruit2] =[fruit2, fruit1];

console.log (fruit1); //'Mango'

 console.log (fruit2); // 'Ananas'

Когда нам не нужен какой-то элемент, мы можем его пропустить:

let [ananas, ,lemon] = ['Ananas','Mango','Lemon'];

 console.log(ananas); // "Ananas"console.log(lemon); // "Lemon"

Бывает так, что у элемента массива нет значения, тогда его назначают:

let [ananas, lemon = 'Lemon'] = ['Ananas'];

console.log (ananas); // 'Ananas'

console.log (lemon); // 'Lemon'

Интересно, что в массив может быть вложен еще один массив:

let fruits = ['Ananas', 'Mango', 'Lemon', ['Potato', 'Onion', 'Tomato']];

Как нам вывести Tomato на консоль? Применим индекс!

frits [3] [2] // 'Tomato'

Основы для работы с массивами в JavaScript

Основные методы работы с массивами в JS:

• map() ;
• reduce() ;
• filter().

А также не обойтись без оператора spread.

Каждый из перечисленных методов перебирает массив, выполняет определенные модификации или вычисления.

К map() обращаются для создания нового массива из уже готового, применяя при этом функцию к каждому из элементов первого массива:

var names = [ 'Katya', 'Petro', 'Ivan']

var nameLengths = names.map (function (name) {

return name.length;

// результат – массив с длинами

alert (nameLenghts) ; // 5,5,4

Метод filter() фильтрует элементы по условию, указанному в функции:

const fruits = ['Ananas', 'Lemon', 'Orange', 'Lime', 'Plum'];

const result = fruits.filter(word => fruit.length <5);

console.log(result);

Array ["Plum", "Lime"]

Мы задали условие, чтобы из массива в консоли отобразились слова, длина которых меньше 5 символов. В итоге мы получаем два слова — Plum, Lime.

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

var salary = [200, 310, 560];

var sum = salary.reduce (function (total, amont) {

return total+amount});

sum// 1070

С помощью reduce() мы сократили значения трех элементов к одному, то есть к сумме 1070.

Полезный оператор для добавления элементов в массивы, объединения массивов или объектов — spread(…). Происходит своего рода «растягивание» элементов:

const bigfruits = ['Ananas', 'Waterlemon', 'Melon'];

const smallfruits =  ['Plum', 'Lime', …  bigfruits];

// ['Plum', 'Lime', 'Ananas', 'Waterlemon', 'Melon' ]

// Массив bigfruits не меняется

В smallfruits добавились значения из bigfruits, но при этом bigfruits не изменился — ни его длина, ни объекты.

Такоже в JS выделяют такие методы:

• Array.isArray — помогает узнать, является ли заданное значение массивом. Мы получим true, если является, или false, если нет.
• Array.isArray (obj), где obj  — значение/объект, который необходимо проверить.

Например:

Array.is Array (['Ananas', 'Orange']);// получим trueArray.isArray ('Ananas');// получим false;

• Array.from () — возвращает объект Array из любого объекта со свойством length или итерируемого объекта.

Например:

Array.from ('fruit')

// ['f', 'r', 'u', 'i', ' t' ]

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

Например:

Array.of (element0 [, element1 [, .. [, elementX]]])

Array.of(100, true, 'Ananas', {'name': 'Ivan'}) (4) [100, true, “Ananas”, {}] Element at index 0: 100Element at index 1:trueElement at index 2: “Ananas”Element at index 3: {name: “Ivan”}) length :4

Методы класса Array

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

Каждый метод имеет уникальную функцию, которая дает возможность  изменять массивы.

Метод join()

Метод  join() возвращает новую строку, где объединены все элементы массива. Разделитель элементов по умолчанию — запятая (,). Этот метод не меняет первоначальный массив.

Например:

const fruits = ['Ananas', 'Lime', 'Lemon'];

console.log(fruits.join());

//в результатe: "Ananas, Lime, Lemon"

Метод reverse()

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

Например:

const fruits = ['Ananas', 'Lime', 'Orange'];

fruits.reverse ();

// возвращает ["Orange", "Lime", "Ananas"]

Метод sort()

Самым используемым методом стал sort(). Он сортирует элементы по возрастанию или убыванию, по буквам. По умолчанию сортировка происходит по возрастанию и алфавиту. Метод sort() трансформирует исходный массив.

Например:

const fruits = ['Ananas', 'Lime', 'Lemon'];

fruits.sort ();

 // возвращает ["Ananas", "Lemon", "Lime"]

Метод concat()

Метод concat() объединяет один или несколько массивов, затем возвращает объединенный массив. Не меняет существующие массивы.

Объединим массивы:

const fuits = ['Ananas', 'Lime', 'Lemon'];const vegatables = ['Potato', 'Onion', 'Carrot'];const merged = fruits.concat(vegatables); console.log(merged); // ["Ananas", "Lime", "Lemon", "Potato", "Onion", "Carrot"];console.log(first); // ["Ananas", "Lime", "Lemon"]console.log(second); // ["Potato", "Onion", "Carrot"]

Метод slice()

Скопировать и клонировать массив в новый массив можно, применив slice().

Например:

const fruits = ['Ananas', 'Lemon', 'Lime', 'Orange'];

console.log(fruits.slice(2));

// результат: Array ["Lime", "Orange"]

Первоначальный массив не модифицируется.

В качестве альтернативы можно использовать оператор spread(…).

Метод splice()

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

Например, добавим элемент Lime по индексу 1 без удаления остальных элементов:

const fruits = ['Ananas', 'Orange', 'Plum'];

names.splice (1, 0, 'Lime');

console.log (fruits); // [“Ananas”, “Lime”, “Orange”, “Plum”]

Методы push() и pop()

push() — вставить элемент в конец массива.

pop() — исключает элемент из конца массива.

Метод push() добавляет новые элементы в конец массива.

Так, длина массива меняется.

Добавим Lime к нашим фруктам:

const fruits = ["Ananas", "Orange", "Lemon", "Plum"];

fruits.push("Lime");

//Новый состав фруктов

 ["Ananas", "Orange", "Lemon", "Plum","Lime"];

Мы научились добавлять, а как же удалить элементы из массива в JS?

Один  из самых легких способов — использование метода pop(). При его вызове удаляется элемент из конца массива.

Например:

const fruits = ["Ananas", "Orange", "Lemon", "Plum"];
fruits.pop(); // удаляем сливу/Plum

Получаем новый состав:

["Ananas", "Orange", "Lemon"];

Методы unshift() и shift()

Метод unshift() добавляет новые элементы, но уже в начало массива, и меняет его длину.

const fruits = ["Ananas", "Orange", "Lemon", "Plum"];

fruits.unshift("Mango");

Теперь фруктов стало больше:

[("Mango","Ananas", "Orange", "Lemon", "Plum"];

Метод shift() убирает первый элемент массива (длина массива меняется).

var fruits = ["Ananas", "Orange", "Lemon", "Plum"];
fruits.shift();

Новый состав:

["Orange", "Lemon", "Plum"];

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