Как стать автором
Обновить

Работаем с массивами в JavaScript без велосипедов

JavaScript
Эту статью я хочу посвятить тонкостям работы с массивами в JavaScript.

Наверное, у каждого JavaScript-разработчика есть фунции (самописные или библиотечные) $ (выбор элемента по id) и $$ (выбор элементов по CSS-классу). Если мы выбираем несколько элементов по CSS-классу, то мы хотим произвести с ними определенные действия. Напрашивается цикл. А если нужна выборка среди них? Преобразования? Действия над нужными элементами? Непростой получается код.

JavaScript не стоит на месте, Mozilla неустанно улучшает JavaSript в своем движке Gecko и грех не пользоваться этими нововведениями. В JavaScript 1.6 добавлены новые полезные методы для упрощения кода, необходимого в вышеописанных ситуациях.

Новые методы класса Array


filter

filter(callback[, thisObject])
Выборка элементов по определенным критериям.

Пример
var myArray = [ 3, 5, 7, 9, 4, 8, 2, 1, 6 ];
var newArray = myArray.filter( function(item){ return item > 5; } );
// newArray будет равен массиву [ 7, 9, 8, 6 ]


forEach

forEach(callback[, thisObject])
Выполнение действий над каждым из элементов массива.

Пример
var myArray = [ 3, 5, 7, 9, 4, 8, 2, 1, 6 ];
myArray.forEach( function(item){ alert(item); } );


every

every(callback[, thisObject])
Возвращает true если все элементы массива выполняют условие, в противном случае возвращает false.

Пример
var myArray = [ 3, 5, 7, 9, 4, 8, 2, 1, 6 ];
alert( myArray.every( function(item){ return item > 5; } ) ); // false
alert( myArray.every( function(item){ return item < 10; } ) ); // true


some

some(callback[, thisObject])
Возвращает true хотя бы один элемент массива выполняет условие, в противном случае возвращает false.

Пример
var myArray = [ 3, 5, 7, 9, 4, 8, 2, 1, 6 ];
alert( myArray.some( function(item){ return item > 5; } ) ); // true
alert( myArray.some( function(item){ return item > 10; } ) ); // false


map

map(callback[, thisObject])
Создает новый массив, в который попадают элементы старого массива после обработки указанной функцией.

Пример
var myArray = [ 3, 5, 7, 9, 4, 8, 2, 1, 6 ];
var newArray = myArray.map( function(item){ return item + 10; } );
// newArray будет равен массиву [ 13, 15, 17, 19, 14, 18, 12, 11, 16 ]


Комбинируем


Данные методы можно использовать в сочетании друг с другом.

Пример
var myArray = [ 3, 5, 7, 9, 4, 8, 2, 1, 6 ];
myArray
.filter( function(item){ return item > 5; } )
.forEach( function(item){ alert(item); } );


Ближе к практике
document.forms[0].elements
.filter( function(item){ return item.type == 'checkbox'; } )
.forEach( function(item){ item.checked = true; } );


Совместимость


Ну вот мы прочитали эту статью и вдохновились… но блин! Это же только в JavaScript с версии 1.6!

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

Я собрал эти реализации в файл arrays.js.

Удачи в разработке!

P.S. Не надо писать что в jQuery все это есть :)
Теги:javascriptmozilla
Хабы: JavaScript
Всего голосов 49: ↑44 и ↓5 +39
Просмотры41.3K

Похожие публикации

JavaScript Developer
от 2 700 €DiscoМожно удаленно
Javascript разработчик
от 2 000 $ArtezioВитебск
Javascript разработчик
от 160 000 до 220 000 ₽ArtezioМосква
JavaScript разработчик
от 170 000 до 300 000 ₽WeMakeTeamМожно удаленно
JavaScript разработчик
от 180 000 ₽SportrecsМоскваМожно удаленно

Лучшие публикации за сутки