22 ноября в 19:00 состоится вебинар
"Как открыть для себя новые возможности через современную профессию Frontend разработчика"
Детальнее по ссылке.

17 Мар 2018

Перебирающие методы массива some(), every() и filter()

Всем привет! С вами JSexpert и сегодня мы рассмотрим три метода работы с массивами some(), every() и filter().

Прежде всего, рассмотрим метод some(). Этот метод проверяет, или хотя бы один элемент массива отвечает условиям и возвращает булевое true/false. В чём же смысл этого метода?

В нашем примере мы создали массив data, который содержит числа, и хотим сделать проверку, есть ли в данном массиве число больше 10 или число меньше 3.

const data = [7, 14, 5, 12, 25]

const value1 = data.some(i => i > 10);
const value2 = data.some(i => i < 3);
console.log(" = Some example = ");
console.log(value1); //true
console.log(value2); //false

Метод some() позволяет нам проверить, выполняется ли заданное условие хотя бы один раз. Если условие выполнилось хотя бы один раз, проверка, в принципе, на этом завершается и мы получаем возвращаемое значение в виде true или false. Как работает этот метод, можно увидеть в консоли:

= Some example =
true
false

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

const value3 = data.every(i => i > 10);
const value4 = data.every(i => i > 3);
console.log(" = Every example = ");
console.log(value3); //false
console.log(value4); //true

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

= Every example = 

false
true

И последний метод, который мы рассмотрим сегодня, это метод filter(). Данный метод может быть весьма полезным, когда вам нужно найти конкретное значение в массиве объектов. В этом примере, мы используем массив объектов с полями id, name и isAdmin.

console.log(" = Filter example = ");
const users = [
    {id: 1, name: "Jonh", isAdmin: true},
    {id: 2, name: "Smith", isAdmin: true},
    {id: 3, name: "David", isAdmin: false}
];
const filtered = users.filter(item => item.id == 2);
console.log(filtered);

Следует добавить, что в наших примерах мы используем стрелочные функции, которые позволяют значительно сократить синтаксическую запись и сделать её лаконичной, короткой и понятной. Как видно из примера, для коротких и компактных функций использование стрелочных функций действительно очень оправдано, поскольку запись получается легко читаемой, понятной и занимает намного меньше места. Так же следует напомнить, что практически все методы итерирования по массивам, таких как some(), every(), filter(), forEach() и map() в колбек функцию принимают три параметра, это item, index и array. Об этом мы рассказывали в предыдущих уроках, при рассмотрении метода forEach(), поэтому сейчас на этой информации мы останавливаться не будем.

Метод filter() возвращает массив элементов, которые удовлетворяют заданным условиям. Имеется ввиду, что на каждой итерации цикла в item, в нашем случае, мы будем получать конкретно один объект, и допустим, мы хотим найти/отфильтровать объект, у которого id = 2. Давайте откроем консоль и посмотрим на результат:

= Filter example =
[ { id: 2, name: "Smith", isAdmin: true } ]

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

const filtered = users.filter(item => item.isAdmin == true);
console.log(filtered);

Такое условие может быть более полезным, поскольку не так часто нужно найти какой-то один элемент. Намного чаще нужно именно отфильтровать элементы по какому-то определённому полю. Снова проверяем консоль, и видим, что нам отобразились два объекта, у которого значение поля isAdmin равняется true.

= Filter example =
[ { id: 1, name: "Jonh", isAdmin: true },
  { id: 2, name: "Smith", isAdmin: true } ]

В заключение следует добавить, что методы some() и every() могут принимать не только простые массивы цифр, а и более сложные структуры, например массивы объектов, как показано в примере с filter().

На этом  мы закончим сегодняшний урок, всем пока!