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

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Методы объекта Array

Методы объекта Array

Если информация сохранена в массиве, JavaScript позволяет воспользоваться несколькими методами, определенными для управления данными. Рассмотрим методы объекта Array.

  • concat(массив) — конкатенация массивов, объединяет два массива в третий массив. Синтаксис:
  • имя_массива1.сопсаt (массив2)

    Возвращает массив. Данный метод не изменяет исходные массивы.

    array1 = new Array(1, 2, 3);
    array2 = new Array("a", "b", "c");
    array3 = array1.сопсаt (array2);
    // результат: массив со значениями 1, 2, 3, "a", "b", "c"

    Если элементом массива строка или число (но не объект строки или числа), значение из исходных массивов копируются в новый. После этого любая связь значений из нового массива с исходным прерывается. Если элементами исходного массива являются ссылки на объекты любого типа, JavaScript копирует в новый массив только ссылки. Поэтому внесение изменений в одном из масивов влияет на объект, а значит это отражается в обоих массивах. Объединим два ранее созданных нами массива в один, а затем присоединим к ним третий.

    <script language="JavaScript">
    planets=new Array()
    planets[0]="Меркурий - ";
    planets[1]=" Венера - ";
    planets[2]=" Земля - ";
    planets[3]=" Марс - ";

    gonc=new Array()
    gonc[0]=" расстояние до Солнца 52 млн.км, ";
    gonc[1]=" расстояние до Солнца 108 млн.км, ";
    gonc[2]=" расстояние до Солнца 149 млн.км, ";
    gonc[3]=" расстояние до Солнца 228 млн.км, ";

    crug=new Array()
    crug[0]="диаметр планеты 4 880 км ";
    crug[1]="диаметр планеты 12 100 км";
    crug[2]="диаметр планеты 12 750 км";
    crug[3]="диаметр планеты 6 800 км";

    array=planets.concat(gonc);
    array1=array.concat(crug);
    document.write(array1+"<br>")

    </script>

    В окне веб-браузера это будет выглядеть ТАК.

  • join – создает строку из элементов массива с указанным разделителем между ними; является строкой символов (возможно, пустой).
  • Синтаксис:

    имя_массива.join(строка)

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

    var atrrayText = myArray.join(",");

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

    array1 = new Array(1, 2, 3);
    array2 = new Array("a", "b", "c");
    array3 = array1.сопсаt (array2);
    // результат: массив со значениями 1, 2, 3, "a", "b", "c"

    Если элементом массива строка или число (но не объект строки или числа), значение из исходных массивов копируются в новый. После этого любая связь значений из нового массива с исходным прерывается. Если элементами исходного массива являются ссылки на объекты любого типа, JavaScript копирует в новый массив только ссылки. Поэтому внесение изменений в одном из масивов влияет на объект, а значит это отражается в обоих массивах. Объединим два ранее созданных нами массива в один, а затем присоединим к ним третий.

    array1 = new Array(1, 2, 3);
    array1.join(",") //значение – строка "1, 2, 3")

    array2 = new Array("a", "b", "c");
    array2.join(" ") //значение – строка "a b c")

    В окне веб-браузера это будет выглядеть ТАК.

    А теперь давайте преобразуем массив названия планет в текстовую строку. На странице отображается поле, в котором можно ввести разделитель элементов массива в тексовой строке

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Методы Array.join</title>
    <script language="JavaScript">
    planets=new Array()
    planets[0]="Меркурий - ";
    planets[1]=" Венера - ";
    planets[2]=" Земля - ";
    planets[3]=" Марс - ";

    function fobus (form) {
    var truft=myForm.delim.value;
    myForm.output.value=unescape(planets.join(truft));
    }
    </script>
    </head>

    <body>
    <form action="" method="get" name="myForm">
    <p>Введите название планеты<br>
    <input name="delim" type="text" size="5">
    <br>
    <br>
    <input name="" type="button" value="Дисплей" onClick="fobus (this.form)">
    <input name="" type="reset">
    </p>
    <p>
    <textarea name="output" cols="40" rows="4" wrap="virtual"></textarea>
    </p>
    </form>
    </body>
    </html>

    В окне веб-браузера это будет выглядеть ТАК.

  • ор() — удаляет последний элемент массива и возвращает его значение
  • .

    Синтаксис:

    имя_массива.рор()

    Возвращает значение удаленного элемента массива. Данный метод изменяет исходный массив.

  • push(значение|объект)— добавляет к массиву указанное значение в качестве последнего элемента и возвращает новую длину массива.
  • Синтаксис:

    имя_массива1.push(значение|объект)

    Возвращает число. Данный метод изменяет исходный массив.

  • shift() – удаляет первый элемент массива и возвращает его значение.
  • Синтаксис:

    имя.массива.shift()

    Возвращает значение удаленного элемента массива. Данный метод изменяет исходный массив.

  • unshift.(значение|объект) — добавляет к массиву указанное значение в качестве первого элемента.
  • Синтаксис:

    имя_массива.(значение|объект)

    Возвращает: ничего. Данный метод изменяет исходный массив.

    В программировании существует такое понятие – стек. Классическую аналогию этому понятию дает стопка подносов в кафе, где каждый поднос кладется поверх предыдущего. Посетитель забирает самый верхний поднос, т.е. последний добавленный в стек. Таким образом последний элемент добавленный в стек, извлекается из него первым. К такому стеку с любого конца, можно посредством одного из методов, добавить или извлечь данные. Рассмотрим, что происходит с массивом, используемым как стек.

    planets=new Array()
    planets[0]="Меркурий - ";
    planets[1]=" Венера - ";
    planets[2]=" Земля - ";
    planets[3]=" Марс - ";
    var stack = new Array //стек= <пустой>
    stack.push(planets[0]) //стек="Меркурий - "
    stack.push(planets[2]) //стек="Меркурий - ", " Земля - "
    var Simpson1= stack.pop()
    //стек="Меркурий - "; Simpson1= " Земля - "
    var Simpson2 = stack.pop()
    //стек= <пустой>, Simpson2="Меркурий - "
  • reverse()— изменяет порядок следования элементов массива на противоположный. Синтаксис:
  • имя_массива.reverse()

    Возвращает массив. Данный метод изменяет исходный массив.

    planets=new Array()
    planets[0]="Меркурий - ";
    planets[1]=" Венера - ";
    planets[2]=" Земля - ";
    planets[3]=" Марс - ";
    planets . reverse();
    /*массив с элементами в следующем порядке:
    planets[0]=" Марс - ";
    planets[1]=" Земля - ";
    planets[2]=" Венера - "
    planets[3]="Меркурий - " */

    Рассмотрим пример.

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Методы Array.reverse</title>
    <script language="JavaScript">
    planets=new Array()
    planets[0]="Меркурий - ";
    planets[1]=" Венера - ";
    planets[2]=" Земля - ";
    planets[3]=" Марс - ";
    //отображение массива, находящегося в памяти
    function fobus (form) {
    var truft=myForm.delim.value;
    myForm.output.value=unescape(planets.join(truft));
    }
    //изменение направления массива и представление его строкой
    function revers (form) {
    var truft=myForm.delim.value;
    planets.reverse(); //изменение направления массива
    myForm.output.value=unescape(planets.join(truft));
    }
    </script>
    </head>

    <body>
    <form action="" method="get" name="myForm">
    <p>Введите название планеты<br>
    <input name="delim" type="text" size="5">
    <br>
    <br>
    <input name="" type="button" value="Дисплей" onClick="fobus (this.form)">
    <input name="" type="button" onClick="revers (this.form)" value="Revers">
    <input name="" type="reset">

    </p>
    <p>
    <textarea name="output" cols="40" rows="4" wrap="virtual"></textarea>
    </p>
    </form>
    </body>
    </html>

    В окне веб-браузера это будет выглядеть ТАК.

    Нажмите на кнопку "Дисплей". В текстовой области отразится список элементов массива.При нажатии кнопки "Revers" порядок следования элементов изменится на противоположный.

  • lice (индекс1[, индекс2]) – создает массив из элементов исходного массива с индексами указанного диапазона. Синтаксис:
  • имя_массива.slice (индекс1[, индекс2])

    Позволяет извлекать из массива набор соседних элементов. Полученный сегмент становится новым объектом массива. Значения и объекты из исходного массива ведут себя также, как и массивы созданные методом массив.concat().

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

    planets=new Array()
    planets[0]="Меркурий - ";
    planets[1]=" Венера - ";
    planets[2]=" Земля - ";
    planets[3]=" Марс - ";
    newplanets=planets.slice(1, 4);//результат: новый массив "Венера -" , "Земля - ", "Марс -"

    В окне веб-браузера это будет выглядеть ТАК.

  • sort ([функция_сравнения]) – сортирует (упорядочивает) элементы массива с помощью функции сравнения. Синтаксис:
  • имя_массива.sort ([функция_сравнения])

    Возвращает массив. Данный метод изменяет исходный массив. Параметр не обязателен, о чем свидетельствуют квадратные скобки.

    Если параметр не указан, то сортировка производится на основе сравнения ASCII-кодов символов значений. Это удобно для равнения символьных строк, но не совсем подходит для сравнения чисел. Так, число 164 при сортировке считается меньшим, чем 64, поскольку сначала сравниваются первые символы и только в случае их авенства сравниваются следующие, и т. д. Таким образом, метод без параметра подходит для простой сортировки массива со строковыми элементами.

    Можно создать свою собственную функцию для сравнения элементов массива, с помощью которой метод sort() отсортирует весь массив. Имя этой функции (без кавычек и круглых скобок) передается методу в качестве параметра. При работе метода функции передаются два элемента массива, а ее код возвращает методу значение, указывающее, какой из элементов должен следовать за другим. Допустим, сравниваются два элемента, х и у. Тогда в зависимости от числового значения (отрицательного, 0 или положительного), возвращаемого функцией сравнения, методом принимается одно из трех возможных решений:

    Возвращаемые значения функции сравнения

    Возвращаемое значение Описание
    меньше < 0 b следует за a
    0 Порядок следования a и b не изменяется
    больше > 0 a следует за b

    Рассмотрим пример.

    myArray = new Array(14, 3, 450, 90); //числовой массив

    function corms(a, b) { //функция сравнения

    return a-b

    }
    myArray.sort(corms) //массив с элементами в порядке: 3, 14, 90, 450

    В окне веб-браузера это будет выглядеть ТАК.

    Массив содержит четыре числовых сравнения. Для правильной их сортировки (в порядке возрастания) определена функция сравнения corms(), которую вызывает метод sort(). Характерно то, что в отличии от обычного вызова функций, аргументом метода sort() является указатель на нее.

    При вызове функции corms() JavaScript автоматически посылает ей два аргумента, приводя сравнение каждого элемента со всеми остальными. При каждом вызове corms() JavaScript передает переменным а и b два элемента массива. В предыдущем примере функция возвращает разность а и b. Если а больше b, метод sort() получает положительное значение, т.е а должно следовать после b(индекс элемента а должен быть больше индекса b). Поэтому b в итоге может оказаться элементом myArray[0], а а – элементом с большим индексом. Если же а меньше b, тогда возвращаемое значение отрицательно и метод sort() делает индекс элемента а меньшим чем b.

  • splice (индекс,количество[, элем 1[, элем2[, ... , элемN]]]) — удаляет из массива несколько элементов и возвращает массив из удаленных элементов или заменяет значения элементов.
  • Синтаксис:

    имя_массива. splice (индекс,количество[, элем 1[, элем2[, ... , элемN]]])

    Возвращает массив. Данный метод изменяет исходный массив.

    Первые два параметра обязательны, а следующие — нет. Первый параметр является индексом первого удаляемого элемента, а второй — количеством удаляемых элементов.

    Рассмотрим пример.

    planets=new Array()
    planets[0]="Меркурий - ";
    planets[1]=" Венера - ";
    planets[2]=" Земля - ";
    planets[3]=" Марс - ";

    a=planets.slice(0,3) //а- массив элементов: Меркурий - , Венера - , Земля
    //planets-массив элементов Марс
    document.write(a)

    В окне веб-браузера это будет выглядеть ТАК.

    Метод позволяет также заменить значения элементов исходного массива, если указаны третий и, возможно, последующие параметры. Эти параметры представляют значения, которыми следует заменить исходные значения элементов массива. При таком использовании метода splice() важен первый параметр (индекс), а второй (количество) может быть равным нулю. В любом случае, если количество элементов замены больше значения второго параметра, то часть элементов исходного массива будет заменена, а часть элементов будет просто вставлена в него. При этом метод возвращает другой массив, состоящий из элементов исходного, индексы которых соответствуют первому и второму параметрам. Но это справедливо, если второй параметр не равен 0.

  • oLocaleString(), toString() – преобразуют содержимое массива в символьную строку.
  • Если массив необходимо преобразовать в строку для других целей, лучше пользоваться методом массива join(). Он предоставляет более надежный и гибкий способ управления символами разделителями. Кроме того результат будет одинаковым независимо от локализации.