Массивы
Массив - это упорядоченная коллекция значений. Значения в массиве называются элементами, и каждый элемент характеризуется числовой позицией в массиве, которая называется индексом. Массивы в языке JavaScript являются нетипизированными: элементы массива могут иметь любой тип, причем разные элементы одного и того же массива могут иметь разные типы. Элементы массива могут даже быть объектами или другими массивами, что позволяет создавать сложные структуры данных, такие как массивы объектов и массивы массивов.
Отсчет индексов массивов в языке JavaScript начинается с нуля и для них используются 32-битные целые числа - первый элемент массива имеет индекс 0. Массивы в JavaScript являются динамическими: они могут увеличиваться и уменьшаться в размерах по мере необходимости; нет необходимости объявлять фиксированные размеры массивов при их создании или повторно распределять память при изменении их размеров.
Массивы в языке JavaScript - это специализированная форма объектов, а индексы массивов означают чуть больше, чем просто имена свойств, которые по совпадению являются целыми числами.
Создание массивов
Легче всего создать массив с помощью литерала, который представляет собой простой список разделенных запятыми элементов массива в квадратных скобках. Значения в литерале массива не обязательно должны быть константами - это могут быть любые выражения, в том числе и литералы объектов:
Var empty = ; // Пустой массив var numbers = ; // Массив с пятью числовыми элементами var misc = [ 1.1, true, "a", ]; // 3 элемента разных типов + завершающая запятая var base = 1024; var table = ; // Массив с переменными var arrObj = [, ]; // 2 массива внутри, содержащие объекты
Синтаксис литералов массивов позволяет вставлять необязательную завершающую запятую, т.е. литерал [,] соответствует массиву с двумя элементами, а не с тремя.
Другой способ создания массива состоит в вызове конструктора Array() . Вызвать конструктор можно тремя разными способами:
Вызвать конструктор без аргументов:
Var arr = new Array();
В этом случае будет создан пустой массив, эквивалентный литералу .
Вызвать конструктор с единственным числовым аргументом, определяющим длину массива:
Var arr = new Array(10);
В этом случае будет создан пустой массив указанной длины. Такая форма вызова конструктора Array() может использоваться для предварительного распределения памяти под массив, если заранее известно количество его элементов. Обратите внимание, что при этом в массиве не сохраняется никаких значений.
Явно указать в вызове конструктора значения первых двух или более элементов массива или один нечисловой элемент:
Var arr = new Array(5, 4, 3, 2, 1, "тест");
В этом случае аргументы конструктора становятся значениями элементов нового массива. Использование литералов массивов практически всегда проще, чем подобное применение конструктора Array().
Чтение и запись элементов массива
Доступ к элементам массива осуществляется с помощью оператора . Слева от скобок должна присутствовать ссылка на массив. Внутри скобок должно находиться произвольное выражение, возвращающее неотрицательное целое значение. Этот синтаксис пригоден как для чтения, так и для записи значения элемента массива. Следовательно, допустимы все приведенные далее JavaScript-инструкции:
// Создать массив с одним элементом var arr = ["world"]; // Прочитать элемент 0 var value = arr; // Записать значение в элемент 1 arr = 3.14; // Записать значение в элемент 2 i = 2; arr[i] = 3; // Записать значение в элемент 3 arr = "привет"; // Прочитать элементы 0 и 2, записать значение в элемент 3 arr] = arr;
Напомню, что массивы являются специализированной разновидностью объектов. Квадратные скобки, используемые для доступа к элементам массива, действуют точно так же, как квадратные скобки, используемые для доступа к свойствам объекта. Интерпретатор JavaScript преобразует указанные в скобках числовые индексы в строки - индекс 1 превращается в строку "1" - а затем использует строки как имена свойств.
В преобразовании числовых индексов в строки нет ничего особенного: то же самое можно проделывать с обычными объектами:
Var obj = {}; // Создать простой объект obj = "one"; // Индексировать его целыми числами
Особенность массивов состоит в том, что при использовании имен свойств, которые являются неотрицательными целыми числами, массивы автоматически определяют значение свойства length . Например, выше был создан массив arr с единственным элементом. Затем были присвоены значения его элементам с индексами 1, 2 и 3. В результате этих операций значение свойства length массива изменилось и стало равным 4.
Следует четко отличать индексы в массиве от имен свойств объектов. Все индексы являются именами свойств, но только свойства с именами, представленными целыми числами являются индексами. Все массивы являются объектами, и вы можете добавлять к ним свойства с любыми именами. Однако если вы затрагиваете свойства, которые являются индексами массива, массивы реагируют на это, обновляя значение свойства length при необходимости.
Обратите внимание, что в качестве индексов массивов допускается использовать отрицательные и не целые числа. В этом случае числа преобразуются в строки, которые используются как имена свойств.
Добавление и удаление элементов массива
Мы уже видели, что самый простой способ добавить элементы в массив заключается в том, чтобы присвоить значения новым индексам. Для добавления одного или более элементов в конец массива можно также использовать метод push() :
Var arr = ; // Создать пустой массив arr.push("zero"); // Добавить значение в конец arr.push("one",2); // Добавить еще два значения
Добавить элемент в конец массива можно также, присвоив значение элементу arr. Для вставки элемента в начало массива можно использовать метод unshift() , при этом существующие элементы в массиве смещаются в позиции с более высокими индексами.
Удалять элементы массива можно с помощью оператора delete, как обычные свойства объектов:
Var arr = ; delete arr; 2 in arr; // false, индекс 2 в массиве не определен arr.length; // 3: оператор delete не изменяет свойство length массива
Удаление элемента напоминает (но несколько отличается) присваивание значения undefined этому элементу. Обратите внимание, что применение оператора delete к элементу массива не изменяет значение свойства length и не сдвигает вниз элементы с более высокими индексами, чтобы заполнить пустоту, оставшуюся после удаления элемента.
Кроме того имеется возможность удалять элементы в конце массива простым присваиванием нового значения свойству length. Массивы имеют метод pop() (противоположный методу push()), который уменьшает длину массива на 1 и возвращает значение удаленного элемента. Также имеется метод shift() (противоположный методу unshift()), который удаляет элемент в начале массива. В отличие от оператора delete, метод shift() сдвигает все элементы вниз на позицию ниже их текущих индексов.
Наконец существует многоцелевой метод splice() , позволяющий вставлять, удалять и замещать элементы массивов. Он изменяет значение свойства length и сдвигает элементы массива с более низкими или высокими индексами по мере необходимости. Все эти методы мы разберем чуть позже.
Многомерные массивы
JavaScript не поддерживает «настоящие» многомерные массивы, но позволяет неплохо имитировать их при помощи массивов из массивов. Для доступа к элементу данных в массиве массивов достаточно дважды использовать оператор .
Например, предположим, что переменная matrix - это массив массивов чисел. Каждый элемент matrix[x] - это массив чисел. Для доступа к определенному числу в массиве можно использовать выражение matrix[x][y]. Ниже приводится конкретный пример, где двумерный массив используется в качестве таблицы умножения:
// Создать многомерный массив var table = new Array(10); // В таблице 10 строк for(var i = 0; i
Методы класса Array
Стандарт ECMAScript 3 определяет в составе Array.prototype множество удобных функций для работы с массивами, которые доступны как методы любого массива. Эти методы будут представлены в следующих подразделах.
Метод join()
Метод Array.join() преобразует все элементы массива в строки, объединяет их и возвращает получившуюся строку. В необязательном аргументе методу можно передать строку, которая будет использоваться для отделения элементов в строке результата. Если строка-разделитель не указана, используется запятая. Например, следующий фрагмент дает в результате строку "1,2,3":
Var arr = ; arr.join(); // "1,2,3" arr.join("-"); // "1-2-3"
Метод reverse()
Метод Array.reverse() меняет порядок следования элементов в массиве на обратный и возвращает переупорядоченный массив. Перестановка выполняется непосредственно в исходном массиве, т.е. этот метод не создает новый массив с переупорядоченными элементами, а переупорядочивает их в уже существующем массиве. Например, следующий фрагмент, где используются методы reverse() и join(), дает в результате строку "3,2,1":
Var arr = ; arr.reverse().join(); // "3,2,1"
Метод sort()
Метод Array.sort() сортирует элементы в исходном массиве и возвращает отсортированный массив. Если метод sort() вызывается без аргументов, сортировка выполняется в алфавитном порядке (для сравнения элементы временно преобразуются в строки, если это необходимо). Неопределенные элементы переносятся в конец массива.
Для сортировки в каком-либо ином порядке, отличном от алфавитного, методу sort() можно передать функцию сравнения в качестве аргумента. Эта функция устанавливает, какой из двух ее аргументов должен следовать раньше в отсортированном списке. Если первый аргумент должен предшествовать второму, функция сравнения должна возвращать отрицательное число. Если первый аргумент должен следовать за вторым в отсортированном массиве, то функция должна возвращать число больше нуля. А если два значения эквивалентны (т.е. порядок их следования не важен), функция сравнения должна возвращать 0:
Var arr = ; arr.sort(); // Алфавитный порядок: 1111, 222, 33, 4 arr.sort(function(a,b) { // Числовой порядок: 4, 33, 222, 1111 return a-b; // Возвращает значение 0 // в зависимости от порядка сортировки a и b }); // Сортируем в обратном направлении, от большего к меньшему arr.sort(function(a,b) {return b-a});
Обратите внимание, насколько удобно использовать в этом фрагменте неименованную функцию. Функция сравнения используется только здесь, поэтому нет необходимости давать ей имя.
Метод concat()
Метод Array.concat() создает и возвращает новый массив, содержащий элементы исходного массива, для которого был вызван метод concat(), и значения всех аргументов, переданных методу concat(). Если какой-либо из этих аргументов сам является массивом, его элементы добавляются в возвращаемый массив. Следует, однако, отметить, что рекурсивного превращения массива из массивов в одномерный массив не происходит. Метод concat() не изменяет исходный массив. Ниже приводится несколько примеров:
Var arr = ; arr.concat(4, 5); // Вернет arr.concat(); // Вернет arr.concat(,) // Вернет arr.concat(4, ]) // Вернет ]
Метод slice()
Метод Array.slice() возвращает фрагмент, или подмассив, указанного массива. Два аргумента метода определяют начало и конец возвращаемого фрагмента. Возвращаемый массив содержит элемент, номер которого указан в первом аргументе, плюс все последующие элементы, вплоть до (но не включая) элемента, номер которого указан во втором аргументе.
Если указан только один аргумент, возвращаемый массив содержит все элементы от начальной позиции до конца массива. Если какой-либо из аргументов имеет отрицательное значение, он определяет номер элемента относительно конца массива. Так, аргументу -1 соответствует последний элемент массива, а аргументу -3 - третий элемент массива с конца. Вот несколько примеров:
Var arr = ; arr.slice(0,3); // Вернет arr.slice(3); // Вернет arr.slice(1,-1); // Вернет arr.slice(-3,-2); // Вернет
Метод splice()
Метод Array.splice() - это универсальный метод, выполняющий вставку или удаление элементов массива. В отличие от методов slice() и concat(), метод splice() изменяет исходный массив, относительно которого он был вызван. Обратите внимание, что методы splice() и slice() имеют очень похожие имена, но выполняют совершенно разные операции.
Метод splice() может удалять элементы из массива, вставлять новые элементы или выполнять обе операции одновременно. Элементы массива при необходимости смещаются, чтобы после вставки или удаления образовывалась непрерывная последовательность.
Первый аргумент метода splice() определяет позицию в массиве, начиная с которой будет выполняться вставка и/или удаление. Второй аргумент определяет количество элементов, которые должны быть удалены (вырезаны) из массива. Если второй аргумент опущен, удаляются все элементы массива от указанного до конца массива. Метод splice() возвращает массив удаленных элементов или (если ни один из элементов не был удален) пустой массив.
Первые два аргумента метода splice() определяют элементы массива, подлежащие удалению. За этими аргументами может следовать любое количество дополнительных аргументов, определяющих элементы, которые будут вставлены в массив, начиная с позиции, указанной в первом аргументе.
Var arr = ; arr.splice(4); // Вернет , arr = arr.splice(1,2); // Вернет , arr = arr.splice(1,1); // Вернет ; arr = arr = ; arr.splice(2,0,"a","b"); // Вернет ; arr =
Методы push() и pop()
Методы push() и pop() позволяют работать с массивами как со стеками. Метод push() добавляет один или несколько новых элементов в конец массива и возвращает его новую длину. Метод pop() выполняет обратную операцию - удаляет последний элемент массива, уменьшает длину массива и возвращает удаленное им значение. Обратите внимание, что оба эти метода изменяют исходный массив, а не создают его модифицированную копию.
Методы unshift() и shift()
Методы unshift() и shift() ведут себя почти так же, как push() и pop(), за исключением того, что они вставляют и удаляют элементы в начале массива, а не в конце. Метод unshift() смещает существующие элементы в сторону больших индексов для освобождения места, добавляет элемент или элементы в начало массива и возвращает новую длину массива. Метод shift() удаляет и возвращает первый элемент массива, смещая все последующие элементы на одну позицию вниз, чтобы занять место, освободившееся в начале массива.
В JavaScript . Здесь мы продолжим знакомство с Массивами. Поговорим о свойстве length - как узнать: сколько же элементов содержит Массив?
Научимся добавлять элементы в начало и конец Массива - это методы unshift и push соответственно.
А также с помощью методов shift и pop сможем удалить элементы также из начала и конца Массива!
По сути, Массив - это некий объект, состоящий из определенного числа различных элементов.
Свойство length позволят узнать количество элементов в Массиве.
Для примера давайте возьмём Массив семи дней недели знакомый нам по прошлой теме .
Давайте узнаем и выведем на экран число элементов массива. Для этого необходимо, как Вы видите в примере ниже, создать переменную, значением которой будет интересующий нас массив, для которого, в свою очередь, указано свойство length .
array.length - такой код даёт нам число элементов Массива (где array - имя Массива) .
Таким образом, в переменную count мы поместили число, равное количеству элементов Массива.
Вот так работает свойство length .
Метод push - добавляет элемент в конец Массива .
Для того чтобы начать работу с методами добавления элементов, нужно создать какой-либо Массив.
Ниже я создал Массив «Друзья» - friends .
Сейчас нам необходимо добавить элемент, то есть ещё одно Имя в конец Массива.
Для этого существует метод push - он добавляет элемент в конец Массива. Это выглядит следующим образом:
Настя, Григорий, Вячеслав, Алексей, Яков
Яков
Для проверки работы метода push в примере выше, мы вывели количество элементов Массива friends при помощи свойства length - их стало 5. Затем вывели весь Массив friends , а также последний элемент Массива .
Теперь Вы можете сами убедиться, что элемент добавлен в конец Массива!
Метод unshift - добавляет элемент в начало Массива .
Здесь мы снова обратимся к Массиву friends .
Теперь нам нужно добавить элемент в начало Массива. Для этого существует метод unshift .
Количество элементов в Массиве равно 5
Борис , Настя, Григорий, Вячеслав, Алексей
Борис
Для проверки работы метода unshift мы вывели количество элементов Массива friends при помощи свойства length , потом вывели весь Массив friends , а также первый элемент Массива (напоминаем, что нумерация элементов Массива начинается с 0) .
Теперь, как видите, элемент добавлен в начало Массива!
Метод pop - удаляет последний элемент из Массива .
И снова работаем с Массивом «Друзья»
Используя метод pop - удаляем последний элемент из Массива :
Настя, Григорий, Вячеслав
Вячеслав
Для наглядности работы метода pop мы снова вывели количество элементов Массива при помощи свойства length , затем вывели весь Массив friends - уже без удалённого последнего элемента.
А также вывели последний элемент вновь получившегося Массива. Для вывода последнего элемента, воспользовавшись свойством length, мы взяли общее число оставшихся элементов в Массиве (3) и вычли из него 1. Таким образом, мы вывели последний элемент массива под номером 2. Но это третий элемент, так как нумерация в Массиве начинается с 0!!!
Метод shift - удаляет первый элемент из Массива .
Перед нами, как и ранее, Массивом «Друзья»
С помощью метода shift - удаляем первый элемент из Массива :
Количество элементов в Массиве равно 3
Григорий, Вячеслав, Алексей
Григорий
И, наконец, для проверки работы метода shift мы вывели количество элементов вновь получившегося Массива при помощи свойства length , затем вывели весь Массив friends - уже без удалённого первого элемента.
А также вывели первый элемент Массива . Нумерация в Массиве начинается с 0!!!
Напомню для Вас и для себя один интересный момент этой статьи!
Для того чтобы узнать номер/индекс последнего элемента Массива, нужно из числа его элементов (т.е. из ) Вычесть единицу!!!
Мы уже работали с этим в пункте темы .
Хорошим вариантом иллюстрации этого момента будет продолжение примера из пункта темы, где мы рассматривали Массив семи дней недели.
Количество элементов в Массиве days равно 7
Номером последнего элемента Массива является число 6
Итак, этим примером мы заодно ещё раз отметили тот факт, что нумерация в Массиве начинается с 0 . И, как видно из этого примера, номером 7-го элемента массива является число 6.
В конце этой темы также выполним домашнее задание. И снова попробуйте решить его самостоятельно.
Домашнее задание по удалению из... и добавлению элементов в Массив в Javascript имеет следующее содержание:
1. Создайте массив с фруктами: апельсин, банан, груша.
2. Выведите на экран, сколько на данный момент у вас фруктов в массиве.
3. С помощью методов, изученных в предыдущем уроке, добавьте в конец массива два фрукта - яблоко и ананас, а в начало массива - грейпфрут.
4. Выведите на экран, сколько на данный момент у вас фруктов в массиве.
5. С помощью методов, изученных в предыдущем уроке, удалите из массива последний и первый элемент.
6. Выведите на экран, сколько на данный момент у вас фруктов в массиве.
Апельсин, Банан, Груша
Сейчас в моей корзине 3 фрукта
Грейпфрут, Апельсин, Банан, Груша, Яблоко, Ананас
Сейчас в моей корзине 6 фруктов
Апельсин, Банан, Груша, Яблоко
Сейчас в моей корзине 4 фрукта
В этой статье мы рассмотрим стандартные JavaScript массивы с числовыми индексами. Массивы объявляются с помощью квадратных скобок:
var fruits = ["Apple", "Orange", "Donkey"]
Чтобы извлечь элемент, поместите его индекс в квадратные скобки. Первый индекс 0 :
var fruits = ["Apple", "Orange", "Donkey"] alert(fruits) alert(fruits) alert(fruits)
Мы также можем получить длину массива JavaScript :
var fruits = ["Apple", "Orange", "Donkey"] alert(fruits.length)
Упс! Мы создали массив с двумя фруктами и ослом. Теперь нам нужно удалить осла.
Методы pop и push
Метод pop в JavaScript удаляет элемент массива и возвращает его.
В следующем примере показано, как «Осел » извлекается из массива:
var fruits = ["Apple", "Orange", "Donkey"] alert("Я удаляю "+fruits.pop()) // Теперь у нас только ["Apple","Orange"] alert("Теперь размер массива: "+fruits.length) // осел удален
Обратите внимание, что pop изменяет сам массив.
Аналог pop — это метод push , который добавляет элемент в массив. Например, мы забыли добавить персик:
var fruits = ["Apple", "Orange"] fruits.push("Peach"); // теперь у нас есть ["Apple", "Orange", "Peach"] alert("Последний элемент:"+fruits)
- Создайте массив styles с элементами “Jazz ”, “Blues ”;
- Добавьте значение «Rock’n’Roll «;
- Замените второе значение с конца значением «Classic «. У вас должен получиться массив: “Jazz ”, ”Classic ”, ”Rock’n’Roll ”. Код должен работать для любой длины массива;
- Извлеките последнее значение из массива и выведите его через alert .
Решение
// 1 var styles = ["Jazz", "Bluez"] // 2 styles.push("Rock"n"Roll") // или: styles = "Rock"n"Roll" // 3 styles = "Classic" // 4 alert(styles.pop())
Методы shift/unshift
Методы shift/unshift работают с концом массива, но вы также можете использовать shift , чтобы сдвинуть элементы вверх (первое значение массива удаляется со сдвигом элементов ). Метод unshift позволяет в JavaScript добавить элемент в массив с конца:
var fruits = ["Apple", "Orange"] var apple = fruits.shift() // теперь у нас остался только ["Orange"] fruits.unshift("Lemon") // теперь мы имеем ["Lemon", "Orange"] alert(fruits.length) // 2
И shift , и unshift могут работать с несколькими элементами одновременно:
var fruits = ["Apple"] fruits.push("Orange","Peach") fruits.unshift("Pineapple","Lemon") // теперь массив выглядит так: ["Pineapple", "Lemon", "Apple", "Orange", "Peach"]
Задание для самостоятельного выполнения
Напишите код, чтобы вывести через alert случайное значение из массива arr :
var arr = ["Plum","Orange","Donkey","Carrot","JavaScript"]
Примечание: Код для получения случайного числа от минимального до максимального значения (включительно ) следующий:
var rand = min + Math.floor(Math.random()*(max+1-min))
Решение
Нам нужно извлечь случайное число от 0 до arr.length-1 (включительно ):
var arr = ["Plum","Orange","Donkey","Carrot","JavaScript"] var rand = Math.floor(Math.random()*arr.length) alert(arr)
Перебор массива
В JavaScript перебор массива осуществляется с помощью цикла for :
var fruits = ["Pineapple", "Lemon", "Apple", "Orange", "Peach"]
for(var i=0; i Создайте функцию find(arr,value)
, которая находит значение в заданном массиве и возвращает его индекс или -1
, если значение не найдено. Например: arr = [ "test", 2, 1.5, false ]
find(arr, "test") // 0
find(arr, 2) // 1
find(arr, 1.5) // 2
find(arr, 0) // -1 Возможное решение может выглядеть так: function find(array, value) {
for(var i=0; i Но это неверно, потому что ==
не определяет разницу между 0
и false
. Более корректно при работе с массивами в JavaScript
использовать ===
. Кроме того новейший стандарт ES5
содержит функцию Array#indexOf
. С ее помощью мы можем определить функцию следующим образом: function find(array, value) {
if (array.indexOf) return array.indexOf(value)
for(var i=0; i Еще разумнее было бы определить find
через условие, чтобы проверить, существует ли метод indexOf
. Создайте функцию filterNumeric(arr)
, которая принимает массив и возвращает новый массив, содержащий только числовые значения из arr
. Пример того, как это должно работать: arr = ["a", 1, "b", 2];
arr = filterNumeric(arr);
// теперь arr = Решение заключается в том, чтобы перебрать массив и добавить значения в новый массив, если они являются числовыми. Иногда нужен быстрый способ преобразовать JavaScript
массив в строку. Именно для этого предназначен метод join
. Он объединяет массив в строку, используя заданный разделитель: var fruits = ["Lemon","Apple","Orange","Peach"];
var str = fruits.join(", ");
alert(str); Обратное преобразование легко выполняется с помощью метода split
: var fruits = "Apple,Orange,Peach";
var arr = fruits.split(",");
// arr содержит теперь ["Apple", "Orange", "Peach"]
alert(arr); Объект включает в себя свойство className
, которое содержит имена классов, разделенные пробелами: Напишите функцию addClass(obj, cls)
, которая добавляет класс cls
, но только если он не существует: ddClass(obj, "new") // obj.className="open menu new"
addClass(obj, "open") // без изменений (class already exists)
addClass(obj, "me") // obj.className="open menu new me"
alert(obj.className) // Нужно разделить className
и цикл на части. Если класс не найден, тогда он добавляется. Цикл немного оптимизирован для увеличения производительности: function addClass(elem, cls) {
for(var c = elem.className.split(" "), i=c.length-1; i>=0; i--) {
if (c[i] == cls) return
}
elem.className += " "+cls
}
var obj = { className: "open menu" }
addClass(obj, "new")
addClass(obj, "open")
alert(obj.className) // open menu new В приведенном выше примере переменная c определяется в начале цикла, и для ее последнего индекса задается значение i
. Сам цикл обрабатывается в обратном направлении, заканчиваясь условием i>=0
. Потому что i>=0
проверить быстрее, чем i
. Что в JavaScript
ускоряет поиск в массиве. С помощью свойства length
можно обрезать массив следующим образом: Вы задаете длину, и браузер обрезает массив. На самом деле в JavaScript Array
— это Object
, дополненный автоматической установкой длины и специальными методами. Это отличается от концепции в других языках, где массивы представляют собой непрерывный сегмент памяти. Это также отличается от очереди или стека на основе связанных списков. Ключи — это числа, но они могут иметь любые имена: arr =
arr = 5
arr.prop = 10 // не делайте так В JavaScript
массивы представляют собой хэш-таблицы с их преимуществами в плане производительности, но и с определенными недостатками. Например, push/pop
работают только с крайними элементами массива, поэтому они невероятно быстры. push
работает только с концом: var arr = ["My", "array"]
arr.push("something")
alert(arr) // строка "array" Методы shift/unshift
медленные, потому что им нужно изменить нумерацию всего массива. Метод splice
также может привести к изменению нумерации: Какой получится результат? Почему? arr = ["a", "b"]
arr.push(function() { alert(this) })
arr() // ? Поскольку массивы являются объектами, arr.. фактически является вызовом метода объекта, таким как objmethod: arr()
// то же самое что
arr()
// синтаксически это неправильно, но концептуально то же самое:
arr.2()
// переписанное в том же стиле, что и obj.method()
this = arr в таком случае передается функции, поэтому выводится содержимое arr.
arr = ["a", "b"]
arr.push(function() { alert(this) })
arr() // "a","b",функция Свойство length
позволяет получить не размер массива в JavaScript
, а последний индекс + 1
. Это важно, если речь идет о разреженных массивах, с «промежутками
» в индексах. В следующем примере мы добавим два элемента в пустые fruits
, но значение length
останется 100
: var fruits = // пустой массив
fruits = "Peach"
fruits = "Apple"
alert(fruits.length) // 100 (но элементов в массиве всего 2) Если вы попытаетесь вывести разреженный массив, браузер выдаст значения пропущенных индексов как пустые элементы: var fruits = // пустой массив
fruits = "Peach"
fruits = "Apple"
alert(fruits) // ,Peach,Apple (или что-то вроде этого) Но массив — это объект с двумя ключами. Недостающие значения не занимают места. Разреженные массивы ведут себя причудливо, когда к ним применяются методы массива. Они понятия не имеют о том, что индексы пропущены: var fruits =
fruits = "Peach"
fruits = "Apple"
alert(fruits.pop()) // выталкиваем "Apple" (на индекс 9)
alert(fruits.pop()) // выталкиваем не заданный элемент (на индекс 8) Старайтесь избегать разреженных массивов. Во всяком случае, их методы не будут работать нормально. Вместо этого используйте Object
. Как мы знаем, массивы — это объекты, поэтому мы могли бы использовать delete
, чтобы удалить значение: var arr = ["Go", "to", "home"]
delete arr
// теперь arr = ["Go", undefined, "home"]
alert(arr) // не задано Вы видите, что значение удаляется, но не так, как мы хотели бы, потому что массив содержит незаданный элемент. Оператор delete
удаляет пару ключ-значение, и это все. Естественно, так как массив — это только хэш, позиция удаленного элемента становится undefined
. Чаще всего нам нужно удалить элемент, не оставляя «дыр
» между индексами. Существует еще один метод, который поможет нам в этом. Метод splice может удалять элементы и заменять их в JavaScript
многомерных массивах. Его синтаксис: arr.splice(index, deleteCount[, elem1, ..., elemN]) Удаляет элемент deleteCount
, начиная с index
, а затем вставляет на его место elem1, …, elemN
. Давайте рассмотрим несколько примеров: var arr = ["Go", "to", "home"]
arr.splice(1, 1) // удалить 1 элемент, начиная с индекса 1
alert(arr.join(",")) // ["Go", "home"] (1 элемент удален) Таким образом, вы можете использовать splice
, чтобы удалить один элемент из массива. Номера элементов массива сдвигаются, чтобы заполнить пробел: var arr = ["Go", "to", "home"]
arr.splice(0, 1) // удаляем 1 элемент, начиная с индекса 0
alert(arr) // "to" стал первым элементом В следующем примере показано, как заменять элементы: Метод splice
возвращает массив удаленных элементов: var arr = ["Go", "to", "home", "now"];
// удаляем 2 первых элемента
var removed = arr.splice(0, 2)
alert(removed) // "Go", "to" <-- массив удаленных элементов
splice может вставлять элементы, задайте 0 для deleteCount.
var arr = ["Go", "to", "home"];
// со второй позиции
// удаляем 0
// и вставляем "my", "sweet"
arr.splice(2, 0, "my", "sweet")
alert(arr) // "Go", "to", "my", "sweet", "home" Данный метод также может использовать отрицательный индекс, который отсчитывается с конца массива: var arr =
// для элемента -1 (предпоследнего)
// удаляем 0 элементов,
// и вставляем 3 и 4
arr.splice(-1, 0, 3, 4)
alert(arr) // 1,2,3,4,5 Объект содержит свойство className
, в котором содержатся имена классов, разделенные пробелами: var obj = {
className: "open menu"
} Напишите функцию removeClass(obj, cls)
, которая удаляет класс cls
, если он задан: removeClass(obj, "open") // obj.className="menu"
removeClass(obj, "blabla") // без изменений (класса для удаления не существует) Нужно разделить className
на части и перебрать эти части через цикл. Если найдено совпадение, оно удаляется из JavaScript
массива объектов, а затем добавляется обратно в конец. Немного оптимизируем это: function removeClass(elem, cls) {
for(var c = elem.className.split(" "), i=c.length-1; i>=0; i--) {
if (c[i] == cls) c.splice(i,1)
}
elem.className = c.join(" ")
}
var obj = { className: "open menu" }
removeClass(obj, "open")
removeClass(obj, "blabla")
alert(obj.className) // menu В приведенном выше примере переменная c задана в начале цикла, и для i
задан ее последний индекс. Сам цикл выполняется в обратном направлении, заканчиваясь условием i>=0
. Это сделано потому, что i>=0
проверяется быстрее, чем i
. Что ускоряет поиск свойства в c
. Можно извлечь часть массива с помощью метода slice(begin[, end]):
var arr = ["Why", "learn", "JavaScript"];
var arr2 = arr.slice(0,2) // принимает 2 элемента, начиная с 0
alert(arr2.join(", ")) // "Why, learn" Обратите внимание, что этот метод не изменяет в JavaScript
количество элементов в массиве, а копирует его часть. Можно опустить второй аргумент, чтобы получить все элементы, начиная с определенного индекса: var arr = ["Why", "learn", "JavaScript"];
var arr2 = arr.slice(1) // принимает все элементы, начиная с 1
alert(arr2.join(", ")) // "learn, JavaScript" Метод поддерживает отрицательные индексы, так же, как String#slice
. Еще один полезный метод — reverse
. Предположим, я хочу получить последнюю часть домена, например, “com
” от “my.site.com
”. Вот как это можно сделать: var domain = "my.site.com"
var last = domain.split(".").reverse()
alert(last) Обратите внимание, что JavaScript
массивы поддерживают сложный синтаксис (reverse())
для вызова метода, а затем извлечения элемента из полученного массива. Вы можете создавать более длинные вызовы, например, reverse()0]
arr.sort()
alert(arr) // 1, 15, 2 Запустите приведенный выше код. Вы получите порядок 1
, 15
, 2
. Это потому, что метод преобразует все в строку и использует по умолчанию лексикографический порядок. С массивами можно работать посредством различных методов, предоставляемых конструктором Array. Рассмотрим методы pop() и push(). Эти методы позволяют работать с массивами как со стеками. Стек - это структура данных, в которой доступ к элементам организован по принципу LIFO (англ. last in - first out, «последним пришёл - первым ушел»). Принцип работы стека можно сравнить со стопкой тарелок: чтобы взять вторую сверху, нужно снять верхнюю. Как это работает изображено на рисунке: И так вернемся к рассмотрению методов push() и pop(). Метод push() добавляет один или несколько новых элементов в конец массива и возвращает его новую длину. Метод pop() - удаляет последний элемент массива, уменьшает длину массива и возвращает удаленное им значение. Стоит обратить внимание на то, что оба эти метода изменяют массив на месте, а не создают его модифицированную копию. Var foo = ; // foo:
foo.push(1,2); // foo: Возвращает 2
foo.pop(); // foo: Возвращает 2
foo.push(3); // foo: Возвращает 2
foo.pop(); // foo: Возвращает 3
foo.push(); // foo: ] Возвращает 2
foo.pop() // foo: Возвращает
foo.pop(); // foo: Возвращает 1
var fruits = ["груши", "бананы", "яблоки"];
var picked = fruits.pop();
document.write("Вы сорвали мои " + picked);
Попробовать »
Методы shift() и unshift() ведут себя во многом также, как pop() и push(), за исключением того, что они вставляют и удаляют элементы в начале массива. Метод unshift() смещает существующие элементы в сторону больших индексов для освобождения места под новые элементы, добавляет один или несколько элементов в начало массива и возвращает новую длину массива. Метод shift() удаляет первый элемент массива и возвращает его значение, смещая все последующие элементы для занятия свободного места в начале массива. Var f = ; // f:
f.unshift(1); // f: Возвращает: 1
f.unshift(22); // f: Возвращает: 2
f.shift(); // f: Возвращает: 22
f.unshift(3,); // f:,1] Возвращает: 3
f.shift(); // f:[,1] Возвращает: 3
f.shift(); // f: Возвращает:
f.shift(); // f: Возвращает: 1
Метод Array.join() используется для объединения элементов массива в одну строку. Методу можно передать необязательный строковой аргумент, который будет использоваться для разделения элементов в строке. Если разделитель не задан, то при вызове метода символом-разделителем по умолчанию будет запятая. Var a = ["Ветер","Дождь","Огонь"];
var myVar1 = a.join(); //"Ветер,Дождь,Огонь"
var myVar2 = a.join(", "); //"Ветер, Дождь, Огонь"
var myVar3 = a.join(" + "); //"Ветер + Дождь + Огонь"
document.write(myVar1 + " Метод Array.join() является обратным по отношению к методу String.split(), который создает массив путем разбиения строки на фрагменты. Метод Array.reverse() меняет порядок следования элементов в массиве на противоположный и возвращает массив с переставленными элементами. Этот метод не создает новый массив с переупорядоченными элементами, а переупорядочивает их в уже существующем массиве. Var myArr = ["один", "два", "три"];
document.write(myArr.reverse());
Попробовать »
Метод Array.concat() создает и возвращает новый массив, содержащий элементы исходного массива, для которого был вызван метод concat(), последовательно дополненный значениями всех аргументов, переданных методу concat(). Если какой-либо из этих аргументов сам является массивом, тогда будут добавлены все его элементы. Имена массивов используются в качестве аргументов и указываются в том порядке, в котором нужно объединить их элементы. Var a = ;
a.concat(4, 5) //Возвращает
a.concat(); //тоже самое - возвращает
a.concat(,) //Возвращает
Метод Array.sort() на месте сортирует элементы массива и возвращает отсортированный массив. Если метод sort() вызывается без аргумента, то он сортирует элементы массива в алфавитном порядке (временно преобразует их в строки для выполнения сравнения). В качестве аргумента метод sort() может принимать функцию сравнения, которая определяет порядок сортировки элементов. Var a = ["Киви", "Апельсины", "Груши"];
a.sort();
var s = a.join(", "); //Апельсины, Груши, Киви
document.write(s);
//пример с числами
var myArr = ;
myArr.sort();
document.write(myArr); //1,10,2
Попробовать »
Наверное от сортировки чисел вы ожидали увидеть немного другой результат. Такая сортировка произошла потому, что метод sort() сортирует элементы, преобразуя их в строки. Поэтому и порядок у них получается строковой - ведь "10" Для сортировки в каком-либо ином порядке, отличном от алфавитного, можно передать методу sort() в качестве аргумента функцию сравнения. Следует однако учесть, что функцию сравнения придется писать самим. Эта функция должна иметь два параметра, так как она устанавливает, какой из двух ее аргументов должен присутствовать раньше в отсортированном списке. Чтобы было легче разобраться и написать такую функцию, есть несколько правил, по которым будет определяться порядок элементов: Для сравнения в качестве своих аргументов функция использует элементы массива: Function foo(a,b) { //определяем функцию проверки
if (a b) return 1;
return 0; //если a == b
}
var a = ;
a.sort(foo); //в качестве аргумента передается только имя функции
document.write(a.join(", "));
//тоже самое записать более коротко
var a = ;
a.sort(function(a,b) { //используем анонимную функцию
return a - b; //функция возвращает значение 0
});
document.write(a); //1,2,5,10
Попробовать »
Первая запись в примере написана так, для того, чтобы было легче понять, как это работает. Обратите внимание, насколько удобно использовать во втором фрагменте анонимную функцию. Она вызывается только один раз, поэтому нет необходимости давать ей имя. Примечание:
Если в массиве есть неопределенные элементы (undefined), они переносятся в конец массива. Метод Array.slice() используется для копирования указанного участка из массива и возвращает новый массив содержащий скопированные элементы. Исходный массив при этом не меняется. Синтаксис метода: Имя_массива.slice(begin, end);
Имя_массива следует заменить именем того массива, из которого нужно извлечь определенный набор элементов для нового массива. Метод принимает два аргумента, которые определяют начало и конец возвращаемого участка массива. Метод копирует участок массива, начиная от begin до end, не включая end. Если указан только один аргумент, возвращаемый массив будет содержать все элементы от указанной позиции до конца массива. Можно использовать отрицательные индексы - они отсчитываются с конца массива. Var arr = ;
arr.slice(0,3); //Возвращает
arr.slice(3); //Возвращает
arr.slice(1,-1); //Возвращает
arr.slice(-3,-2); //Возвращает
Метод Array.splice() - это универсальный метод для работы с массивами. Он изменяет массив на месте, а не возвращает новый измененный массив, как это делают методы slice() и concat(). Метод splice может удалять элементы из массива, вставлять новые элементы, заменять элементы - по очереди и одновременно. Он возвращает массив, состоящий из удаленных элементов, если ни один из элементов не был удален, вернет пустой массив. Синтаксис метода: Имя_массива.splice(index , кол-во, elem1, ..., elemN);
Первый аргумент указывает индекс в массиве, с которого начинается вставка или удаление элементов. Второй аргумент задает количество элементов, которые должны быть удалены из массива начиная с индекса, указанного в первом аргументе, если второй аргумент равен 0, то элементы не будут удалены. Если второй аргумент опущен, удаляются все элементы массива начиная с указанного индекса до конца массива. При использовании отрицательного номера позиции, отсчет элементов будет с конца массива. Var fruits = ["апельсины", "яблоки", "груши", "виноград"];
var deleted = fruits.splice(2,2); //возвращает ["груши", "виноград"]
document.write(deleted);
var arr = ;
arr.splice(4); //Возвращает ; массив стал:
arr.splice(1,2); //Возвращает ; массив стал:
arr.splice(1,1); //Возвращает ; массив стал:
Попробовать »
Первые два аргумента метода splice() задают элементы массива, подлежащие удалению. За этими двумя аргументами может следовать любое количество дополнительных аргументов, задающих элементы, которые будут вставлены в массив, начиная с позиции, заданной первым аргументом. Var fruits = ["апельсины", "яблоки"];
fruits.splice(2,0, "арбузы"); //возвращает
document.write(fruits); //стало ["апельсины", "яблоки", "арбузы"]
var arr = ;
arr.splice(2,0,"a","b"); //Возвращает ; стало
arr.splice(2,2,); //Возвращает ["a","b"]; стало ,3,4,5]
Попробовать »
Стоит обратить внимание, что в отличие от concat(), метод splice() не разбивает на отдельные элементы массивы, передаваемые в качестве аргументов. То есть, если методу передается массив для вставки, он вставляет сам массив, а не элементы этого массива. Метод toString() преобразует элементы массива в строку, используя в качестве символа-разделителя запятую. Var arr = ["Молоко","Хлеб","Печенье"];
var food = arr.toString();
document.write(food); //Молок,Хлеб,Печенье
Попробовать »
Обратите внимание, метод возвращает ту же строку, что и метод join() при вызове его без аргументов. Метод indexOf возвращает индекс элемента, значение которого равно значению, переданному методу в качестве аргумента. Синтаксис методов indexOf() и lastIndexOf(): Имя_массива.indexOf(искомый_элемент, индекс)
имя_массива.lastIndexOf(искомый_элемент, индекс)
Первый аргумент метода указывает значение элемента, индекс которого нужно найти, второй аргумент (необязательный), указывает индекс с которого будет начинаться поиск. Если одинаковых вхождений несколько, выбирается наименьший (первый) индекс. Если элемент с искомым значением не найден, метод вернет -1. Внутри метода для поиска используется строгое сравнение (===). Var a = ;
a.indexOf(3); //вернет 2
a.indexOf(3,4); //вернет 6
a.indexOf(35); //вернет -1: нет элемента с таким значением
a.indexOf(2); // 1
Метод lastIndexOf() тоже возвращает индекс элемента, значение которого равно значению, переданному методу в качестве аргумента. Разница лишь в том, что метод lastIndexOf() выбирает наибольший (последний) индекс. Var a = ;
a.lastIndexOf(3); //вернет 7
a.lastIndexOf(35); //вернет -1: нет элемента с таким значением
a.lastIndexOf(2); // 6
Методы, описанные ниже, являются итераторами. Во всех современных браузерах для работы с массивами есть методы, которые предназначены для перебора элементов и выполнения различных действий над ними. Это методы forEach(), map(), filter(), every(), some, reduce() и reduceRight(). Они перебирают элементы массива начиная с 0 до length - 1 и, если элемент существует, передают его в callback обработчик-функцию. Синтаксис метода: Имя_массива.forEach(callback, thisArg)
В качестве первого аргумента указывается callback-функция, которую метод forEach() будет вызывать для каждого элемента массива. Реализацию вызываемой функции-обработчика нужно писать самим. Вызываемая функция должна иметь три параметра: первый параметр принимает в качестве аргумента - значение элемента массива, второй - индекс элемента, и третий - сам массив. Однако, если нужно использовать только значения элементов массива, можно написать функцию только с одним параметром. Второй аргумент - thisArg (необязательный) будет передан в качестве значения this. Var arr = ;
function foo(value) {
var sum = value * this;
return document.write(sum + " Синтаксис метода: Имя_массива.filter(callback, thisObject)
Метод filter() создает и возвращает новый массив, который будет содержать только те элементы массива, для которых вызов функции callback возвратит true. Function isBig(element, index, array) { //возвращает числа, которые больше или равны 10
return (element >= 10); //если значение элемента больше или равно 10 - выражение вернет true
}
var filtered = .filter(isBig); //filtered
Метод map() создает и возвращает новый массив, который будет состоять из результатов вызова функции callback(item, idx, ar) для каждого элемента массива. Var a = ;
var b = a.map(function(item, idx, arr) {
return item * item; }); // b =
Метод every() возвращает true, если для всех элементов массива указанная функция, используемая для их проверки, вернет true. Метод some() возвращает true, если во время проверки в указанной функции один или несколько элементов вернут true. Var a = ;
a.every(function(x) { return x 10; }) //true: одно число > 10
Синтаксис методов: Имя_массива.reduce(callback, initialValue)
имя_массива.reduceRight(callback, initialValue)
Метод reduce() применяет указанную функцию (callback) в отношении сразу двух значений в массиве, перебирая элементы слева направо, сохраняя при этом промежуточный результат. Аргументы функции callback: (previousValue, currentItem, index, array) initialValue (инициализирующее значение) - объект, используемый в качестве первого аргумента первого вызова функции callback. Проще говоря, значение previousValue при первом вызове равно initialValue. Если initialValue нет, то оно равно первому элементу массива, а перебор начинается со второго: Var a = ;
function foo(prevNum,curNum) {
sum = prevNum + curNum;
alert(sum);
return sum;
}
var result = a.reduce(foo, 0);
document.write(result);
Попробовать »
Разберем как работает этот пример. Первыми аргументами функции foo являются: К числу 0 прибавляется 1. Этот результат (sum: 1) будет передан как prevNum при следующем запуске функции. И так далее пока не дойдет до последнего элемента. Возвращенный результат - сумма от последнего запуска, составит 15 (1+2+3+4+5). Метод reduceRight работает аналогично методу reduce, но идет по массиву справа-налево: Var a = ["h","o","m","e"];
function bar(prevStr, curItem) {
return prevStr + curItem;
}
document.write(a.reduceRight(bar)); //emoh
Стек позволяет отнести к данным историю изменения значений переменных. Описание данных и алгоритмов лежит в основе программирования. Стек - это основа для передачи управления между функциями, организации рекурсии и ссылок на параметры. Синтаксис и семантика JavaScript посредством методов массива push() и pop() дают возможность манипулировать смыслом и учитывать фактор времени. Особенность языка браузера и его логика позволяют иначе взглянуть на возможности фактора времени. Просто описать переменную. Несложно создать массив переменных. Алгоритм, использующий данные, - это статичное и простое решение задачи. Классическая работа с данными: Функции push() и pop() позволяют изменить сущность переменных и их использование. Идея стека не изменилась с момента ее «рождения», но особенность JS как языка браузера и современной концепции программирования позволяет учесть фактор времени и придать данным динамику. Функция value") - добавить что-то в конец массива. Функция - извлечь последний элемент массива. Указатель в контексте push/pop при добавлении перемещается на добавленный элемент, при извлечении - на предпоследний элемент, а последний элемент является результатом выполнения операции. Стопка тарелок - традиционное описание стека в JavaScript - приобретает новое значение. Пусть всегда переменная - это массив. Собственно массив - это совокупность переменных, но рассматривая переменную как массив, можно иначе посмотреть на динамику изменения ее значений. Суть стека - пришел последним, ушел первым. Нельзя извлечь значение вне данного порядка. Строго соблюдая это правило, рассматривая значения всего массива как одну переменную, можно получить динамику изменения значений этой переменной во времени. В этом примере добавление значений JS array.push(...) - это одна последовательность действий, извлечение значений JS array pop() - другая последовательность. Оба варианта действий взаимосвязаны. Это означает, что активный элемент меняет свое значение не только по времени, но и по логике своего изменения. Если функция может вызвать саму себя и безопасно исполнить свое предназначение - это полная функциональность. Простой пример - таблица. В таблице могут быть и другие таблицы. А каждая таблица - это строчки, столбцы и ячейки. Каждая ячейка может содержать таблицу. Несколько ячеек по строке или по столбцу могут быть объединены в одну ячейку, в которой может находиться таблица. В таблице, находящейся в ячейке, может быть ячейка с двумя и более таблицами. Реализовать сказанное в классическом стиле программирования практически невозможно, но в рекурсивном - элементарно. Если функциональность алгоритма работы с таблицей позволяет реализовать себя внутри любой ячейки - значит, это JS array push. На JavaScript этот «фокус» имеет особенный смысл. Таблицы - это пользовательское применение. Дерево страницы (DOM) - это работа на странице. На элементах DOM (тегах страницы) висят обработчики. Один вариант, когда такой обработчик срабатывает один раз, совсем другой вариант, когда он может вызывать сам себя много раз. В разрезе всех обработчиков всех элементов страницы получается динамика страницы во времени. Push/pop и рекурсия - это несколько иное представление о логике работы страницы: все меняется так, как требуется в текущей ситуации, а не программируется заранее в виде последовательной отработки действий посетителя.Задание для самостоятельного выполнения
Решение
Задание для самостоятельного выполнения
Решение
join и split
Задание для самостоятельного выполнения
Решение
Использование length для обрезки массива
Array представляет собой объект, что из этого следует
Нечисловые ключи массива
Таким образом, shift/unshift
работают медленнее, чем push/pop
. Чем больше массив, тем больше времени занимает в JavaScript
сортировка массива.Задание для самостоятельного выполнения
Решение
Разреженные массивы, описание length
Удаление из массива
Метод splice
Задание для самостоятельного выполнения
Решение
Метод slice
Метод reverse
Методы pop/push и shift/unshift
Метод join
" + myVar2 + "
" + myVar3);
Попробовать »
Метод reverse
Метод concat
Метод sort
Метод slice
Метод splice
Метод toString
indexOf и lastIndexOf
Методы итераторы
forEach
");
}
arr.forEach(foo, 5); //второй аргумент будет передан в качестве значения this
//пример с тремя параметрами
var a = ;
a.forEach(function(el, idx, a) {
document.write("a["+idx+"] = "+el+" в ["+a+"]
");
});
Попробовать »
filter
map
every и some
reduce и reduceRight
Массив данных и логика его образования
Движение по значениям
Рекурсия и динамика значения
