Инструменты пользователя

Инструменты сайта


object_array

Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

object_array [2018/11/28 07:08] (текущий)
Строка 1: Строка 1:
 +====== Object Array массивы в JavaScript ​ ======
 +
 +{{htmlmetatags>​
 +metatag-description=(Создание и использование массивов в JavaScript.)
 +}}
 +
 +  * [[http://​w3schools.com/​jsref/​jsref_obj_array.asp|Object Array]]
 +  * [[http://​javascript.ru/​basic/​array|Массивы]]
 +Массивы в [[JavaScript]] представляют собой объектный тип данных,​ служащий для хранения и обработки множества значений (чаще всего одного типа данных). Использование массивов в некоторых сценариях позволяет сделать код более компактным,​ в первую очередь благодаря сокращению количества объявляемых переменных.
 +Массивы создаются при помощи оператора new. Существует три варианта вызова конструктора Array(): ​
 +<​file>​
 +/* обычный синтаксис */
 +var array = [ elem0, elem1, elem2, ... ]
 +var empty = []
 +
 +/* Синтаксис с new Array() */
 +var empty = new Array(); // создание пустого массива ​
 +var a = new Array(length);​ // создание массива из "​length"​ неопределенных значений ​
 +var a = new Array(item1,​ item2, ...); // создание массива из заданных значений
 +</​file> ​
 +Элементы массива хранятся последовательно,​ причем,​ каждый элемент имеет свой индекс (номер по порядку). Нумерация элементов массивов в JavaScript начинается с нуля. Для доступа к элементу массива используют имя массива и индекс элемента,​ записанный после имени в квадратных скобках: ​
 +<​file>​
 +a[0] = 2;
 +b = a[0]*2;
 +</​file>​
 +===== Работа с массивами =====
 +==== Ввод массива с клавиатуры ====
 +
 +Для ввода массива с клавиатуры чаще всего используют цикл. Если количество элементов массива известно заранее,​ используют цикл for. В противном случае подойдет цикл с постусловием do...while. Приведем пример: ​
 +
 +<​file>​
 +var a = new Array();
 +var count = 10;
 +for (var i=0; i<count; i++)
 +    a[i]=parseInt(prompt("​Введите целое число:",​ ""​));​
 +alert("​Массив:​ "​+a.join(",​ ")); // вывод массива
 +</​file> ​
 + 
 +
 +В приведенном фрагменте кода массив выводится в виде строки,​ где элементы массива разделяются символами ", ". Если массив необходимо вывести поэлементно,​ то можно будет снова использовать цикл for, так как длина массива нам известна и возвращается свойством length объекта Array(). ​
 +
 +==== Добавление элементов в массив ====
 +
 +Для добавления элементов в массив можно воспользоваться методами push() и unshift(). Метод push() добавляет элементы в конец массива,​ а метод unshift() - в начало. Рассмотрим пример применения этих методов: ​
 +
 +<​file>​
 +var a = new Array(1,​2,​3);​
 +alert ("​Исходный массив:​ "​+a.join(",​ "));
 +if (confirm("​Добавить в начало?"​)) {
 +    a.unshift(-2,​-1,​0);​
 +
 +else {
 +    a.push(4,​5,​6);​
 +}
 +alert ("​Итоговый массив:​ "​+a.join(",​ "));
 +</​file>​
 +Эти методы не позволяют добавить массив в массив. Для этих целей используйте метод concat()
 +
 +==== Удаление элементов из массива ====
 +
 +Для удаления элементов из массива используйте методы pop() и shift(). Метод pop() удаляет последний элемент массива,​ а метод shift() - первый. Рассмотрим пример применения этих методов: ​
 +
 +<​file>​
 +var a = new Array(0,​1,​2,​3,​ 4);
 +alert ("​Исходный массив:​ "​+a.join(",​ "));
 +if (confirm("​Удалить первый?"​)) {
 +    a.shift();
 +
 +else {
 +    a.push();
 +}
 +alert ("​Итоговый массив:​ "​+a.join(",​ "));
 +</​file>​
 +
 +Для удаления элемента располагающегося не в начале или в конце массива можно использовать метод splice() со следующими параметрами:​ splice(index,​ 1), где index - номер удаляемого элемента. Следующий пример демонстрирует удаление элемента с индексом "​2":​
 +
 +<​file>​
 +var a = new Array(1,​2,​3,​4);​
 +alert ("​Исходный массив:​ "​+a.join(",​ "));
 +a.splice (2,1);
 +alert ("​Итоговый массив:​ "​+a.join(",​ "));
 +</​file>​
 +
 +==== Применение метода sort() ====
 +
 +Метод sort(), как упоминалось выше, позволяет выполнить сортировку,​ т.е. упорядочивание,​ элементов массива по заданному критерию. По умолчанию метод sort() рассматривает элементы как строки и критерием считается порядок символов строки в соответствии с таблицей ASCII. Для реализации других критериев сортировки элементов вы должны будете написать функцию,​ которая определяет порядок сортировки и строится следующим образом: ​
 +
 +функция должна принимать два параметра (назовем их a1 и a2) 
 +в случае,​ если a1 > a2, функция должна вернуть положительное значение ​
 +в случае,​ если a1 < a2, функция должна вернуть отрицательное значение ​
 +в случае,​ если a1 == a2, функция должна вернуть 0. 
 +Рассмотрим вышесказанное на практике:​ необходимо ввести массив целых чисел и отсортировать его по возрастанию и убыванию значений элементов. ​
 +
 +Листинг:​ сортировка элементов массива методом '​sort()'  ​
 +<​file>​
 +// объявление и ввод массива ​
 +var a = new Array();
 +var count = 5;
 +for (var i=0; i<count; i++)
 +    a[i]=parseInt(prompt("​Введите целое число:",​ ""​));​
 +alert("​Неотсортированный массив:​ "​+a.join(",​ ")); // вывод массива  ​
 +a.sort();
 +alert("​Строковая сортировка массива:​ "​+a.join(",​ ")); // вывод массива  ​
 +a.sort(numUp);​
 +alert("​Числовая сортировка по возрастанию:​ "​+a.join(",​ ")); // вывод массива  ​
 +a.sort(numDown);​
 +alert("​Числовая сортировка по убыванию:​ "​+a.join(",​ ")); // вывод массива  ​
 +
 +// функции сравнения элементов  ​
 +function numUp(a1, a2) { // сортировка по возрастанию  ​
 +    return a1-a2;
 +}
 +function numDown(a1, a2) { // сортировка по убыванию  ​
 +    return a2-a1;
 +}
 +</​file>​
 +<​note>​На самом деле, функцию для обратной сортировки массива можно было не писать. Достаточно отсортировать массив по возрастанию значений,​ а, затем, вызвать метод reverse() для получения обратного порядка следования элементов.</​note> ​
 +==== Работа со свойством prototype ====
 +Свойство prototype позволяет добавить в готовый объект новое свойство или метод. Для того, чтобы лучше понять принципы работы с этим замечательным свойством рассмотрим пример реализации метода max() (поиск максимального элемента) в массиве: ​
 +
 +Листинг:​ использование сойства '​prototype'  ​
 +<​file>​
 +function array_max(){
 +    var i, max = this[0];
 +    for (i = 1; i < this.length;​ i++)
 +        if (max < this[i])
 +            max = this[i];
 +    return max;
 +}
 +Array.prototype.max = array_max; ​
 +
 +var a = new Array();
 +var count = 5;
 +for (var i=0; i<count; i++)
 +    a[i]=parseInt(prompt("​Введите целое число:",​ ""​));​
 +alert("​Массив:​ "​+a.join(",​ ")); // вывод массива  ​
 +alert("​Максимум:​ "​+a.max());​ // вывод максимума ​
 +</​file> ​
 +
 +В примере сначала описывается функция array_max(),​ определяющая максимум текущего массива,​ обращаясь к его свойствам и элементам посредством указателя this. Затем, строка Array.prototype.max = array_max; добавляет метод max() в массив. Вызов метода max() осуществляется традиционным образом. ​
 +
 +===== Многомерные массивы =====
 +К сожалению,​ в JavaScript отсутствует стандартная реализация многомерных массивов (даже 2-мерных). Однако,​ этот печальный недостаток можно обойти,​ создав массив массивов. Для этого необходимо создать массив,​ а, затем, каждый элемент этого массива так же сделать массивом. Выглядит это примерно так: ​
 +
 +<​file>​
 +var n=3, //​количество строк ​
 +    m=5; //​количество элементов в строке (столбцов) ​
 +var a = new Array ();
 +for (var i=0; i<n; i++) {
 +    a[i] = new Array (); //​каждый элемент массива тоже массив! ​
 +    for (var j=0; j<m; j++) {
 +        a[i][j] = i*j;
 +    }
 +}
 +</​file>​
 +
 +В приведенном примере создается и заполняется двумерный массив. Таким же образом можно создать и массивы большей размерности (3,4,5 и т.д). Для перебора элементов многомерных массивов используются вложенные циклы. Количество вложенных циклов,​ как правило,​ определяется количеством измерений создаваемого массива. На практике редко применяются даже двумерные массивы,​ не говоря уже о массивах большей размерности. ​
 +
 +===== Кое что об индексах... =====
 +
 +До сих пор говорилось,​ о том, что индекс элемента в массиве - целое число, определяющее порядковый номер элемента. На самом деле, индексом элемента в массиве может быть и уникальный в рамках одного массива строковый идентификатор (то есть строка!). Возникает вполне резонный вопрос - зачем это нужно? Если вдуматься,​ то использование строк в качестве идентификаторов элемента массива в ряде случаев оказывается полезным. Можно, например,​ хранить в массиве пароли пользователей,​ а индексами элементов считать имена пользователей: ​
 +
 +<​file>​
 +var users = new Array();
 +users["​admin"​] = "​qxpfr45d";​
 +users["​mama"​] = "​nf67r";​
 +users["​papa"​] = "​pwr12aa";​
 +users["​gosti"​] = "";​
 +
 +var l = prompt("​Введите свой логин:",​ "​gosti"​);​
 +var p = prompt("​Введите свой пароль:",​ ""​);​
 +if (p == users[l]) {
 +    alert ("​Привет!"​);​
 +    //​дальнейшие действия ... 
 +}
 +else {
 +    alert ("​Неверный логин или пароль"​);​
 +}
 +</​file>​
 +С точки зрения клиентского сценария данный пример не представляет практического интереса. Любой желающий может просмотреть код скрипта,​ увидеть в нем логин и пароль и воспользоваться ими для входа на страницу. Однако,​ не стоит забывать,​ что JavaScript используется для написания не только клиентских,​ но и серверных сценариев,​ код которых не посылается пользователю,​ а выполняется на сервере. В этом случае приведенный механизм защиты становится не таким уж и плохим.
 +
 +===== Методы высшего порядка (forEach, filter etc) =====
 +
 +
 +У массивов есть несколько полезных методов высшего порядка – **forEach**,​ чтобы сделать что-то с каждым элементом,​ **filter** – чтобы построить новый массив,​ где некоторые значения отфильтрованы,​ **map** – чтобы построить новый массив,​ каждый элемент которого пропущен через функцию,​ **reduce** – для комбинации всех элементов массива в одно значение.
  
загрузка...
object_array.txt · Последние изменения: 2018/11/28 07:08 (внешнее изменение)