Стартап-студия «Начало»
  • Блог
  • Портфолио
  • Авторизация
    • Войти через сторонний сервис
    • ВКонтакте
    • Github
  • Регистрация

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

Список рубрик
PHP статьи, которые поднимут скилл Javascript статьи, которые будут полезны Статьи о мобильной разработке на Java HTML & CSS статьи о вёрстке SEO & SMM оптимизация, продвижение и маркетинг Системы управления содержимым сайта Веб-сервисы, обзор и разработка Социальные сети и всё, что с ними связано Статьи о фреймворках Последние новости из мира информационных технологий Раздел обучения программированию Стартапы, гениальные и успешные проекты Бизнес-идеи или как заработать Статьи о веб-дизайне, которые приведут к успеху Администрирование сервера и установка программ Юмор айтишников Разное Битрикс
Чат для пользователей

Nogard7491 30.04.2017 07:34

да, причём быстро

MadisoN 30.04.2017 06:38

сайт набирает популярность :)

Nogard7491 16.04.2017 10:59

Новое достижение! ТИЦ сайта стал равен десяти.

nail361 09.06.2016 14:02

ok

Nogard7491 01.06.2016 09:46

Всем привет! Если возникнут какие-либо вопросы по статьям или по сайту в целом, регистрируйтесь и задавайте их в этом чате!

Живая статистика
Посетителей онлайн:
Посетителей за сутки:
Посетителей за месяц:
Просмотров за час:
Просмотров за сутки:
  • Главная
  • Блог
  • Javascript статьи, которые будут полезны
  • Методы для работы с массивами, которые нужно знать
Поделиться записью в соц. сетях
Рейтинг записи
супер методы для работы с массивами на javascript

Перебирающие методы для массива

В этой статье рассказывается о нескольких полезных методах для перебора массива в языке программирования Javascript.

Метод "forEach" для перебора массива

Метод используется для перебора элементов массива. Для каждого элемента массива вызывается callback функция с тремя параметрами.

/**
 * Функция обратного вызова (callback).
 *
 * @param item очередной элемент массива
 * @param i номер элемента
 * @param arr массив, который перебирается
 */
callback(item, i, arr);

У функции есть ещё и 2-ой необязательный параметр для указания контекста выполнения, но в этой статье о нём рассказано не будет.

Пример вывода элементов массива

var arr = ['Google', 'Yandex', 'Rambler', 'MAIL'];
arr.forEach(function(item, i, arr) {
    console.log(i + ': ' + item + ' [' + arr + ']');
});

// выведет сообщения:
// 0: Google [Google,Yandex,Rambler,MAIL]
// 1: Yandex [Google,Yandex,Rambler,MAIL]
// 2: Rambler [Google,Yandex,Rambler,MAIL]
// 3: MAIL [Google,Yandex,Rambler,MAIL]

Метод "filter" для фильтрации массива

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

/**
 * Функция обратного вызова (callback).
 *
 * @param item очередной элемент массива
 * @param i номер элемента
 * @param arr массив, который перебирается
 */
callback(item, i, arr);

Пример фильтрации массива по свойству и порядковому номеру элемента

var arr = [
    {name: 'Javascript', value: 3},
    {name: 'PHP', value: 4},
    {name: 'JAVA', value: 1}
];

// формирует новый массив из элементов со свойством "value" > 1 начиная со 2-ого
var newArr = arr.filter(function(item, i, arr) {
    if (i != 0 && item.value > 1) {
        return true;
    }
});

console.log(newArr); // выведет массив с единственным элементом [{name: 'PHP', value: 4}]

Метод "map" для трансформации массива

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

/**
 * Функция обратного вызова (callback).
 *
 * @param item очередной элемент массива
 * @param i номер элемента
 * @param arr массив, который перебирается
 */
callback(item, i, arr);

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

var arr = ['Javascript', 'PHP', 'JAVA'];
var newArr = arr.map(function(name) {
    return name.length;
});

console.log(newArr); // выведет массив состоящий из длин строк исходного массива [10, 3, 4]

Метод "every" для проверки всех элементов массива на соответствие условию

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

/**
 * Функция обратного вызова (callback).
 *
 * @param item очередной элемент массива
 * @param i номер элемента
 * @param arr массив, который перебирается
 */
callback(item, i, arr);

Пример проверки элементов массива на чётные числа

var condition1 = [8, 2, 4, 6].every(function(item) {
    if (item %2 == 0) {
        return true;
    }
});
console.log(condition1); // выведет true, т.к. все элементы массива являются чётными числами.

var condition2 = [1, 2, 4, 6].every(function(item) {
    if (item %2 == 0) {
        return true;
    }
});
console.log(condition2); // выведет false, т.к. первый элемент массива является нечётным числом.

Метод "some" для проверки хотя бы одного элемента массива на соответствие условию

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

/**
 * Функция обратного вызова (callback).
 *
 * @param item очередной элемент массива
 * @param i номер элемента
 * @param arr массив, который перебирается
 */
callback(item, i, arr);

Пример проверки массива на нахождение хотя бы одного чётного числа

var condition1 = [2, 1, 3, 5].some(function(item) {
    if (item %2 == 0) {
        return true;
    }
});
console.log(condition1); // выведет true, т.к. первый элемент массива является чётным числом.

var condition2 = [1, 3, 5, 7].some(function(item) {
    if (item %2 == 0) {
        return true;
    }
});
console.log(condition2); // выведет false, т.к. все элементы массива являются нечётными числами.

Методы "reduce" и "reduceRight" для для последовательной обработки каждого элемента массива с сохранением промежуточного результата

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

Методы отличаются тем, что "reduce" осуществляет перебор слева направо, а "reduceRight" справа налево.

/**
 * Функция обратного вызова (callback).
 *
 * @param previousValue последний результат вызова функции (промежуточный результат)
 * @param item очередной элемент массива
 * @param i номер элемента
 * @param arr массив, который перебирается
 */
callback(previousValue, item, i, arr);

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

Пример вычисления суммы элементов массива состоящего из чисел.

var arr = [1, 2, 3];
var sum = arr.reduce(function(previousValue, item) {
  return previousValue + item;
}, 0);

console.log('Сумма элементов массива =  ' + sum); // выведет "Сумма элементов массива = 6"
Автор: Nogard7491
Опубликовано: 30 сентября 2016
  • Главная
  • Блог
  • Javascript статьи, которые будут полезны
  • Методы для работы с массивами, которые нужно знать
  • Назад
  • Вперёд
Комментарии к статье

Nogard7491 14.03.2017 14:42

Рекомендую к рассмотрению библиотеку https://lodash.com, которая содержит множество полезных методов для работы с javascript.

Портал-студия разработки сайтов и мобильных приложений Стартап-студия «Начало» © 2022

Счётчики
Управление аккаунтом Авторизация
Регистрация
Фрилансеры занят Nogard7491
занят nail361
свободен MadisoN
свободен mega
Основные разделы сайта Главная страница
Статьи про веб-разработку
Наши работы
Карта сайта
Полезные ресурсы Хабрахабр
Контент-агентство TexTerra
Анализ сайта PR-CY
PHP-фреймворк Laravel
API Bitrix
Сайт фриланса