В этой статье мы рассмотрим стандартные 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
. Это потому, что метод преобразует все в строку и использует по умолчанию лексикографический порядок. На этом уроке мы познакомимся с массивами, научимся их создавать, выполнять операции над их элементами, а также рассмотрим основные методы и свойства, доступные при работе с ними.
Массив
– это упорядоченная коллекция значений
. Значения в этой коллекции называются элементами
. Каждый элемент в массиве имеет свой порядковый номер (число), который называется индексом
. Индексы нумеруются с 0. На следующем рисунке приведён числовой массив, состоящий из 5 элементов. Элементы данного массива содержат следующие данные: 123 (индекс 0), 7 (индекс 1), 50 (индекс 2), -9 (индекс 3), 24 (индекс 4). Создание массивов в JavaScript обычно осуществляется с помощью литерала массива
. Литерал массива
представляет собой квадратные скобки, внутрь которых помещается список элементов, разделённых между собой с помощью запятой. Например: Var empty = ; // пустой массив
var numbers = ; // числовой массив
var arr = ; // массив, содержащий различные типы данных
Значения в массиве JavaScript не обязательно должны иметь одинаковый тип. Т.е. в одном массиве могут находиться значения различных типов данных. Обращение к определённому элементу массива выполняется по его индексу. Данная операция ещё называется операцией индексации. Например:
// создадим массив, состоящий из 3 элементов
var smartphoneColors = ["Black", "White", "Grey"];
// выведем в консоль браузера значения элементов массива smartphoneColors с индексами 0 и 2
console.log("Значение элемента массива smartphoneColors с индексом 0: " + smartphoneColors); // "Значение элемента массива smartphoneColors с индексом 0: Black"
console.log("Значение элемента массива smartphoneColors с индексом 2: " + smartphoneColors); // "Значение элемента массива smartphoneColors с индексом 0: Grey"
// изменим значение элемента массива smartphoneColors с индексом 1 на "Red"
smartphoneColors = "Red"; // ["Black", "Red", "Grey"]
// установим элементу массива smartphoneColors с индексом 3 значение "Blue"
smartphoneColors = "Blue"; // ["Black", "Red", "Grey", "Blue"]
В качестве значений элементов массива можно использовать не только статические значения, но и выражения: Var lengthA = 7, widthA = 5;
var point = ;
В качестве значений элементов массива могут использоваться объекты. Var points = [
{x1: 5, y1: 3},
{x1: 7, y1: 10},
{x1: 12; y1: 0}
]; // массив, состоящий из 3 объектов
Другой способ создания массива
состоит в вызове функции-конструктора Array
. Вызов функции-конструктора без аргументов используется для создания пустого массива. Var empty = new Array(); // пустой массив
Данный способ создания массива, эквивалентен литералу . Если функции-конструктору в качестве аргумента указать число, то она создаст массив, который будет состоять из указанного числа элементов. Причем все эти элементы будут иметь в качестве значения undefined. Var arr = new Array(5); // массив, состоящий из 5 элементов (значения элементов равны undefined)
Если функции-конструктору в скобках передать несколько значений или одно не числовое значение, то она создаст массив из переданных ей аргументов. В отличие от многих других языков программирования массивы в JavaScript автоматически меняют свой размер, т.е. они изначально являются динамическими. Таким массивам не надо задавать какие-либо размеры. Ещё одной отличительной чертой массивов JavaScript является то, что в разных элементах одного и того же массива могут содержаться различные типы данных. Определение длины массива (количества элементов) осуществляется с помощью свойства length
.
//создадим массив путём перечисления значений элементов в функции Array
var volumeHDDs = new Array("500Gb","1Tb","2Tb");
//переменной lengthArray присвоим длину массива volumeHDDs
var lengthArray = volumeHDDs.length;
Получение значения первого элемента массива осуществляется с помощью указания в квадратных скобках этого массива числа 0:
//создание массива, состоящего из 3 элементов
var volumeHDDs = new Array("500Gb","1Tb","2Tb");
//получение значения первого элемента массива
var firstValue = volumeHDDs;
Получение значения последнего элемента массива осуществляется с помощью указания в квадратных скобках этого массива выражения имя_массива.length-1:
//создание массива, состоящего из 3 элементов
var volumeHDDs = new Array("500Gb","1Tb","2Tb");
//получение значения последнего элемента массива
var lastValue = volumeHDDs;
Перебор элементов массива осуществляется с помощью цикла for . Например, переберём все элементы массива и выведем их значения в консоль браузера (F12):
//создание массива nameStudents, состоящего из 4 элементов
var nameStudents = new Array("Петя","Вася","Коля","Максим");
//перебор элементов массива от 0 до длины массива-1
for (var i=0; i <= nameStudents.length-1; i++)
{
console.log(i+1 + " элемент массива = " + nameStudents[i]);
}
Оператор delete используется не для удаления элемента из массива, а для присваиванию данному элементу массива значение undefined . Var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
delete namePlanets;
for (var i=0; i <= namePlanets.length-1; i++)
{
console.log(i + " элемент массива = " + namePlanets[i]);
}
Объект Array содержит следующие методы (функции) для работы с массивами: Метод push предназначен для добавления элемента в конец массива. Значение этого элемента указывается в качестве параметра данного метода. В качестве результата метод push возвращает количество элементов в массиве с учётом добавленного. Var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"];
namePlanets.push("Юпитер"); // 5
console.log(namePlanets); // ["Венера", "Меркурий", "Земля", "Марс", "Юпитер"]
Метод pop предназначен для удаления последнего элемента из массива. У данного метода нет параметров. В качестве результата он возвращает значение последнего (удалённого) элемента массива. Var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"];
namePlanets.pop(); // "Марс"
console.log(namePlanets); // ["Венера", "Меркурий", "Земля"]
Метод shift
предназначен для удаления первого элемента из массива, т.е. элемента, имеющего индекс 0. Все остальные элементы массива смещаются к началу, т.е. у каждого из них индекс уменьшается на 1. Данный метод в качестве результата возвращает значение удалённого элемента. Var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"];
namePlanets.shift(); // "Венера"
console.log(namePlanets); // ["Меркурий", "Земля", "Марс"]
Метод unshift
предназначен для добавления элемента в начало массива (перед другими элементами). Значение этого элемента указывается в качестве параметра данного метода. В качестве результата данный метод возвращает количество элементов в массиве с учётом добавленного. Var namePlanets = ["Меркурий", "Земля", "Марс", "Юпитер"];
namePlanets.unshift("Венера"); // 5
console.log(namePlanets); // ["Венера", "Меркурий", "Земля", "Марс", "Юпитер"]
Метод slice
предназначен для копирования участка массива. При этом он не изменяет исходный массив, а возвращает в качестве результата новый массив, состоящий из выбранных элементов. Метод slice
имеет 2 параметра: Метод splice
предназначен для изменения содержимого массива. Он может использваться как для добавления элементов в массив, так и для их удаления. Синтаксис метода splice
: Array.splice(startIndex, deleteCount [, element1[, element2[, ...]]]);
/*
startIndex
(обязательный) - стартовый индекс элемента, с которого нужно начать изменение массива.
Если в качестве startIndex указать число, большее длины массива, то стартовый индекс будет установлен на конец массива.
Если в качестве startIndex указать отрицательное число, то отсчет стартового элемента будет вестись с конца.
deleteCount
(обязательный) - число, показывающее какое количество элементов необходимо удалить из массива.
Если элементы не нужно удалять из массива, то deleteCount необходимо установить 0. После этого нужно указать как минимум один новый элемент, который нужно добавить в массив.
Если в качестве deleteCount указать число, которое будет превышать количество оставшихся элементов в массиве, начиная с startIndex, то в этом случае они всё равно будут удалены (т.е. все элементы до конца массива, начиная со стартового индекса)
element1, element2, ...
(необязательные) - элементы которые нужно добавить в массив.
*/
Примеры использования метода splice.
Применения метода splice для удаления части элементов из массива. Var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"];
namePlanets.splice(2, 2); //["Земля", "Марс"]
console.log(namePlanets); // ["Венера", "Меркурий"]
Применение метода splice для удаления элемента из массива и добавления в него новых. Var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"];
namePlanets.splice(1, 1, "Уран", "Нептун", "Сатурн"); // ["Меркурий"]
console.log(namePlanets); // ["Венера", "Уран", "Нептун", "Сатурн", "Земля", "Марс"]
Применение метода splice только для добавления новых элементов в массив. Var namePlanets = ["Юпитер", "Сатурн", "Уран"];
namePlanets.splice(0, 0, "Венера", "Меркурий", "Земля", "Марс"); //
console.log(namePlanets); // ["Венера", "Меркурий", "Земля", "Марс", "Юпитер", "Сатурн", "Уран"]
Метод join
предназначен для соединения всех элементов массива в строку. Синтаксис метода join
: Array.join();
/*
separator
(необязательный) - разделитель, который используется в качестве соединительной строки между каждым элементом массива.
Если данный параметр не указать, то в качестве соединительной строки будет использоваться ",".
Если в качестве параметра указать пустую строку, то элементы массивы в возвращаемой строке между собой ничем разделены не будут
*/
Var berries = ["Виноград", "Виноград", "Смородина", "Шиповник"];
var berriesStr1 = berries.join(); // "Виноград,Виноград,Смородина,Шиповник"
var berriesStr2 = berries.join(""); // "ВиноградВиноградСмородинаШиповник"
var berriesStr3 = berries.join(", "); // "Виноград, Виноград, Смородина, Шиповник"
var berriesStr4 = berries.join(" + "); // "Виноград + Виноград + Смородина + Шиповник"
Если в качестве separator
использовать не строку, то он будет преобразован к строке. Var berries = ["Виноград", "Виноград", "Смородина", "Шиповник"];
var berriesStr1 = berries.join(false); // "ВиноградfalseВиноградfalseСмородинаfalseШиповник"
var berriesStr2 = berries.join(4/2); // "Виноград2Виноград2Смородина2Шиповник"
Элементы массива, которые имеют в качестве значения null или undefined, будут приведены к пустой строке.
var arr = ;
var arrStr = arr.join(", "); // "0, 5, -4"
Метод split предназначен для преобразования строки в массив. Данный метод имеет один параметр, в качестве которого вы можете указать строку, на основании которой данная строчка будет разбита на массив строк. Var strElementComputers = "Системный блок, Монитор, Клавиатура, Мышь, Колонки, Принтер";
var elementComputers = strElementComputers.split(", ");
console.log("Количество элементов в массиве: " + elementComputers.length);
for (var i=0; i <= elementComputers.length-1; i++)
{
console.log(i + " элемент массива = " + elementComputers[i]);
}
Метод reverse предназначен для переупорядочивания элементов массива в обратном порядке. Var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
namePlanets.reverse();
console.log("Количество элементов в массиве: " + namePlanets.length);
for (var i=0; i <= namePlanets.length-1; i++)
{
console.log(i + " элемент массива = " + namePlanets[i]);
}
Метод sort предназначен для сортировки элементов массива. По умолчанию данный метод сортирует массив как строки. Var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
namePlanets.sort();
console.log("Количество элементов в массиве: " + namePlanets.length);
for (var i=0; i <= namePlanets.length-1; i++)
{
console.log(i + " элемент массива = " + namePlanets[i]);
}
Доброго времени суток всем, кто решил изучить все о массивах в языке JavaScript. В нескольких предыдущих публикациях я уже затрагивал некоторые моменты . Сегодняшняя же статья является полным руководством. Я расскажу о некоторых вариантах создания массивов и как «вытаскивается» в JavaScript длина массива, поведаю об их особенностях, перечислю основные свойства и методы для работы с ними и конечно же приведу контрольные примеры. Давайте приступим! Первое, что нужно усвоить, это то, что массивы являются разновидностью , которые хранят в себе структурированные данные в определенных ячейка памяти, каждая из которых имеет свой идентификатор (номер). Они создаются при помощи квадратных скобок, обладают рядом возможностей и методов, а также могут быть многомерными. Главное их преимущество – все элементы пронумерованы, поэтому к ним можно обратиться через идентификатор. Однако существует еще один вид массивов. На самом деле в статье, посвященной объектам, я рассказывал, что последние также являются массивами. И действительно, они представляют собой ассоциативные массивы, которые являются структурой данных с системой хранения информации в виде «ключ => значение». Такую структуру часто называют хэшем, реже словарем. Разберем подробнее каждый вид. При работе с ассоциативными массивами очень легко как добавлять элементы, так и удалять. Так как данный скриптовый язык не типизирован и в нем нет множества строгих правил, создавать элементы объекта можно несколькими способами: перечислить их сразу, проинициализировать после создания объекта, а также создавать по ходу кода. Сейчас я хочу показать примеры реализации таких механизмов. В первой программе я создал объект patient
, а после перечислил его элементы. Как видите, для patient.
param
я сделал вложенный объект, который обладает своими собственными значениями. var patient = new Object();
patient.firstName ="Инна"
patient.age =34,
patient.param ={
height:169 ,
weight: 55,
disease: "no"
}
alert(patient.firstName) // выведет "Инна"
alert(patient.param.disease) // выведет no Если появится необходимость добавить еще один параметр к уже существующим, например, фамилию, то это делается следующим образом. К презентованному выше коду допишите строки: patient.surname = «Луценко» alert (patient.surname) Вот так легко коллекция пополняется новыми свойствами. При желании изменить какое-либо значение, его нужно просто присвоить выбранному ключу: patient.firstName ="Катя" Для объектов также предусмотрена операция удаления ненужных свойств при помощи команды delete: delete patient.surname На них еще иногда говорят «массивы с числовыми индексами». Если сравнивать их с предыдущим вариантом, то здесь ключи представлены в виде чисел, а вот значения могут быть абсолютно любыми. Занесение коллекции в такой объект может быть осуществлено не по порядку. Так, один элемент можно вписать в ячейку с индексом «0», а следующий – с индексом «4». Промежуточные ячейки памяти будут пустовать и выдавать «undefined», если к ним обратиться. В качестве примера я написал небольшое приложение, в котором создан массив товаров. var goods = ["Говядина","Макароны","Твердый сыр","Специи"];
alert(goods);
alert(goods);
goods = "Томаты"
alert(goods); Я специально показал вам, как вывести весь список покупок и как выбрать один элемент. К тому же я затронул свойство length
, о котором конкретно расскажу позже. А пока дам небольшое пояснение. goods = «Томаты» В предусмотрено 4 команды, которые позволяют добавлять и удалять элементы из начала и конца структурированных объектов. Для начала расскажу вам о методах, работающих с началом массива. К ним относятся shift
и unshift
. Первая команда удаляет одно значение, а вторая добавляет. В качестве примера я взял код предыдущей программы и видоизменил его. var goods = ["Говядина","Макароны","Твердый сыр","Специи"];
document.writeln(goods); //Говядина,Макароны,Твердый сыр,Специи
document.writeln(goods); //Твердый сыр
goods.unshift("Томаты");
goods.unshift("Буженина");
document.writeln(goods); //Буженина,Томаты,Говядина,Макароны,Твердый сыр,Специи
goods.shift()
document.writeln(goods); //Томаты,Говядина,Макароны,Твердый сыр,Специи В комментариях к выполненным действиям я вписал полученные результаты. Теперь перейдем к методам, которые добавляют и удаляют элементы в конец списка. Так, pop
отвечает за удаление значений, а push
– за добавления. К прошлой программной реализации допишем названные команды. goods.push («Итальянские травы»); document.writeln (goods); В результате на экран последней строкой будет выведено: «Томаты,Говядина,Макароны,Твердый сыр,Итальянские травы». Для того чтобы узнать количество записанных в массив элементов нужно воспользоваться свойством объекта – length
. Выше я уже использовал эту команду. На тот момент длина коллекции равнялась 4, а мне нужно было дописать еще один продукт. Так как нумерация элементов массива начинается с нуля, то первая свободная ячейка в том примере находилась под индексом «4». Заметьте, что length определяет не количество занесенных товаров в коллекцию, а длину самого массива. Таким образом, если б среди того списка средние 2 элемента были пустыми (var goods = ["Говядина","Макароны","Твердый сыр","Специи"];) то свойство в результате выдало б число 6. Зная данную команду, можно заняться разбором циклов. Они нужны для перебора элементов коллекции. Это очень удобный механизм, без которого сложно обойтись. В циклах можно указывать в каком направлении, с какого и по какой элемент, а также с каким шагом стоит перебирать значения. Наиболее популярным и быстро работающим считается цикл, созданный с помощью ключевого слова for. var goods = ["Говядина","Макароны","Твердый сыр","Специи"];
for (var i = goods.length-1; i >=0; i=i-2) {
document.writeln((i+1)+"."+ goods[i]);
} Те, кто решил, что в ответе будет строка: «4.Специи 2.Макароны», были правы. Молодцы! Создатели языка js предусмотрели множество методов и функций, которые сильно упрощают работу с массивами. Среди них есть инструменты для копирования коллекций, смены порядка элементов, их сортировки, преобразования массива в строки и обратно, а также еще много всего другого. Массивы Массив
- это упорядоченная коллекция значений. Значения в массиве называются элементами, и каждый элемент характеризуется числовой позицией в массиве, которая называется индексом. Массивы в языке 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 Стандарт ECMAScript 3 определяет в составе Array.prototype множество удобных функций для работы с массивами, которые доступны как методы любого массива. Эти методы будут представлены в следующих подразделах. Метод Array.join() преобразует все элементы массива в строки, объединяет их и возвращает получившуюся строку. В необязательном аргументе методу можно передать строку, которая будет использоваться для отделения элементов в строке результата. Если строка-разделитель не указана, используется запятая. Например, следующий фрагмент дает в результате строку "1,2,3": Var arr = ;
arr.join(); // "1,2,3"
arr.join("-"); // "1-2-3" Метод Array.reverse() меняет порядок следования элементов в массиве на обратный и возвращает переупорядоченный массив. Перестановка выполняется непосредственно в исходном массиве, т.е. этот метод не создает новый массив с переупорядоченными элементами, а переупорядочивает их в уже существующем массиве. Например, следующий фрагмент, где используются методы reverse() и join(), дает в результате строку "3,2,1": Var arr = ;
arr.reverse().join(); // "3,2,1" Метод 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}); Обратите внимание, насколько удобно использовать в этом фрагменте неименованную функцию. Функция сравнения используется только здесь, поэтому нет необходимости давать ей имя. Метод Array.concat() создает и возвращает новый массив, содержащий элементы исходного массива, для которого был вызван метод concat(), и значения всех аргументов, переданных методу concat(). Если какой-либо из этих аргументов сам является массивом, его элементы добавляются в возвращаемый массив. Следует, однако, отметить, что рекурсивного превращения массива из массивов в одномерный массив не происходит. Метод concat() не изменяет исходный массив. Ниже приводится несколько примеров: Var arr = ;
arr.concat(4, 5); // Вернет
arr.concat(); // Вернет
arr.concat(,) // Вернет
arr.concat(4, ]) // Вернет ] Метод Array.slice() возвращает фрагмент, или подмассив, указанного массива. Два аргумента метода определяют начало и конец возвращаемого фрагмента. Возвращаемый массив содержит элемент, номер которого указан в первом аргументе, плюс все последующие элементы, вплоть до (но не включая) элемента, номер которого указан во втором аргументе. Если указан только один аргумент, возвращаемый массив содержит все элементы от начальной позиции до конца массива. Если какой-либо из аргументов имеет отрицательное значение, он определяет номер элемента относительно конца массива. Так, аргументу -1 соответствует последний элемент массива, а аргументу -3 - третий элемент массива с конца. Вот несколько примеров: Var arr = ;
arr.slice(0,3); // Вернет
arr.slice(3); // Вернет
arr.slice(1,-1); // Вернет
arr.slice(-3,-2); // Вернет Метод 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() выполняет обратную операцию - удаляет последний элемент массива, уменьшает длину массива и возвращает удаленное им значение. Обратите внимание, что оба эти метода изменяют исходный массив, а не создают его модифицированную копию. Методы unshift() и shift() ведут себя почти так же, как push() и pop(), за исключением того, что они вставляют и удаляют элементы в начале массива, а не в конце. Метод unshift() смещает существующие элементы в сторону больших индексов для освобождения места, добавляет элемент или элементы в начало массива и возвращает новую длину массива. Метод shift() удаляет и возвращает первый элемент массива, смещая все последующие элементы на одну позицию вниз, чтобы занять место, освободившееся в начале массива.Задание для самостоятельного выполнения
Решение
Задание для самостоятельного выполнения
Решение
join и split
Задание для самостоятельного выполнения
Решение
Использование length для обрезки массива
Array представляет собой объект, что из этого следует
Нечисловые ключи массива
Таким образом, shift/unshift
работают медленнее, чем push/pop
. Чем больше массив, тем больше времени занимает в JavaScript
сортировка массива.
Задание для самостоятельного выполнения
Решение
Разреженные массивы, описание length
Удаление из массива
Метод splice
Задание для самостоятельного выполнения
Решение
Метод slice
Метод reverse
Что такое массив в JavaScript?
Создание (объявление) массива
Свойство length (длина массива)
Как получить первый элемент массива
Как получить последний элемент массива
Перебор массива
Для чего предназначен оператор delete
Функции для работы с массивами (методы объекта Array)
Метод push (добавление элемента в конец массива)
Метод pop (удаление последнего элемента из массива)
Метод shift (удаление первого элемента из массива)
Метод unshift (добавление элемента в начало массива)
Метод slice (копирование участка массива)
var namePlanets = ["Венера", "Меркурий", "Земля", "Марс", "Юпитер"];
var newNamePlanets = namePlanets.slice(2, 4); // ["Земля", "Марс"]
Метод splice (изменение содержимого массива)
Метод join (преобразование массива в строку)
Преобразование строки в массив - split
Переупорядочивание элементов массива в обратном порядке - reverse
Сортировка элементов массива - sort
Поговорим о главной задаче массивов
1
2
3
4
5
6
7
8
9
10
var patient = new Object();
patient.firstName ="Инна"
patient.age =34,
patient.param ={
height:169 ,
weight: 55,
disease: "no"
}
alert(patient.firstName) // выведет "Инна"
alert(patient.param.disease) // выведет no
«Настоящие» массивы
1
2
3
4
5
var goods = ["Говядина","Макароны","Твердый сыр","Специи"];
alert(goods);
alert(goods);
goods = "Томаты"
alert(goods);
добавляет новый элемент в конец массива.Методы, позволяющие работать с началом и концом массива
1
2
3
4
5
6
7
8
var goods = ["Говядина","Макароны","Твердый сыр","Специи"];
document.writeln(goods); //Говядина,Макароны,Твердый сыр,Специи
document.writeln(goods); //Твердый сыр
goods.unshift("Томаты");
goods.unshift("Буженина");
document.writeln(goods); //Буженина,Томаты,Говядина,Макароны,Твердый сыр,Специи
goods.shift()
document.writeln(goods); //Томаты,Говядина,Макароны,Твердый сыр,Специи
А теперь пересчитаем элементы
Несколько полезных заметок
Создание массивов
Чтение и запись элементов массива
Добавление и удаление элементов массива
Многомерные массивы
Методы класса Array
Метод join()
Метод reverse()
Метод sort()
Метод concat()
Метод slice()
Метод splice()
Методы push() и pop()
Методы unshift() и shift()
