Знакомства на Just click it
Скоро новый год!
Онлайн радио
Вверх
Новые статьи

Ретро газета в подарок
Архив

JavaScript массивы

«JavaScript массивы» – четвертый урок учебника JavaScript. И в этом уроке мы будем работать с массивами.


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

Массивы в JavaScript:

В языке JavaScript существуют два основных вида массивов:

 

  • встроенные в интерпритатор (document.forms[], document.images[],...)
  • определяемые пользователем


Создается массив при помощи конструкции new Array();



a = new Array();
b = new Array(15);
c = new Array(15,33,"значение 3");



В первом случае переменной a присваивается пустой массив, во втором переменной b присваивается массив, первым значением которого является число 15 и наконец, в третьем случае переменной c присваивается массив из 3х значений, третье из которых является строковым литералом.



Для обработки массивов в JS существует несколько основных методоов:

  • join();
  • reverse();
  • sort();

Метод join().

Этот метод работы с JavaScript массивами позволяет объединить массив данных в одну строку, где в качестве параметра методу передается символ, который будет вставлен в строку между соседними элементами бывшего массива. Может показаться несколько запутанным, но на практике ничего сложного, как всегда нет:

 

Создадим массив, состоящий из нескольких элементов:

 

ex1 = new Array(8,985,156,44,31);

 

А теперь применим к нему метод join():

 

str = ex1.join(" – ");

 

Это важно.

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

Как уже говорилось в одном из первых уроков нашего учебника, весь JS построен на объектной модели представления документа (DOM). Похожа эта модель, если говорить максимально упрощенно на матрешку. Существует самый старший объект (window), который содержит в себе все остальные объекты, многие из которых содержат в себе другие объекты и методы работы с ними. Здесь, думаю, никаких вопросов возникнуть не должно.

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

Для того, чтобы добраться до произвольного объекта на странице нам необходимо спуститься от самой старшей матрешки до необходимой нам, попутно вводя имена каждой из них через точку, как вы можете видеть ниже:

 

window.document.images[0];

 

Имена всех основных объектов и семейств объектов зарезервированны по умолчанию и поэтому их нужно просто ЗНАТЬ! В примере выше мы вызываем нулевой элемент массива, содержащего все картинки на странице, принадлежащий объекту document, содержащий все имеющиеся элементы на странице, в свою очередь, принадлежащий самому старшему элементу window. Под нулевым элементом массива, содержащего картинки понимается та картинка, которая встречается в HTML коде выше всего.

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

 

window.document.images[0].src = 'адрес изображения';

 

В примере выше мы вызываем метод работы с изображениями src, который позволяет работать с адресом расположения изображения.

Для начала может казаться непонятным, но не отчаивайтесь, со временем все встанет на свои места.

 

Итак, мы немного отвлеклись от нашего основного примера:

 

str = ex1.join(" – ");

 

Здесь все тоже самое с одним небольшим отличием. Обращаться к заданным переменным мы можем напрямую в обход объектной модели DOM. А происходит в нашем примере следующее:

У нас уже существует переменная ex1, содержащая массив состоящий из 5 чисел. Мы вызываем метод работы с массивами join(), присоединив его к нашей переменной точкой (как бы объясняем интерпритатору JS, что метод должен быть применен именно к этой переменной). В качестве параметра мы передаем методу join() символ "", который будет вставлен между соседними значениями массива. Далее мы записываем результат работы метода в переменную str. Теперь она содержит строку 8 – 985 – 156 – 44 – 31.

 

 

Метод reverse().

Этот метод позволяет перевернуть массив в JavaScript «кверху ногами».

Создаем простенький массив:

 

Arr = new Array(1,2,3,4,5);

 

И перевернем его:

 

Arr.reverse();

 

Теперь все значения внутри нашего массива расположенны наоборот!

 

Метод sort()

Этот метод позволяет отсортировать элементы внутри массива по некоторым правилам. Этот метод таит в себе мощнейший функционал по анализу, обработке и сортировке массивов. Метод sort() несколько сложнее представленных выше, но и с ним мы сможем справиться.

Для начала должен сказать, что метод sort(), получая от функции обработки значение "1" сдвигает элемент на одну позицию вперед, получая "0" не изменяет позицию элемента в массиве и получая " – 1" сдвигает элемент на одну позицию назад.

 

Напишем небольшую функцию – обработчик:

 

function obr(a,b)
{
if(a > b) return 1;
if(a==b) return 0;
if(a < b) return – 1;
}

 

Эта функция будет брать одновременно 2 элемента и сравнивать их. В зависимости от результатов сравнения она будет возвращать определенный параметр.

Теперь создадим массив:

 

Arr2 = new Array(2,6,8,9,3,5,1,3);

 

и применим к нему метод sort() :

b = Arr2.sort(obr);



Вот и все! Наш массив был отсортированн в порядке возрастания.

 

 


 

Должен признать, что урок получился очень напряженным и возможно некоторые вещи остались для вас не совсем понятными. Но даже если это так, ничего страшного в этом нет. Впереди вас ждет еще много уроков, содержащих наглядные примеры, которые помогут вам лучше понять этот язык програмирования.

 

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

 

назад
далее
Наверх
Источник: Создание сайтов
Мы В Контакте Мы на Facebook Лента новостей RSS
Копирование и публикация материалов сайта разрешены только при наличии активной ссылки на источник
2011 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам