Способы работы с массивом

Полезные приёмы работы с массивами в JavaScript

В большинстве приложений, которые разрабатываются в наши дни, требуется взаимодействовать с некими наборами данных. Обработка элементов в коллекциях — это часто встречающаяся операция, с который вы, наверняка, сталкивались. При работе, например, с массивами, можно, не задумываясь, пользоваться обычным циклом for , который выглядит примерно так: for (var i=0; i . Однако, лучше, всё-таки, смотреть на вещи шире.

Предположим, нам надо вывести список товаров, и, при необходимости, разбивать его на категории, фильтровать, выполнять по нему поиск, модифицировать этот список или его элементы. Возможно, требуется быстро выполнить некие вычисления, в которые будут вовлечены элементы списка. Скажем, надо что-то с чем-то сложить, что-то на что-то умножить. Можно ли найти в JavaScript такие средства, которые позволяют решать подобные задачи быстрее и удобнее, чем с использованием обычного цикла for ?

На самом деле, такие средства в JavaScript имеются. Некоторые из них рассмотрены в материале, перевод которого мы представляем сегодня вашему вниманию. В частности, речь идёт об операторе расширения, о цикле for…of , и о методах includes() , some() , every() , filter() , map() и reduce() . Здесь мы, в основном, будем говорить о массивах, но рассматриваемые здесь методики обычно подходят и для работы с объектами других типов.

Надо отметить, что обзоры современных подходов к разработке на JS обычно включают в себя примеры, подготовленные с использованием стрелочных функций. Возможно, вы не особенно часто пользуетесь ими — может быть из-за того, что вам они не нравятся, может быть потому, что не хотите тратить слишком много времени на изучение чего-то нового, а, возможно, они просто вам не подходят. Поэтому здесь, в большинстве ситуаций, будут показаны два варианта выполнения одних и тех же действий: с использованием обычных функций (ES5) и с применением стрелочных функций (ES6). Для тех, у кого нет опыта работа со стрелочными функциями, отметим, что стрелочные функции не являются эквивалентами объявлений функций и функциональных выражений. Не стоит механически заменять одно на другое. В частности, это связано с тем, что в обычных и стрелочных функциях ключевое слово this ведёт себя по-разному.

1. Оператор расширения

Оператор расширения (spread operator) позволяет «раскрывать» массивы, подставляя в то место, где использован этот оператор, вместо массивов, их элементы. Похожий подход предложен и для литералов объектов.

▍Сильные стороны оператора расширения

▍Пример

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

2. Цикл for…of

Оператор for…of предназначен для обхода итерируемых объектов. Он даёт доступ к отдельным элементам таких объектов (в частности — к элементам массивов), что, например, позволяет их модифицировать. Его можно считать заменой обычному циклу for .

▍Сильные стороны цикла for…of

▍Пример

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

3. Метод includes()

Метод includes() используется для проверки наличия в коллекции некоего элемента, в частности, например, определённой строки в массиве, содержащем строки. Этот метод возвращает true или false в зависимости от результатов проверки. Пользуясь им, стоит учитывать, что он чувствителен к регистру символов. Если, например, в коллекции есть строковой элемент SCHOOL , а проверка на его наличие с помощью includes() выполняется по строке school , метод вернёт false .

▍Сильные стороны метода includes()

▍Пример

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

4. Метод some()

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

▍Сильные стороны метода some()

▍Пример

Предположим, вы — владелец клуба, и в общем-то, вас не интересует — кто именно в ваш клуб приходит. Однако, некоторым посетителям вход в клуб закрыт, так как они склонны к излишнему потреблению спиртных напитков, по крайней мере, в том случае, если они оказываются в вашем заведении сами, и с ними нет никого, кто может за ними присмотреть. В данном случае группе посетителей можно войти в клуб только при условии, что хотя бы одному из них не меньше 18-ти лет. Для того чтобы автоматизировать проверку подобного рода, воспользуемся методом some() . Ниже его применение продемонстрировано в двух вариантах.

5. Метод every()

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

▍Сильные стороны метода every()

▍Пример

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

6. Метод filter()

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

▍Сильные стороны метода filter()

▍Пример

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

7. Метод map()

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

▍Сильные стороны метода map()

▍Пример

Предположим, у вас имеется список товаров с ценами. Вашему менеджеру нужен новый список товаров, цены которых снижены на 25%. Воспользуемся для решения этой задачи методом map() .

8. Метод reduce()

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

▍Сильные стороны метода reduce()

▍Пример

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

Итоги

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

Уважаемые читатели! Знаете ли вы какие-нибудь интересные, но не слишком широко известные методы работы с массивами в JavaScript?

Источник

15 методов работы с массивами в JavaScript, которые необходимо знать в 2020 году

Перед вами перевод статьи, опубликованной на сайте dev.to. Автор: Ibrahima Ndaw.
Оригинал опубликован в авторском блоге.

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

В этой статье мы рассмотрим 15 методов, которые помогут вам более эффективно работать с массивами в JavaScript.

Обратите внимание, что в основном мы будем упрощать функцию, которая передается в качестве параметра.

1. some()

Этот метод проверяет, удовлетворяет ли какой-либо элемент массива условию, заданному в передаваемой функции. Он вернет значение true , если хотя бы один элемент совпадет с проверяемой функцией, и значение false — если нет.

2. reduce()

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

3. every()

Этот метод проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции. Он вернет значение true , если каждый элемент совпадет с проверяемой функцией, и значение false — если нет.

4. map()

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

5. flat()

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

6. filter()

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

7. forEach()

Этот метод применяет функцию к каждому элементу массива.

8. findIndex()

Этот метод принимает функцию в качестве параметра и в дальнейшем применяет ее к массиву. Он возвращает индекс найденного элемента, если элемент удовлетворяет условию проверяющей функции, переданной в качестве аргумента. Если не удовлетворяет, возвращается –1 .

9. find()

Этот метод принимает функцию в качестве аргумента и в дальнейшем применяет ее к массиву. Он возвращает значение элемента, найденного в массиве, если элемент удовлетворяет условию проверяющей функции. В противном случае оно возвращается со значением undefined .

10. sort()

Этот метод принимает функцию в качестве параметра. Он сортирует элементы массива и возвращает их.

11. concat()

Этот метод объединяет два или более массива/значения и возвращает новый массив.

12. fill()

Этот метод заполняет все элементы массива одинаковым значением, от начального индекса (по умолчанию 0) до конечного индекса (по умолчанию array.length).

13. includes()

Этот метод возвращает значение true , если массив содержит определенный элемент, и значение false — если нет.

14. reverse()

Этот метод меняет порядок следования элементов в массиве на обратный. Первый элемент становится последним, а последний — первым.

15. flatMap()

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

Источник

Полезные методы массивов и объектов в JavaScript

Автор статьи, перевод которой мы сегодня публикуем, говорит, что её идею подсказал ему один из выпусков подкаста Syntax FM, в котором давался обзор полезных методов объектов и массивов в JavaScript. Эти методы помогают разработчикам писать чистый и читабельный код. Их применение снижает потребность в сторонних библиотеках наподобие Lodash.

Array.prototype.filter()

Метод Array.prototype.filter() создаёт новый массив, в который попадают только те элементы исходного массива, которые соответствуют заданному условию.

▍Пример

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

Array.prototype.map()

Метод Array.prototype.map() позволяет создать новый массив, основанный на каким-то образом обработанных значениях другого массива. Этот метод отлично подходит для модификации данных, он, благодаря тому, что не вносит изменений в исходный массив, часто используется в React.

▍Пример

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

Array.prototype.reduce()

Метод Array.prototype.reduce() нередко незаслуженно обходят вниманием. Он позволяет свести массив к единственному значению, накапливаемому в элементе-приёмнике. Значение, возвращаемое этим методом, может быть любого типа. Например, это может быть объект, массив, строка или число.

▍Пример

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

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

Array.prototype.forEach()

Метод Array.prototype.forEach() применяет переданную ему функцию к каждому элементу массива.

▍Пример

Вот как вывести каждый элемент массива в консоль с помощью метода .forEach() .

Array.prototype.some()

Метод Array.prototype.some() проверяет, соответствует ли хотя бы один элемент массива условию, задаваемому передаваемой ему функцией. Этот метод, например, способен хорошо показать себя в решении задачи проверки полномочий пользователя. Его можно рассматривать в качестве аналога ранее рассмотренного .forEach() , с той разницей, что, при его применении, с помощью функции, которая ему передана, можно выполнять над элементами массива некие действия до тех пор, пока эта функция не вернёт истинное значение, после чего — прервать обработку.

▍Пример

Проверим, имеется ли в массиве как минимум одна строка admin .

Array.prototype.every()

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

▍Пример

Проверим, все ли оценки, хранящиеся в массиве, равны или больше чем 3.

Array.prototype.includes()

Метод Array.prototype.includes() позволяет узнать, содержит ли массив заданное значение. Он похож на метод .some() , но он проверяет не соответствие элементов массива некоему условию, а наличие в массиве заданного при его вызове значения.

▍Пример

Проверим, имеется ли в массиве строковой элемент waldo :

Array.from()

Статический метод Array.from() позволяет создавать массивы на основании других массивов или строк. Этому методу, при необходимости, можно передать функцию для выполнения мэппинга, что позволяет воздействовать на данные, которые попадут в новый массив. На самом деле, для выполнения мэппинга предусмотрен особый метод — Array.prototype.map(), поэтому не вполне понятно, зачем кому-то может понадобиться эта возможность метода Array.from() .

▍Пример

Создадим массив на основе строки.

Создадим массив, содержащий удвоенные значения элементов исходного числового массива.

Object.values()

Метод Object.values() возвращает массив значений свойств переданного ему объекта.

▍Пример

Сформируем массив из значений свойств объекта.

Object.keys()

Метод Object.keys() возвращает массив, состоящий из имён свойств объекта (ключей).

▍Пример

Сформируем массив из имён свойств объекта.

Object.entries()

Метод Object.entries() возвращает, обработав переданный ему объект, массив, содержащий массивы, представляющие собой пары вида [ключ, значение] , представляющие собой имена свойств и значения этих свойств.

▍Пример

Сформируем массив, содержащий, для интересующего нас объекта, данные об именах свойств и их значениях.

Оператор расширения и массивы

Оператор расширения (spread operator, …), в применении к массивам, позволяет разворачивать их, извлекая из них их элементы. Этот оператор полезен, например, при необходимости выполнения объединения нескольких массивов. Кроме того, его использование позволяет избавиться от необходимости использовать метод .splice() в том случае, если нужно удалить из массива какие-то элементы, так как он может быть скомбинирован с методом .slice() , что позволяет избежать изменения исходного массива.

▍Пример

Объединим два массива.

Сформируем новый массив, представляющий собой исходный массив, из которого удалён элемент. При этом исходный массив меняться не должен.

Оператор расширения и объекты

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

▍Пример

Создадим новый объект, добавив к исходному объекту новое свойство, не меняя при этом исходный объект.

Синтаксис оставшихся параметров функции

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

▍Пример

Выведем массив, содержащий аргументы, переданные функции.

Object.freeze()

Метод Object.freeze() «замораживает» объект, предотвращая изменение существующих свойств этого объекта или добавление новых свойств и значений в объект. Существует ошибочное мнение, что этот метод аналогичен объявлению объектов с использованием ключевого слова const , однако, объекты-константы модифицировать можно.

▍Пример

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

Object.seal()

Метод Object.seal() позволяет «запечатать» объект, предотвратив добавление новых свойств. При этом существующие свойства можно менять.

▍Пример

«Запечатаем» объект, что не позволит добавить в него новое свойство, но оставит возможность менять существующие свойства.

Object.assign()

Метод Object.assign() позволяет объединять объекты, копируя свойства из одного объекта в другой. На самом деле, того же эффекта можно достичь с помощью вышеописанного оператора расширения, поэтому без этого метода вполне можно обойтись. Надо отметить, что этот метод, как и оператор расширения, не выполняет глубокого клонирования объектов. Если вам нужно готовое средство для глубокого клонирования объектов — взгляните на инструменты библиотеки Lodash.

▍Пример

Создадим из двух объектов один.

Итоги

В этом материале мы рассказали о полезных методах массивов и объектов в JavaScript. Многие рассмотренные здесь методы возвращают новые массивы или объекты. Это даёт возможность комбинировать их, объединяя в цепочки. Эти методы не модифицируют исходные данные, что особенно важно в React-разработке. Кроме того, использование этих методов, в подавляющем большинстве случаев, позволяет отказаться от циклов вроде for и while .

Уважаемые читатели! Какими методами массивов и объектов в JavaScript вы пользуетесь чаще всего?

Источник