Работаем с массивами в 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 все это есть :)