Методы массивов

Язык JavaScript предоставлет богатые возможности для работы с массивами, которые реализуются с помощью методов объекта Array.

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

push()

Метод добавляет элемент в конец массива пример:

const people = [];
people.push("Tom");
people.push("Sam");
people.push("Bob","Mike");
console.log("В массиве people элементов: ", people.length);
// ["Tom", "Sam", "Bob", "Mike"]
console.log(people);

unshift()

Метод добавляет новый элемент в начало массива пример:

const people = ["Tom", "Sam", "Bob"];
people.unshift("Alice");
// ["Alice", "Tom", "Sam", "Bob"]
console.log(people);

fill()

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

Заполнение всех элементов значением:

const people = ["Tom", "Sam", "Bob"];
people.fill("Vdim"); 
// ["Vdim", "Vdim", "Vdim"]
console.log(people);

Заполнение последних двух элементов:

const people = ["Tom", "Sam", "Bob"];
people.fill("Vdim", 1, 3);
// ["Tom", "Vdim", "Vdim"]
console.log(people);

Удаление из массива

pop()

Метод удаляет последний элемент из массива пример:

const people = ["Tom", "Sam", "Bob", "Mike"];
// извлекаем из массива последний элемент
const lastPerson = people.pop();  
// Mike
console.log(lastPerson );  
// ["Tom", "Sam", "Bob"]
console.log(people);

shift()

Метод извлекает и удаляет первый элемент из массива пример:

onst people = ["Tom", "Sam", "Bob", "Mike"];
// извлекаем из массива первый элемент
const firstPerson = people.shift();  
// Tom
console.log(firstPerson);  
// ["Sam", "Bob", "Mike"]
console.log(people);

splice()

Метод удаляет элементы с определенного индекса. Например, удаление элементов с третьего индекса пример:

const people = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const deleted = people.splice(3);
// ["Alice", "Kate"]
console.log(deleted);  
// ["Tom", "Sam", "Bill"]
console.log(people);

Метод озвращает удаленные элементы в виде нового массива.

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

const people = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const deleted = people.splice(-1);
// ["Kate"]
console.log(deleted);  
// ["Tom", "Sam", "Bill", "Alice"]
console.log(people);

Дополнительная версия метода позволяет задать количество элементов для удаления. Например, удалим с первого индекса три элемента:

const people = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const deleted = people.splice(1, 3);
// ["Sam", "Bill", "Alice"]
console.log(deleted);  
// ["Tom", "Kate"]
console.log(people);

Еще одна версия метода позволяет вставить вместо удаляемых элементов новые элементы:

const people = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const deleted = people.splice(1, 3, "Ann", "Bob");
// ["Sam", "Bill", "Alice"]
console.log(deleted);  
// ["Tom", "Ann", "Bob", "Kate"]
console.log(people);

В данном случае удаляем три элемента с 1-го индекса и вместо них вставляем два элемента.

delete

Удаляет второй элемент массива:

  const people = ["Tom", "Sam", "Bob"];
delete people[1];
// ["Tom", "Bob"]
console.log(people);

Превращение массива

split()

Метод превращает строку в массив пример:

let str = "abcde";
let arr = str.split("");
// ["a", "b", "c", "d", "e"]
console.log(arr);

join()

Метод объединяет все элементы массива в одну строку, используя определенный разделитель, который передается через параметр пример:

const people = ["Tom", "Sam", "Bob"];
const peopleToString = people.join("; ");
// Tom; Sam; Bob
console.log(peopleToString);

slice()

Копирование массива может быть поверхностным или неглубоким shallow copy и глубоким deep copy.

При неглубоком копировании достаточно присвоить переменной значение другой переменной, которая хранит массив пример:

const users = ["Tom", "Sam", "Bill"];
// ["Tom", "Sam", "Bill"]
console.log(users);  
// неглубокое копирование
const people = users;  
// изменяем второй элемент
people[1] = "Mike";  
// ["Tom", "Mike", "Bill"]
console.log(users);

В данном случае переменная people после копирования будет указывать на тот же массив, что и переменная users. Поэтому при изменении элементов в people, изменятся элементы и в users, так как фактически это один и тот же массив.

Такое поведение не всегда является желательным. Например, мы хотим, чтобы после копирования переменные указывали на отдельные массивы. И в этом случае можно использовать глубокое копирование с помощью метода slice():

const users = ["Tom", "Sam", "Bill"];
// ["Tom", "Sam", "Bill"]
console.log(users);  
// глубокое копирование
const people = users.slice();  
// изменяем второй элемент
people[1] = "Mike";  
// ["Tom", "Sam", "Bill"]
console.log(users);  
// ["Tom", "Mike", "Bill"]
console.log(people);

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

Также метод позволяет скопировать часть массива. Для этого он принимает два параметра:

slice(начальный_индекс, конечный_индекс)

Первый параметр указывает на начальный индекс элемента, с которого которые используются для выборки значений из массива. А второй параметр - конечный индекс, по который надо выполнить копирование. Например, выберем в новый массив элементы, начиная с 1 индекса по индекс 4 не включая:

const users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const people = users.slice(1, 4);
// ["Sam", "Bill", "Alice"]
console.log(people);

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

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

const users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
// со второго индекса до конца
const people = users.slice(2);  
// ["Bill", "Alice", "Kate"]
console.log(people);

sort()

Метод сортирует массив по возрастанию:

const people = ["Tom", "Sam", "Bob"];
people.sort();
// ["Bob", "Sam", "Tom"]
console.log(people);

По умолчанию метод рассматривает элементы массива как строки и сортирует их в алфавитном порядке, это может привести к неожиданным результатам:

const numbers = [200, 15, 5, 35];
numbers.sort();
// [15, 200, 35, 5]
console.log(numbers);

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

const numbers = [200, 15, 5, 35];
numbers.sort( (a, b) =>  a - b);
// [5, 15, 35, 200]
console.log(numbers);

Функция сортировки получает два рядом расположенных элемента массива. Она возвращает положительное число, если первый элемент должен находится перед вторым элементом. Если первый элемент должен располагаться после второго, то возвращается отрицательное число. Если элементы равны, возвращается 0.

reverse()

Метод переворачивает массив задом наперед пример:

const people = ["Tom", "Sam", "Bob"];
people.reverse();
// ["Bob", "Sam", "Tom"]
console.log(people);

concat()

Метод служит для объединения массивов. В качестве результата он возвращает объединенный массив пример:

const men = ["Tom", "Sam", "Bob"];
const women = ["Alice", "Kate"];
const people = men.concat(women);
// ["Tom", "Sam", "Bob", "Alice", "Kate"]
console.log(people);

Проверка наличия и поиск в массиве

indexOf() и lastIndexOf()

Методы indexOf() пример и lastIndexOf() пример возвращают индекс первого и последнего включения элемента в массиве:

const people = ["Tom", "Sam", "Bob", "Tom", "Alice", "Sam"];
const firstIndex = people.indexOf("Tom");
const lastIndex = people.lastIndexOf("Tom");
const otherIndex = people.indexOf("Mike");
// 0
console.log(firstIndex);  
// 3
console.log(lastIndex);   
// -1
console.log(otherIndex);

firstIndex имеет значение 0, так как первое включение строки Tom в массиве приходится на индекс 0, а последнее на индекс 3.

Если же элемент отсутствует в массиве, то в этом случае методы indexOf() и lastIndexOf() возвращают значение -1.

includes()

Метод проверяет, есть ли в массиве значение переданное в метод через параметр. Если такое значение есть, то метод возвращает true, если значения в массиве нет, то возвращается false:

const people = ["Tom", "Sam", "Bob", "Tom", "Alice", "Sam"];
// true - Tom есть в массиве
console.log(people.includes("Tom"));  
// false - Kate нет в массиве
console.log(people.includes("Kate"));

В качестве второго параметра метод принимает индекс, с которого надо начинать поиск:

const people = ["Tom", "Sam", "Bob", "Tom", "Alice", "Sam"];
// true
console.log(people.includes("Bob", 2));  
// false
console.log(people.includes("Bob", 4));

В данном случае мы видим, при поиске со 2-го индекса в массиве есть строка Bob, тогда как начиная с 5-го индекса данная строка отсутствует. Если если этот параметр не передается, то по умолчанию поиск идет с 0-го индекса.

При передаче отрицательного значения поиск идет с конца:

const people = ["Tom", "Sam", "Bob", "Tom", "Alice", "Sam"];
// false - 2-й индекс с конца
console.log(people.includes("Tom", -2)); 
// true - 3-й индекс с конца 
console.log(people.includes("Tom", -3));

find()

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

const numbers = [1, 2, 3, 5, 8, 13, 21, 34];
// получаем первый элемент, который больше 10
let found = numbers.find(n => n > 10 );
// 13
console.log(found);

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

Метод findIndex также принимает функцию условия, только возвращает индекс первого элемента массива, который соответствует этому условию, если элемент не найден, то возвращается число -1:

const numbers = [1, 2, 3, 5, 8, 13, 21, 34];
// получаем индекс первого элемента, который больше 10
let foundIndex = numbers.findIndex(n => n > 10 );
// 5
console.log(foundIndex);

filter()

Метод filter() пример, как some() пример и every() пример, принимает функцию условия. Но при этом возвращает массив тех элементов, которые соответствуют этому условию:

const numbers = [ 1, -12, 8, -4, 25, 42];
const filteredNumbers = numbers.filter(n => n > 0);
// [1, 8, 25, 42]
console.log(filteredNumbers);