Объект Array в JavaScript
![Объект Array в JavaScript](/images/articles/javascript-array.jpg)
Объект Array в JavaScript позволяет создавать массивы. Также он содержит свойства и методы, позволяющие управлять массивом. Именно о свойствах и методах объекта Array в JavaScript я и поведаю.
Начнём с конструктора. Их несколько. Вот первый из них:
var arr = new Array();
Здесь создаётся массив, вообще говоря, произвольной длины и абсолютно пустой. Дальше мы можем его заполнять так, как я Вам показывал ранее. Рассмотрим второй вид конструктора:
var arr = new Array(5);
Этот конструктор создаёт массив из пяти элементов. И, наконец, третий вид конструктора:
var arr = new Array(3, 1, "str", "15", -5);
В данном случае создаётся массив из пяти уже заданных элементов. Это все три конструктора, которые нам предоставляет класс Array в JavaScript.
Теперь перейдём к свойствам. Рассмотрим всего одно свойство, но самое важное и безумно часто используемое. Вот оно:
var arr = new Array(1, 0, -4, 10, 12);
document.write(arr.length);
Свойство length содержит длину массива. Очевидно, что используется данное свойство преимущественно в циклах, где перебираются элементы массива. Поэтому не буду говорить о том, как важно помнить это свойство.
Теперь обсудим методы объекта Array. Начнём с метода join():
document.write(arr.join());
Данный метод возвращает строку, составленную из элементов массивов, разделённых запятой. Если использовать параметр в методе join(), то, соответственно, вместо запятой будет этот параметр. Например, так:
document.write(arr.join("---"));
На выходе получится следующее: "1---0----4---10---12".
Ещё один метод используется, когда необходимо добавить несколько значений в массив. Конечно, мы можем написать несколько строк, поочерёдно записывая все элементы. Однако, разработчики нам позволяют отделаться всего одной строкой:
arr.concat(3, 1, new Array(3, -1));
Как видите, тут мы добавили не только два числа, но ещё и целый массив в исходный массив arr, тем самым, резко сократив запись.
Метод pop() вытаскивает последний элемент из массива и возвращает его. То есть у массива исчезает последний элемент, который метод pop() возвращает. Вот пример:
var last_element = arr.pop();
document.write(last_element);
Здесь из массива исчезает последний элемент, который мы записываем в переменную last_element и выводим в окно браузера.
Метод shift() работает аналогично, только исчезает не последний элемент, а первый, при этом все остальные элементы сдвигаются на одну позицию вниз.
var first_element = arr.shift();
document.write(first_element);
Здесь всё достаточно прозрачно, поэтому не буду комментировать.
Для того чтобы развернуть массив (то есть первый элемент станет последним, второй элемент станет предпоследним и так далее) используется метод reverse(). Пример его использования:
var a = arr.reverse();
В данном примере метод возвращает перевёрнутый массив arr и записывает его в массив a.
Очень полезный метод, позволяющий получить новый массив из части другого массива. Сразу приведу пример, а потом прокомментирую его:
var a = arr.slice(2, 4);
В этом примере мы присваиваем массиву a часть массива arr, которая начинается со 2-го элемента (включительно) до 4-ого (исключительно). Например, если массив arr был с такими значениями: 2, 4, 5, 1, 2. То массив а будет иметь следующие значения: 5, 1. Также не забывайте, что нумерация начинается с 0. Поэтому элемент с индексом "2" - это элемент со значением 5.
Если в методе slice() указать только один параметр, то будет браться массив начиная с индекса, указанного в параметре и до конца массива.
И последний метод, который мы с Вами разберём - это метод sort(). Я его оставил на закуску, так как он, пожалуй, самый важный и сложный. Данный метод сортирует массив. Использовать метод sort() легко:
arr.sort();
Тут всё просто: массив сортируется, однако, какое правило сортировки? По алфавиту, по числам, по возрастанию, по убыванию и прочее. В этом и состоит сложность. Поэтому разработчики этого метода предоставили нам задать эти правила, добавив один необязательный параметр в метод sort(), который должен быть именем функции, описывающей "правила сортировки".
Эта функция должна определять критерии, при которых один элемент больше другого. Давайте, например, сделаем так: если элемент равен "5", то тогда одно заведомо больше другого. Если ни один из элементов не равен 5, то тогда сравниваем по обычным правилам. Давайте сразу напишу пример, а потом его поясню:
function myCompare(x, y) {
if (x == 5) return 1;
if (y == 5) return -1;
if (x > y) return 1;
else if (x == y) return 0;
else return -1;
}
Если x больше y, то возвращается 1, если равны, то возвращается 0, если y больше x, то возвращается -1. И на основании этого, мы пишем правила, при которых возвращать 1, 0 или -1. И теперь мы можем, используя это "правило сортировки", воспользоваться методом sort() в полную силу:
arr.sort(myCompare);
Это все самые основные конструкторы, свойства и методы объекта Array в JavaScript. Разумеется, запоминать их все не нужно. Главное лишь понять возможности, которые предоставляют нам разработчики JavaScript при работе с массивами. Со временем Вы их и так запомните, а пока этого не случилось не забывайте про справочник.
-
-
Михаил Русаков
Комментарии (31):
Зачем, к примеру, в методах pop() и shift() нужны скобки, если там,как я понял, никакие параметры не надо задавать?
Ответить
Скобки нужны, так как таков синтаксис JavaScript (да и других языков тоже). Эти скобки означают, что это именно метод. Если бы их не было, то для JavaScript это было бы уже свойство (а не метод) pop и shift (которых не существует).
Ответить
Спасибо, что разъяснил.
Ответить
Здравствуйте Михаил! Скачал бесплатный видиокурс по HTML.Мне понравился он тем, что достаточно понятно все объяснено. После изучения данного курса заказал уже платный видио курс по JavaScript. Хочу спросить,как скоро я его получу. P.S. Будет ли видио курс по "Дивной" верстке - <div></div>.
Ответить
Платного курса по JavaScript у меня вообще нет. Есть только "Создание и раскрутка сайта от А до Я", куда обучение по JavaScript входит, видимо, Вы его и заказали. Я вернулся сегодня из отпуска, поэтому уже завтра все заказы постараюсь отправить. Как правило, доходит не более 3-х недель. Если областной город, то и за неделю доходит. P.S. Курс по дивной вёрстке будет, но ещё не очень скоро, ближе к декабрю.
Ответить
В листинге пользовательской функции сравнения в строчке if (y == 5) return 1; наверно имелось в виду -1. myCompare(5,5) возвращает 1.
Ответить
Всё правильно Вы пишите, исправил, спасибо!
Ответить
Как обработать такой массив: Array ( [id] => 6 [page_id] => 150 [name] => name [text_comment] => comment ). Ума ни приложу, что делать?
Ответить
Например, так: echo $array["name"].": ".$array["comment"];
Ответить
Куда писать эту строку?
Ответить
http://myrusakov.ru/php-how-study.html
Ответить
Михаил, Вы хотите сказать, что для начала мне нужно изучить все (массивы, JavaScript, MySQL и другое), а только потом заниматься созданием сайта? Просто я думаю, что это займет у меня не менее 1 года.
Ответить
Это займёт при правильном подходе пару месяцев. Вот курс: http://srs.myrusakov.ru/php Можно и самому каждую тему находить и разбирать.
Ответить
Какой подход правильный? Я лично помню, что пока я делал записи в тетрадке, изучая Ваш бесплатный видеокурс по HTML, то практически все, что Вы там говорили, я запомнил. Подскажите может какой-нибудь более действенный метод изучения. Я немного теряюсь.
Ответить
Побольше практики нужно, тогда и будет всё запоминаться.
Ответить
Как Вы думаете, будет ли у меня успех, если я буду заниматься созданием сайтов-визиток на заказ?
Ответить
Михаил, у Вас, кажется, ошblбка)) если я напишу --- var arr5 = new Array(); arr5[0] = 5; arr5[1] = 7; arr5[2] = 9; arr5[5] = 8; for (var i = 0; i < arr5.length; i++) { document.write("Элемент с индексом " + i + " равен " + arr5[i] + "<br />"); } document.write(arr5.length); ---- виведется ---- Элемент с индексом 0 равен 5 Элемент с индексом 1 равен 7 Элемент с индексом 2 равен 9 Элемент с индексом 3 равен undefined Элемент с индексом 4 равен undefined Элемент с индексом 5 равен 8 6 ----- следовательно получается, что length возвращает номер ключа последнего елемента +1,, а не количество елементов в массиве ... и я ошибаюсь гдето? спасибо за ответ наперед))
Ответить
Номер ключа последнего элемента + 1 - это и есть длина массива. Нумерация начинается с 0.
Ответить
спасибо) то, что с нуля нумерация - помню по php) а вот то, что добавляются елементbl в js сами по себе(а-ля Элемент с индексом 4 равен undefined) - очень непривично)) прям "взорвимосг"))
Ответить
Михаил, в последнем примере если убрать следующие строки: if (x == 5) return 1; if (y == 5) return -1; , никаких изменений в работе скрипта не наблюдается, все работает как надо. Для чего необходимы эти два условия в Вашем примере?
Ответить
Если не использовать число 5 в качестве x или y, то да, разницы не будет. А если использовать, то получится, что 5 больше, например, 7. Это и есть пользовательская сортировка.
Ответить
Не понятно добавление в массив. var arr = new Array(1, 0, -4, 10, 12, 11); document.write(arr.length + "<br>"); document.write(arr.join("---") + "<br>"); arr.concat(3, 1, new Array(3, -1)); var last_element = arr.pop(); document.write(arr); Я так понял что должен распечататься новый, более длинный массив, а распечатывается старый
Ответить
Что значит новый? И более длинного массива тут нет, самый первый arr и есть самый длинный.
Ответить
А понял так: Вначале arr состоит: 1, 0, -4, 10, 12, 11. к нему добавляется значения 3, 1 и массив (3, -1). В итоге получается массив arr состоящий из: 1, 0, -4, 10, 12, 11, 3, 1, 3, -1. Что не верно?
Ответить
Если бы было написано arr = arr.concat(3, 1, new Array(3, -1)); - то да, но никакого arr = нет.
Ответить
Спасибо Михаил! В ответе все понятно, но по тексту статьи без переписки не разобрался. По html у Вас есть хороший справочник, есть ли по java справочник?
Ответить
Нет.
Ответить
Здравствуйте! Что-то сложная штука для новичка этот sort. Не совсем понятно насчет возврата -1, 1, 0 и т.д. мне совершенно не хватило данного материала для понимания хотя бы принципа. привожу код, скажите какие ошибки если есть пожалуйста. По сути я в массиве создал три разных элемента и мне нужно вывести их в порядке возрастания. <script language = "javascript"> var arr2 = new Array ("x", "y", "z"); arr2 [0] = 5; arr2 [1] = 8; arr2 [2] = 3; arr2.sort(); function myCompare(x, y) { if (x == 5) return 1; if (y == 5) return -1; if (z == 5) return -1; if (x > y) return 1; if (y > z) return 1; else if (x == y) return 0; else return -1; } document.write (arr2);
Ответить
Здравствуйте, Михаил! Не могу понять функцию sort в статье. Откуда взялось число "5" и что это значит? По поводу остального кода функции, правильно ли я думаю, что x и y это два подряд идущих элемента массива, которые мы сравниваем на больше меньше и как показано в коде, если первый больше второго делаем перестановку, если равны ничего не происходит, если меньше перестановку не проводим?
Ответить
почему вы не записали метод push()? он мне очень пригодился, когда выполнял ваши же задания после видеоуроков.
Ответить
Здравствуйте Михаил! Помогите разобраться: записал arr.concat(3, 1, new Array(3, -1)); (как приводится выше) и ничего в document.write не отображается...
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.