Работа с массивами в JS Array.prototype

Array.prototype в JavaScript

Array.prototype в JavaScript относится к прототипу конструктора Array. Прототип - это механизм, благодаря которому объекты в JavaScript наследуют функции и свойства. Все методы массива, такие как concat(), forEach(), map() и так далее, являются свойствами объекта Array.prototype.

Когда вы создаете массив в JavaScript, он наследует свойства и методы из Array.prototype. Это значит, что все экземпляры массивов имеют доступ к этим методам. Например, когда вы вызываете myArray.map(), метод map на самом деле находится в Array.prototype, а не в самом объекте myArray.

Таким образом, Array.prototype служит как бы "шаблоном" для всех массивов. Расширение Array.prototype (например, добавление новых методов) повлияет на все массивы в контексте программы, что может быть как полезным, так и потенциально опасным, если изменения внесены неправильно.

Список методов

concat() - соединяет два массива или больше в один.
copyWithin() - копирует последовательность элементов массива внутри него же.
entries() - возвращает новый объект итератор массива с парами ключ/значение.
every() - проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции.
fill() - заполняет все элементы массива от начального до конечного индексов одним значением.
filter() - создаёт новый массив со всеми элементами, прошедшими проверку, заданную в передаваемой функции.
find() - возвращает значение первого элемента в массиве, которое удовлетворяет условию поиска.
findIndex() - возвращает индекс в массиве первого элемента, который удовлетворяет условию поиска.
flat() - возвращает новый массив с разглаженными вложенными массивами.
flatMap() - сначала применяет функцию к каждому элементу, а затем разглаживает результат в новый массив.
forEach() - выполняет заданную функцию один раз для каждого элемента в массиве.
includes() - определяет, содержит ли массив определённый элемент.
indexOf() - возвращает первый индекс, по которому данный элемент может быть найден в массиве, или -1, если такого индекса нет.
isArray() - определяет, является ли переданное значение массивом.
join() - соединяет все элементы массива в строку.
keys() - возвращает новый объект итератор массива, который содержит ключи для каждого индекса в массиве.
lastIndexOf() - возвращает последний индекс, по которому данный элемент может быть найден в массиве, или -1, если индекса нет.
map() - создаёт новый массив с результатом вызова указанной функции для каждого элемента массива.
pop() - удаляет последний элемент из массива и возвращает его значение.
push() - добавляет один или более элементов в конец массива и возвращает новую длину массива.
reduce() - применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению.
reduceRight() - применяет функцию к аккумулятору и каждому значению массива (справа-налево), сводя его к одному значению.
reverse() - меняет порядок элементов в массиве на обратный.
shift() - удаляет первый элемент из массива и возвращает его значение.
slice() - возвращает новый массив, содержащий копию части исходного массива.
some() - проверяет, удовлетворяет ли какой-либо элемент массива условию, заданному в передаваемой функции.
sort() - сортирует элементы массива и возвращает массив.
splice() - изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые.
toLocaleString() - возвращает строку с локализованным представлением элементов массива.
toString() - возвращает строковое представление массив

concat() - соединяет два или более массива в один.

Простой пример

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let combinedArray = array1.concat(array2);
console.log(combinedArray); // Вывод: [1, 2, 3, 4, 5, 6]

В этом примере мы соединили два массива чисел в один массив с помощью concat().

Сложный пример

let array1 = [1, 2, [3, 4]]
let array2 = [5, [6, 7]]
let array3 = [{ a: 8 }, { b: 9 }]
let combinedArray = array1.concat(array2, array3)
console.log(combinedArray)
// Вывод: [1, 2, [3, 4], 5, [6, 7], { a: 8 }, { b: 9 }]

В более сложном примере мы соединяем массивы, содержащие вложенные массивы и объекты. concat() не разглаживает массивы, оставляя структуру вложенности как есть.

copyWithin() - копирует последовательность элементов массива внутри него же.

Простой пример

let array = ['a', 'b', 'c', 'd', 'e'];
array.copyWithin(0, 3, 4);
console.log(array); // Вывод: ['d', 'b', 'c', 'd', 'e']

В этом примере мы копируем элемент с индекса 3 ('d') на позицию с индексом 0. Остальная часть массива остается неизменной.

По сути, этот метод возьмет элемент на позиции 3 и вставит его на позицию 0, заменив тем элементом, который был на позиции 0. Если в массиве будет больше элементов после индекса 3, они сдвинутся на одну позицию вправо, но поскольку копирование здесь идет только до позиции 4, это фактически затронет только один элемент.

Сложный пример

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
array.copyWithin(1, 6);
console.log(array); // Вывод: [1, 7, 8, 9, 5, 6, 7, 8, 9]

Здесь мы копируем элементы начиная с индекса 6 (значение 7) в позицию, начиная с индекса 1. Метод не копирует больше элементов, чем размер целевого сегмента. Копирование происходит в место начиная с индекса 1 и далее до конца массива, поэтому получаем повторение элементов 7, 8, 9.

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

entries() - возвращает новый объект итератор массива с парами ключ/значение.

Простой пример

let array = ['a', 'b', 'c'];
let iterator = array.entries();

console.log(iterator.next().value); // Вывод: [0, 'a']
console.log(iterator.next().value); // Вывод: [1, 'b']
console.log(iterator.next().value); // Вывод: [2, 'c']

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

Сложный пример

let array = ['a', 'b', 'c'];
let entries = array.entries();

for (let e of entries) {
  console.log(`Индекс: ${e[0]}, Значение: ${e[1]}`);
}
// Вывод:
// Индекс: 0, Значение: a
// Индекс: 1, Значение: b
// Индекс: 2, Значение: c

В более сложном примере мы используем цикл for...of для итерации по объекту итератора, который возвращает метод entries(), что позволяет нам выполнить какие-либо действия для каждой пары ключ/значение массива.

В JavaScript объект итератора — это объект, который предоставляет метод next(), возвращающий следующий элемент последовательности. Этот механизм определён в спецификации ECMAScript и является частью протокола итерации.

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

every() - проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции.

Простой пример

let array = [1, 30, 39, 29, 10, 13];
let isBelowThreshold = (currentValue) => currentValue < 40;
console.log(array.every(isBelowThreshold)); // Вывод: true

Здесь функция isBelowThreshold проверяет, меньше ли текущее значение 40. Метод every() возвращает true, так как каждый элемент массива удовлетворяет этому условию.

Если хотя бы один элемент массива не удовлетворяет условию то вернется false.

Сложный пример

let array = [1, 30, 39, 29, 10, 13]

function checkValue(value, index, arr) {
    console.log(`Проверка элемента на индексе ${index} со значением ${value}`)
    return value < 40 && arr.length < 10
}

console.log(array.every(checkValue)) // Вывод: true

В этом сложном примере, функция checkValue дополнительно проверяет размер массива, чтобы он был меньше 10. Функция также логирует каждую проверку, что позволяет нам видеть процесс проверки каждого элемента. every() возвращает true, так как и условие по значению, и условие по размеру массива удовлетворены для всех элементов.

Метод every() очень удобен для валидации всего массива по определенному критерию.

fill() - заполняет все элементы массива от начального до конечного индексов одним значением.

Простой пример

let array = [1, 2, 3, 4];
array.fill(0);
console.log(array); // Вывод: [0, 0, 0, 0]

Здесь метод fill() используется для заполнения всего массива нулями, заменяя все существующие элементы.

Сложный пример

let array = [1, 2, 3, 4, 5, 6];
array.fill('заполнитель', 2, 5);
console.log(array); // Вывод: [1, 2, "заполнитель", "заполнитель", "заполнитель", 6]

В этом примере массив заполняется строкой 'заполнитель' начиная с индекса 2 до индекса 5 (не включая его). Это показывает, что метод fill() может заполнять часть массива, начиная и заканчивая на индексах, которые мы укажем в параметрах.

Метод fill() часто используется для инициализации или очистки массива с определенными значениями.

filter() - создаёт новый массив со всеми элементами, прошедшими проверку, заданную в передаваемой функции.

Простой пример

let numbers = [1, 2, 3, 4, 5]
let evenNumbers = numbers.filter(n => n % 2 === 0)
console.log(evenNumbers) // Вывод: [2, 4]

В этом примере метод filter() используется для создания нового массива evenNumbers, содержащего только четные числа из исходного массива numbers.

Сложный пример

let products = [
    { id: 1, name: 'Клавиатура', price: 1500 },
    { id: 2, name: 'Мышь', price: 700 },
    { id: 3, name: 'Монитор', price: 8000 },
    { id: 4, name: 'Ноутбук', price: 30000 }
]

let affordable = products.filter(product => product.price <= 10000)
console.log(affordable)
// Вывод:
// [
//   { id: 1, name: 'Клавиатура', price: 1500 },
//   { id: 2, name: 'Мышь', price: 700 },
//   { id: 3, name: 'Монитор', price: 8000 }
// ]

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

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

find() - возвращает значение первого элемента в массиве, которое удовлетворяет условию поиска.

Простой пример

let array = [5, 12, 8, 130, 44];
let found = array.find(element => element > 10);
console.log(found); // Вывод: 12

Метод find() в этом случае ищет и возвращает первый элемент массива, который больше 10.

Сложный пример

let inventory = [
    { name: 'Яблоки', quantity: 2 },
    { name: 'Бананы', quantity: 0 },
    { name: 'Вишни', quantity: 5 }
]

function findCherries(fruit) {
    return fruit.name === 'Вишни'
}

console.log(inventory.find(findCherries)) // Вывод: { name: 'Вишни', quantity: 5 }

В этом более сложном примере find() используется для поиска объекта в массиве, у которого свойство name равно 'Вишни'. Мы передаём в метод find() функцию findCherries, которая определяет критерий поиска. В результате получаем объект с вишнями.

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

findIndex() - возвращает индекс в массиве первого элемента, который удовлетворяет условию поиска. Если элемент не найден, метод возвращает -1.

Простой пример

let numbers = [5, 12, 8, 130, 44];
let isLargeNumber = (element) => element > 13;
let index = numbers.findIndex(isLargeNumber);
console.log(index); // Вывод: 3

Здесь метод findIndex() используется для нахождения индекса первого элемента в массиве, который больше 13. В данном случае это число 130, которое находится на индексе 3.

Сложный пример

let people = [
    { name: 'Джон', age: 24 },
    { name: 'Диана', age: 19 },
    { name: 'Виктор', age: 31 },
    { name: 'Анна', age: 17 }
]

let index = people.findIndex(person => person.age < 18)
console.log(index) // Вывод: 3

В этом примере метод findIndex() используется для нахождения индекса первого человека в массиве, возраст которого меньше 18 лет. Функция, переданная в метод findIndex(), проверяет, удовлетворяет ли возраст (age) каждого объекта условию. Первым таким объектом является Анна с индексом 3.

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

flat() - создаёт новый массив, в который включены все элементы подмассивов заданного массива, соединённые в один массив.

Это метод "выравнивания" массивов. Уровень "выравнивания" можно указать как аргумент метода.

Простой пример

let arr1 = [1, 2, [3, 4]];
let flatArray = arr1.flat();
console.log(flatArray); // Вывод: [1, 2, 3, 4]

В этом случае, flat() без аргументов по умолчанию выравнивает массив на один уровень.

Сложный пример

let arr2 = [1, 2, [3, 4, [5, 6]]];
let flatDeepArray = arr2.flat(2);
console.log(flatDeepArray); // Вывод: [1, 2, 3, 4, 5, 6]

Здесь метод flat() вызывается с аргументом 2, что означает "выравнивание" до двух уровней вложенности. В результате получается одномерный массив.

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

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

Он объединяет в себе map() и flat().

Простой пример

let arr = [2, 3, 4];
let mappedAndFlattened = arr.flatMap(x => [x, x * 2]);
console.log(mappedAndFlattened); // Вывод: [2, 4, 3, 6, 4, 8]

В данном случае каждый элемент массива умножается на 2, а результат помещается в новый массив, после чего результат "сплющивается".

Сложный пример

let phrases = ["hello world", "the quick brown fox"];
let words = phrases.flatMap(phrase => phrase.split(" "));
console.log(words); // Вывод: ["hello", "world", "the", "quick", "brown", "fox"]

Здесь метод flatMap() используется для разбиения фраз на слова и удаления разделения на отдельные фразы. Каждая строка сначала преобразуется в массив слов (phrase.split(" ")), а затем массивы слов объединяются в один плоский массив.

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

forEach() - выполняет предоставленную функцию один раз для каждого элемента массива.

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

Простой пример

let array = ['яблоко', 'банан', 'апельсин']
array.forEach(function(element, index) {
    console.log(`Элемент на позиции ${index}: ${element}`)
})
// Выводит:
// "Элемент на позиции 0: яблоко"
// "Элемент на позиции 1: банан"
// "Элемент на позиции 2: апельсин"

Здесь функция, переданная в forEach(), выводит в консоль значение каждого элемента массива вместе с его индексом.

Сложный пример

let people = [
    { name: 'Джон', age: 24 },
    { name: 'Алиса', age: 30 },
    { name: 'Фрэнк', age: 28 }
]

people.forEach(person => {
    if (person.age >= 30) {
        console.log(`${person.name} может водить машину.`)
    } else {
        console.log(`${person.name} ещё молод для вождения машины.`)
    }
})
// Выводит:
// "Джон ещё молод для вождения машины."
// "Алиса может водить машину."
// "Фрэнк ещё молод для вождения машины."

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

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

includes() - это метод для проверки наличия определённого элемента в массиве.

Если элемент присутствует в массиве, метод возвращает true, в противном случае — false. Он имеет необязательный второй параметр, который указывает, с какого индекса начать поиск.

Простой пример

let fruits = ['яблоко', 'банан', 'манго'];
let hasBanana = fruits.includes('банан');
console.log(hasBanana); // Вывод: true

Этот пример просто проверяет, содержит ли массив fruits элемент 'банан'.

Сложный пример

let numbers = [1, 2, 3, 4, 5];
let includesTwo = numbers.includes(2); // true
let includesSeven = numbers.includes(7); // false
let includesTwoAfterIndex3 = numbers.includes(2, 3); // false

console.log(`Включает 2? ${includesTwo}`);
console.log(`Включает 7? ${includesSeven}`);
console.log(`Включает 2 после индекса 3? ${includesTwoAfterIndex3}`);

Здесь метод includes() используется для проверки наличия числа 2 в массиве numbers (что верно), наличия числа 7 (чего нет), и наличия числа 2, если начинать проверку с индекса 3 (чего нет, поскольку 2 находится на индексе 1).

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

indexOf() - метод, который возвращает первый индекс, по которому данный элемент может быть найден в массиве, или -1, если элемент не найден.

Он выполняет строгое сравнение (===), таким образом, если искать 0, метод не вернёт индекс для '0' (строка).

Простой пример

let animals = ['панда', 'коала', 'лама', 'коала'];
let index = animals.indexOf('коала');
console.log(index); // Вывод: 1

В этом примере метод indexOf() ищет индекс первого вхождения 'коала' и возвращает 1.

Сложный пример

let array = [2, 5, 9, 2];
let indexFirst = array.indexOf(2); // Выводит 0
let indexLast = array.indexOf(2, indexFirst + 1); // Выводит 3
let indexNotFound = array.indexOf(7); // Выводит -1

console.log(`Первое вхождение 2: ${indexFirst}`);
console.log(`Следующее вхождение 2 после первого: ${indexLast}`);
console.log(`Индекс 7 (не существующего элемента): ${indexNotFound}`);

Здесь indexOf() используется для нахождения индекса элемента 2 в массиве, начиная с начала массива и затем, используя второй параметр, начиная поиск с индекса, следующего за первым найденным индексом этого элемента. Поиск несуществующего элемента (7) возвращает -1.

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

isArray() - это статический метод объекта Array, который проверяет, является ли переданный аргумент массивом.

Это особенно полезно, поскольку массивы в JavaScript являются объектами, и typeof для массива возвращает 'object', что может ввести в заблуждение.

Простой пример

let array = [1, 2, 3];
let isItArray = Array.isArray(array);
console.log(isItArray); // Вывод: true

Здесь метод isArray() возвращает true, потому что array действительно является массивом.

Сложный пример

let object = { foo: 'bar' };
let number = 123;
let string = 'test';
let array = [1, 2, 3];

console.log(Array.isArray(object)); // Вывод: false
console.log(Array.isArray(number)); // Вывод: false
console.log(Array.isArray(string)); // Вывод: false
console.log(Array.isArray(array));  // Вывод: true

В этом примере Array.isArray() используется для проверки различных типов данных на предмет того, являются ли они массивами. Результаты соответствуют ожиданиям: только array является массивом.

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

join() - метод, который соединяет все элементы массива (или массивоподобного объекта) в строку.

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

Простой пример

let elements = ['Огонь', 'Вода', 'Воздух', 'Земля'];
let result = elements.join();
console.log(result); // Вывод: "Огонь,Вода,Воздух,Земля"

В этом примере метод join() объединяет элементы массива elements в одну строку, разделённую запятыми.

Сложный пример

let numbers = [2, 4, 6, 8, 10];
let hyphenResult = numbers.join(' - ');
console.log(hyphenResult); // Вывод: "2 - 4 - 6 - 8 - 10"

let complexArray = ['яблоки', null, undefined, 'бананы'];
let complexJoin = complexArray.join(' + ');
console.log(complexJoin); // Вывод: "яблоки +  +  + бананы"

В первом сложном примере элементы массива numbers соединяются через тире и пробелы, в результате получается строка "2 - 4 - 6 - 8 - 10". Во втором сложном примере null и undefined преобразуются в пустые строки, и в результате получается "яблоки + + + бананы".

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

keys() - метод, создающий новый объект итератора массива, который содержит ключи для каждого индекса в массиве.

Это позволяет вам итерировать по ключам массива (индексам) напрямую.

Простой пример

let fruits = ['яблоко', 'банан', 'киви']
let keys = fruits.keys()

for (let key of keys) {
    console.log(key) // Вывод: 0, затем 1, затем 2
}

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

Сложный пример

let fruits = ['яблоко', 'банан', 'киви', , 'ананас']
let keys = fruits.keys()
let entries = fruits.entries()

for (let key of keys) {
    console.log(`Ключ: ${key}, значение: ${fruits[key]}`)
}

for (let [index, element] of entries) {
    console.log(`[${index}]: ${element}`)
}

В сложном примере помимо ключей (индексов) массива fruits также используется итератор entries, который предоставляет пары ключ/значение. Это позволяет не только получить индексы, но и соответствующие им значения массива. Важно отметить, что если в массиве есть "дыры" (например, элементы не были присвоены), итератор keys() всё равно перечислит индексы этих "дыр", а вот значения по таким индексам будут undefined.

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

lastIndexOf() - метод массива, который возвращает последний индекс

По индексу которому заданный элемент может быть найден в массиве, или -1, если такого элемента нет. Поиск элемента идёт с конца массива к его началу.

Простой пример

let numbers = [1, 2, 3, 2, 1];
let lastIndex = numbers.lastIndexOf(2);
console.log(lastIndex); // Вывод: 3

Здесь lastIndexOf() возвращает 3, потому что последнее вхождение числа 2 находится на четвёртом месте в массиве (счёт начинается с нуля).

Сложный пример

let numbers = [2, 5, 9, 2];
let index = numbers.lastIndexOf(7);
console.log(index); // Вывод: -1

index = numbers.lastIndexOf(2, 3);
console.log(index); // Вывод: 3

index = numbers.lastIndexOf(2, 2);
console.log(index); // Вывод: 0

index = numbers.lastIndexOf(2, -2);
console.log(index); // Вывод: 0

index = numbers.lastIndexOf(2, -1);
console.log(index); // Вывод: 3

В этом сложном примере lastIndexOf() используется для поиска числа 7, которого нет в массиве, поэтому возвращается -1. Далее ищется число 2, начиная с разных позиций (в том числе и с использованием отрицательного индекса, что эквивалентно обратному отсчёту от конца массива). Это показывает гибкость метода lastIndexOf() в поиске элементов с учётом позиции начала поиска.

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

map() - метод создаёт новый массив с результатами вызова предоставленной функции для каждого элемента в исходном массиве.

Это мощный инструмент для трансформации данных в массиве.

Простой пример

let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
console.log(roots); // Вывод: [1, 2, 3]

Здесь map() используется для создания нового массива roots, где каждый элемент — это квадратный корень соответствующего элемента массива numbers.

Сложный пример

let numbers = [1, 2, 3, 4];
let squared = numbers.map(num => num * num);
console.log(squared); // Вывод: [1, 4, 9, 16]

let objects = [{ key: 'one', value: 1 }, { key: 'two', value: 2 }];
let inverted = objects.map(obj => ({ [obj.key]: obj.value }));
console.log(inverted); // Вывод: [{ one: 1 }, { two: 2 }]

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

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

pop() - это метод массивов, который удаляет последний элемент из массива и возвращает удаленный элемент.

Этот метод изменяет длину массива.

Простой пример

let fruits = ['яблоко', 'банан', 'киви'];
let lastFruit = fruits.pop();
console.log(lastFruit); // Вывод: "киви"
console.log(fruits); // Вывод: ["яблоко", "банан"]

В данном примере pop() удаляет последний элемент массива fruits, который является "киви", и возвращает его. Исходный массив после удаления содержит уже только два элемента.

Сложный пример

let myStack = []
myStack.push(1)
myStack.push(2)
myStack.push(3)
while (myStack.length > 0) {
    let value = myStack.pop()
    console.log('Обработка значения:', value)
}

В сложном примере мы создаем стек с помощью массива myStack и используем pop() для удаления и обработки каждого элемента в цикле while. Это показывает использование pop() в более динамичном контексте, например, когда используется структура данных стек.

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

push() - метод массивов, который добавляет один или несколько элементов в конец массива и возвращает новую длину массива.

Простой пример

let numbers = [1, 2, 3];
let newLength = numbers.push(4);
console.log(numbers); // Вывод: [1, 2, 3, 4]
console.log(newLength); // Вывод: 4

Сложный пример

let stack = []

// Добавление элементов в стек
stack.push('Диск 1')
stack.push('Диск 2', 'Диск 3')
console.log(stack) // Вывод: ['Диск 1', 'Диск 2', 'Диск 3']

// Работа со стеком в цикле
while (stack.length > 0) {
    let topElement = stack.pop()
    console.log(`Взяли ${topElement} со стека`)
    // Можно выполнить дополнительные действия с topElement
}

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

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

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

Он принимает два параметра: callback-функцию и начальное значение аккумулятора.

Простой пример

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Вывод: 10

Здесь reduce() суммирует числа в массиве numbers, используя функцию, которая добавляет каждое число к аккумулятору, начиная с начального значения 0.

Сложный пример

let players = [
    { name: 'Алиса', score: 50 },
    { name: 'Боб', score: 20 },
    { name: 'Чарли', score: 80 }
]

let totalScore = players.reduce((total, player) => {
    return total + player.score
}, 0)

console.log(totalScore) // Вывод: 150

// Дополнительно: подсчет количества вхождений каждого элемента
let fruits = ['яблоко', 'банан', 'яблоко', 'апельсин', 'банан', 'яблоко']
let count = fruits.reduce((acc, fruit) => {
    acc[fruit] = (acc[fruit] || 0) + 1
    return acc
}, {})

console.log(count) // Вывод: { яблоко: 3, банан: 2, апельсин: 1 }

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

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

reduceRight() - это метод, аналогичный reduce(), но он работает в обратном порядке: от последнего к первому элементу массива.

Этот метод особенно полезен, когда порядок применения функции важен, например, при работе со строками или операциях, которые не коммутативны (например, вычитание или деление).

Простой пример

let numbers = [1, 2, 3, 4];
let difference = numbers.reduceRight((accumulator, currentValue) => accumulator - currentValue);
console.log(difference); // Вывод: -2

Здесь reduceRight() вычисляет разность чисел в массиве numbers, применяя функцию справа налево. В данном случае результат будет 4 - 3 - 2 - 1, что равняется -2.

Сложный пример

let strings = ['one', 'two', 'three', 'four']
let reversedConcatenation = strings.reduceRight((accumulator, currentValue) => {
    return accumulator + (accumulator.length > 0 ? " " : "") + currentValue
}, '')

console.log(reversedConcatenation) // Вывод: "four three two one"

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

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

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

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

Простой пример

let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // Вывод: [5, 4, 3, 2, 1]

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

Сложный пример

let sentences = ['Hello World', 'The quick brown fox', 'jumps over', 'the lazy dog'];
let reverseWords = sentences.map(sentence => sentence.split(' ')).reverse().map(words => words.reverse().join(' '));
console.log(reverseWords); // Вывод: ["dog lazy the", "over jumps", "fox brown quick The", "World Hello"]

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

reverse() часто используется в задачах, связанных с алгоритмами, где необходимо инвертировать порядок элементов, например, для визуализации данных в обратном порядке или для решения задач в области криптографии.

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

Это изменяет длину массива. Если массив пустой, возвращается undefined.

Простой пример

let myArray = [1, 2, 3];
let firstElement = myArray.shift();

console.log(firstElement); // Вывод: 1
console.log(myArray); // Вывод: [2, 3]

Этот пример показывает, как метод shift удаляет первый элемент массива и возвращает его. После выполнения метода, исходный массив изменён.

Сложный пример

let queue = ['first', 'second', 'third', 'fourth']
let processed = []

while (queue.length > 0) {
    let currentItem = queue.shift()
    processed.push(currentItem.toUpperCase() + ' processed')
}

console.log(processed) // Вывод: ["FIRST processed", "SECOND processed", "THIRD processed", "FOURTH processed"]

В сложном примере shift() используется для реализации очереди: элементы поочерёдно удаляются из массива queue и добавляются в массив processed с некоторым преобразованием. Это показывает типичное использование shift() в структурах данных типа очередь (FIFO - First In, First Out).

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

slice() - этот метод возвращает новый массив, содержащий копию части исходного массива.

Он принимает два аргумента: начальный индекс (включительно) и конечный индекс (не включая его). Если аргументы не указаны, slice() создаёт копию всего массива. Этот метод не изменяет исходный массив.

Простой пример

let numbers = [1, 2, 3, 4, 5];
let slicedNumbers = numbers.slice(1, 4);

console.log(slicedNumbers); // Вывод: [2, 3, 4]
console.log(numbers); // Исходный массив не изменился: [1, 2, 3, 4, 5]

Здесь метод slice() используется для получения подмассива, содержащего элементы с индексами от 1 до 3 (элемент с индексом 4 не включается).

Сложный пример

function rotateArray(array, count) {
    let length = array.length
    count = count % length // Для поддержания позиции в пределах длины массива
    return array.slice(count).concat(array.slice(0, count))
}

let data = [1, 2, 3, 4, 5]
let rotatedData = rotateArray(data, 2)

console.log(rotatedData) // Вывод: [3, 4, 5, 1, 2]

В этом более сложном примере, slice() используется для создания функции, которая "вращает" массив, то есть перемещает элементы массива на указанное количество позиций вперёд. В данном случае массив data "вращается" на две позиции, и результатом является новый массив, в котором первые два элемента переместились в конец.

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

some() - этот метод проверяет, удовлетворяет ли какой-либо элемент массива условию, заданному в передаваемой функции.

Возвращает true, если хотя бы для одного элемента функция возвращает истинное значение, иначе возвращает false. Он не изменяет исходный массив.

Простой пример

let array = [1, 2, 3, 4, 5];
let hasEven = array.some(element => element % 2 === 0);

console.log(hasEven); // Вывод: true

Здесь some() используется для проверки, содержит ли массив чётные числа. Поскольку 2 является чётным, функция возвращает true.

Сложный пример

let tasks = [
    { id: 1, completed: false },
    { id: 2, completed: false },
    { id: 3, completed: true }
]

let isAnyTaskCompleted = tasks.some(task => task.completed)

console.log(isAnyTaskCompleted) // Вывод: true

В сложном примере массив объектов представляет задачи с их состояниями выполнения. Метод some() проверяет, выполнена ли хотя бы одна задача. В данном случае, поскольку одна из задач выполнена, результат будет true.

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

sort() - метод сортирует элементы массива на месте и возвращает отсортированный массив.

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

Простой пример

let months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months); // Вывод: ["Dec", "Feb", "Jan", "March"]

В этом примере строки сортируются по алфавиту.

Сложный пример

let items = [
    { name: 'Edward', value: 21 },
    { name: 'Sharpe', value: 37 },
    { name: 'And', value: 45 },
    { name: 'The', value: -12 },
    { name: 'Magnetic' },
    { name: 'Zeros', value: 37 }
]

// Сортировка по значению, если значения отсутствуют — поставить в конец.
items.sort((a, b) => {
    if (a.value && b.value) {
        return a.value - b.value
    }
    return a.value ? -1 : 1
})

console.log(items);
/*
  Вывод:
  [
    { name: 'The', value: -12 },
    { name: 'Edward', value: 21 },
    { name: 'Sharpe', value: 37 },
    { name: 'Zeros', value: 37 },
    { name: 'And', value: 45 },
    { name: 'Magnetic' }
  ]
*/

В сложном примере массив объектов сортируется по числовому свойству value. Записи, у которых нет value, перемещаются в конец массива. Функция сравнения обеспечивает корректную сортировку чисел вместо алфавитной.

Метод sort() может быть мощным инструментом при работе с массивами, особенно когда нужно упорядочить данные по определённым критериям. Однако стоит помнить, что он изменяет исходный массив, что может быть нежелательным в некоторых случаях. В таких ситуациях сначала следует сделать копию массива, например, с использованием метода slice(), и уже затем применять sort().

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

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

Простой пример

let myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

// Удаляет 0 элементов с индекса 2, и вставляет 'drum'
let removed = myFish.splice(2, 0, 'drum');

console.log(myFish); // "angel", "clown", "drum", "mandarin", "surgeon"
console.log(removed); // []; Нет удаленных элементов

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

Сложный пример

let myFish = ['angel', 'clown', 'drum', 'sturgeon'];
let removed = myFish.splice(1, 2, 'trumpet', 'flounder');

// myFish теперь ["angel", "trumpet", "flounder", "sturgeon"]
// removed теперь ["clown", "drum"]

Здесь метод splice() используется для удаления двух элементов, начиная с позиции 1 (удаляет 'clown' и 'drum') и одновременного добавления двух других элементов ('trumpet' и 'flounder') на те же позиции.

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

toLocaleString() - метод возвращает строку с локализованным представлением элементов массива.

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

Простой пример

let numberArray = [123, new Date('21 Dec 1997 14:12:00 UTC'), 'гости'];
let string = numberArray.toLocaleString('ru-RU');

console.log(string); // "123,21.12.1997, 17:12:00,гости"

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

Сложный пример

let prices = [1234.5, 1500.25, 2000.75, 'не число'];
let localeString = prices.toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' });

console.log(localeString); // "1 234,50 ₽,1 500,25 ₽,2 000,75 ₽,не число"

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

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

toString() - метод массива, который возвращает строковое представление массива и его элементов.

Элементы массива преобразуются в строки (используя их собственные методы toString) и соединяются в одну строку, разделяясь запятыми.

Простой пример

let myArray = [1, 'apple', true];
let arrayString = myArray.toString();

console.log(arrayString); // "1,apple,true"

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

Сложный пример

let complexArray = [1, ['a', 'b', 'c'], true, {foo: 'bar'}];
let complexString = complexArray.toString();

console.log(complexString); // "1,a,b,c,true,[object Object]"

В сложном примере, массив содержит вложенный массив и объект. Метод toString() рекурсивно преобразует вложенный массив в строку, но для объекта используется стандартное строковое представление объекта ([object Object]).

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

Заключение

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

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

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

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