JavaScript - Массивы. Массивы в JavaScript Поиск индекса элемента
21.06.2017 at 12:17
Для вычисления на javascript размера массива объектов используется свойство массива length.
Var arr = ["first", "second"]; console.log(arr.length); // 2
Массивы в javascript могут иметь пропуски в индексах. Например
Var arr = ; arr = "first"; arr = "second";
Свойство length возвращает максимальный индекс массива + 1. Т.е. в приведенном примере length = 5.
Вычисление на javascript количества элементов в массиве
Array.prototype.count = function(){ var result = 0; for(var i = 0; i < this.length; i++) if (this[i] != undefined) result++; return result; }
Пример использования
Var arr = ; arr = "first"; arr = "second"; console.log(arr.count()); //2
Так же в свойство length можно присваивать значение. Это позволяет уменьшить длину существующего массива.
Var arr = ["first", "second", "third"]; arr.length = 2; console.log(arr); // ["first", "second"]
Вычисление на javascript размера массива в байтах
Массивы являются обычными объектами, так что вычисление размера массива в байтах ничем не отличается от вычисления размера любого другого объекта. К сожалению, javascript не предоставляет API для вычисления размера, так что придется считать самостоятельно. Делается это следующим образом: обходим все свойства объекта, если свойство примитивного типа — добавляем к общему результату размер экземпляра этого типа, если в свойстве лежит объект — рекурсивно считаем его размер.
Function sizeOf(obj) { var bytes = 0; if(obj !== null && obj !== undefined) { switch(typeof obj) { case "number": bytes += 8; break; case "string": bytes += obj.length * 2; break; case "boolean": bytes += 4; break; case "object": for(var key in obj) { bytes += sizeOf(obj); } break; } } return bytes; };
Метод не точный и имеющий множество проблем — например есть вероятность уйти в бесконечный цикл.
В этой статье мы рассмотрим стандартные 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
. Это потому, что метод преобразует все в строку и использует по умолчанию лексикографический порядок. И как вы поняли из той статьи, в переменную можно сохранить только одно значение. Сколько бы мы пытались больше одного значения в переменной мы не запишем
. Допустим, мы объявим некую переменную z, и присвоим ей значение 8.
И если мы где-то ниже в коде, этой же переменной зададим другое значение, допустим 3, то старое значение пропадёт и вместо неё запишется новое. И вот для того чтобы в переменной смогли записать больше одного значения, и нужно использовать такой тип данных как массив. Массив
позволяет записать в переменную сразу неограниченное количество значений, любых типов. Раньше в JavaScript массив объявлялся таким образом: Var arr = new Array (7, 8, "k", "v", 3.2, 4);
Времена изменились, и сейчас массив объявляется другим образом
, более сокращённо. Элементы перечисляются также через запятую, но уже внутри простых квадратных скобок. Var arr = [ 7, 8, "k", "v", 3.2, 4 ];
Теперь в переменную arr находится одномерный массив данных
, разных типов. Каждый элемент из массива имеет свой индекс. Учтите, что данный индекс начинается с нуля
. С его помощью указывается позиция элемента в массиве. Структура массива
выглядит так: Для того чтобы обратится к какому-то элементу из массива нужно написать имя массива, и в квадратных скобках указать индекс элемента которого хотим получить. Для примера выведем на экран элемент, у которого индекс равен 2, то есть букву "k". Document.write(" Выводим элемент массива arr, у которого индекс равен 2:" + arr + " А что если мы хотим посмотреть все элементы массива
. Если там мало элементов, то можно обратиться к каждому по отдельности, как в примере, то есть arr, arr, arr. Но, если в массиве находится 100 элементов, то такой вариант не катит. Здесь уже необходимо использовать . Перед тем как перейти к перебору массива, хочу познакомить Вас со свойством length
. Это универсальное свойство, которая позволяет узнать длину массива
, то есть общее количество элементов в массиве. Также с её помощью можно узнать и длину строки. Для интереса узнаем, какая длина имеет массив arr. Document.write(" Количество элементов в массиве arr =" + arr.length + " Теперь для того что бы вывести сразу все элементы, необходимо перебрать весь массив, с помощью цикла
. For(var i = 0; i < arr.length; i++){
document.write(" Элемент массива arr, с индексом " + i + " равен:" + arr[i] + " Задание для самостоятельного выполнения
Решение
Задание для самостоятельного выполнения
Решение
join и split
Задание для самостоятельного выполнения
Решение
Использование length для обрезки массива
Array представляет собой объект, что из этого следует
Нечисловые ключи массива
Таким образом, shift/unshift
работают медленнее, чем push/pop
. Чем больше массив, тем больше времени занимает в JavaScript
сортировка массива.
Задание для самостоятельного выполнения
Решение
Разреженные массивы, описание length
Удаление из массива
Метод splice
Задание для самостоятельного выполнения
Решение
Метод slice
Метод reverse
Открываем эту страницу в браузере и видим такую картину:
Для тренировки, попробуйте перебрать массив "arr" и с помощью остальных циклов, while и do-while.
Существует ещё один простой и короткий вариант перебора маленького массива . Он заключается в том, что каждый элемент массива можно посмотреть с помощью метода alert. Сначала пишем название самого массива, или же можно указать сразу список элементов в квадратных скобках. Потом пишем функцию forEach и в качестве параметра пишем метод alert, без скобок.
Arr.forEach(alert);
Теперь если откроем страницу в браузере, то увидим поочерёдно каждого элемента массива.
Заполнение массива с помощью цикла
Для примера, в некий массив, запишем результаты таблицы умножения, от 1 до 10.
Сначала необходимо объявить пустой массив, которого и будем заполнять. Потом необходимо объявить переменную и присвоить ей сразу значение 0. Эта переменная будет в качестве индекса для объявляемого массива. И следующим шагом будет само заполнение массива с помощью такого приёма как цикл в цикл.
//Объявляем пустой массив var new_arr = ; // Переменная в качестве индекса для массива new_arr var k = 0; for(var i = 1; i
Если мы откроем эту страницу в браузере, то увидим такой результат:
Сначала переменная i равна единичке. И вот эта единичка умножается со всеми значениями переменной j. После того как прошлись 10 раз по второму циклу возвращаемся к первому циклу и инкрементируем переменную i на единицу. Теперь i равно двойке. Опять идём ко второму циклу и умножаем значение 2 на все значения переменной j(от 1 до 10). В результате получается второй ряд: 2 4 6 8 … 20. И так происходит пока, переменная i не станет равно 11. Как только она примет такое значение, то мы выходим из цикла.
Посчитаем сумму всех элементов из массива
У нас есть массив new_arr в котором хранится 100 чисел (целая таблица умножения). Теперь давайте посчитаем сумму всех этих элементов.
//Создаем переменную для суммы var summ = 0; for(var i = 0; i < new_arr.length; i++){ summ += new_arr[i]; } document.write("
Сумма элементов массива new_arr равна: " + summ + "
"); //Результат 3025Вот и все о чем я хотел Вам рассказать в этой статье. Теперь Вы знаете, как создавать массив, как его заполнять и как с ним работать.
На практике массивы встречаются довольно часто, так как они очень важны в программировании, поэтому Вы должны их знать на отлично .
Последнее обновление: 26.03.2018
Объект Array представляет массив и предоставляет ряд свойств и методов, с помощью которых мы можем управлять массивом.
Инициализация массива
Можно создать пустой массив, используя квадратные скобки или конструктор Array:
Var users = new Array(); var people = ; console.log(users); // Array console.log(people); // Array
Можно сразу же инициализировать массив некоторым количеством элементов:
Var users = new Array("Tom", "Bill", "Alice"); var people = ["Sam", "John", "Kate"]; console.log(users); // ["Tom", "Bill", "Alice"] console.log(people); // ["Sam", "John", "Kate"]
Можно определить массив и по ходу определять в него новые элементы:
Var users = new Array(); users = "Tom"; users = "Kate"; console.log(users); // "Tom" console.log(users); // undefined
При этом не важно, что по умолчанию массив создается с нулевой длиной. С помощью индексов мы можем подставить на конкретный индекс в массиве тот или иной элемент.
length
Чтобы узнать длину массива, используется свойство length :
Var fruit = new Array();
fruit = "яблоки";
fruit = "груши";
fruit = "сливы";
document.write("В массиве fruit " + fruit.length + " элемента:
");
for(var i=0; i < fruit.length; i++)
document.write(fruit[i] + "
");
По факту длиной массива будет индекс последнего элемента с добавлением единицы. Например:
Var users = new Array(); // в массиве 0 элементов
users = "Tom";
users = "Kate";
users = "Sam";
for(var i=0; i Вывод браузера: Tom
Kate
undefined
undefined
Sam
Несмотря на то, что для индексов 2 и 3 мы не добавляли элементов, но длиной массива в данном случае будет число 5. Просто элементы с индексами 2 и 3
будут иметь значение undefined . Копирование массива может быть поверхностным или неглубоким (shallow copy) и глубоким (deep copy). При неглубоком копировании достаточно присвоить переменной значение другой переменной, которая хранит массив: Var users = ["Tom", "Sam", "Bill"];
console.log(users); // ["Tom", "Sam", "Bill"]
var people = users; // неглубокое копирование
people = "Mike"; // изменяем второй элемент
console.log(users); // ["Tom", "Mike", "Bill"]
В данном случае переменная people после копирования будет указывать на тот же массив, что и переменная users. Поэтому при изменении элементов в people,
изменятся элементы и в users, так как фактически это один и тот же массив. Такое поведение не всегда является желательным. Например, мы хотим, чтобы после копирования переменные указывали на отдельные массивы. И в этом случае
можно использовать глубокое копирование с помощью метода slice()
: Var users = ["Tom", "Sam", "Bill"];
console.log(users); // ["Tom", "Sam", "Bill"]
var people = users.slice(); // глубокое копирование
people = "Mike"; // изменяем второй элемент
console.log(users); // ["Tom", "Sam", "Bill"]
console.log(people); // ["Tom", "Mike", "Bill"]
В данном случае после копирования переменные будут указывать на разные массивы, и мы сможем изменять их отдельно друг от друга. Также метод slice() позволяет скопировать часть массива: Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
var people = users.slice(1, 4);
console.log(people); // ["Sam", "Bill", "Alice"]
В метод slice() передается начальный и конечный индексы, которые используются для выборки значений из массива.
То есть в данном случае выборка в новый массив идет начиная с 1 индекса по индекс 4 не включая. И поскольку индексация массивов
начинается с нуля, то в новом массиве окажутся второй, третий и четвертый элемент. Метод push() добавляет элемент в конец массива: Var fruit = ;
fruit.push("яблоки");
fruit.push("груши");
fruit.push("сливы");
fruit.push("вишня","абрикос Метод pop() удаляет последний элемент из массива: Var fruit = ["яблоки", "груши", "сливы"];
var lastFruit = fruit.pop(); // извлекаем из массива последний элемент
document.write(lastFruit + " Вывод браузера: Сливы
В массиве fruit 2 элемента:
яблоки
груши
Метод shift() извлекает и удаляет первый элемент из массива: Var fruit = ["яблоки", "груши", "сливы"];
var firstFruit = fruit.shift();
document.write(firstFruit + " Вывод браузера: Яблоки
В массиве fruit 2 элемента:
груши
сливы
Метод unshift() добавляет новый элемент в начало массива: Var fruit = ["яблоки", "груши", "сливы"];
fruit.unshift("абрикосы");
document.write(fruit);
Вывод браузера: Абрикосы,яблоки,груши,сливы
Метод splice() удаляет элементы с определенного индекса. Например, удаление элементов с третьего индекса: Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
var deleted = users.splice(3);
console.log(deleted); // [ "Alice", "Kate" ]
console.log(users); // [ "Tom", "Sam", "Bill" ]
Метод slice возвращает удаленные элементы. В данном случае удаление идет с начала массива. Если передать отрицательный индекс, то удаление будет производиться с конца массива.
Например, удалим последний элемент: Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
var deleted = users.splice(-1);
console.log(deleted); // [ "Kate" ]
console.log(users); // [ "Tom", "Sam", "Bill", "Alice" ]
Дополнительная версия метода позволяет задать конечный индекс для удаления.
Например, удалим с первого по третий индекс: Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
var deleted = users.splice(1,3);
console.log(deleted); // [ "Sam", "Bill", "Alice" ]
console.log(users); // [ "Tom", "Kate" ]
Еще одна версия метода splice позволяет вставить вместо удаляемых элементов новые элементы: Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
var deleted = users.splice(1,3, "Ann", "Bob");
console.log(deleted); // [ "Sam", "Bill", "Alice" ]
console.log(users); // [ "Tom", "Ann", "Bob", "Kate" ]
В данном случае удаляем три элемента с 1-й по 3-й индексы и вместо них вставляем два элемента. Метод concat() служит для объединения массивов: Var fruit = ["яблоки", "груши", "сливы"];
var vegetables = ["помидоры", "огурцы", "картофель"];
var products = fruit.concat(vegetables);
for(var i=0; i < products.length; i++)
document.write(products[i] + " При этом необязательно объединять только однотипные массивы. Можно и разнотипные: Var fruit = ["яблоки", "груши", "сливы"];
var prices = ;
var products = fruit.concat(prices);
Метод join() объединяет все элементы массива в одну строку: Var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"];
var fruitString = fruit.join(", ");
document.write(fruitString);
В метод join() передается разделитель между элементами массива. В данном случае в качестве разделителя будет использоваться
запятая и пробел (", "). Метод sort() сортирует массив по возрастанию: Var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"];
fruit.sort();
for(var i=0; i < fruit.length; i++)
document.write(fruit[i] + " Вывод в браузере: Абрикосы
груши
персики
сливы
яблоки
Метод reverse() переворачивает массив задом наперед: Var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"];
fruit.reverse();
for(var i=0; i < fruit.length; i++)
document.write(fruit[i] + " Вывод в браузере: Персики
абрикосы
сливы
груши
яблоки
В сочетании с методом sort() можно отсортировать массив по убыванию: Var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"];
fruit.sort().reverse();
for(var i=0; i < fruit.length; i++)
document.write(fruit[i] + " Вывод в браузере: Яблоки
сливы
персики
груши
абрикосы
Методы indexOf()
и lastIndexOf()
возвращают индекс первого и последнего включения
элемента в массиве. Например: Var fruit = ["яблоки", "груши", "сливы", "яблоки", "груши"];
var firstIndex = fruit.indexOf("яблоки");
var lastIndex = fruit.lastIndexOf("яблоки");
var otherIndex = fruit.indexOf("вишни");
document.write(firstIndex); // 0
document.write(lastIndex); // 3
document.write(otherIndex); // -1
firstIndex имеет значение 0, так как первое включение стоки "яблоки" в массиве приходится на индекс 0, а последнее на индекс 3. Если же элемент отсутствует в массиве, то в этом случае методы indexOf() и lastIndexOf() возвращают значение -1. Метод every()
проверяет, все ли элементы соответствуют определенному условию: Var numbers = [ 1, -12, 8, -4, 25, 42 ];
function condition(value, index, array) {
var result = false;
if (value > 0) {
result = true;
}
return result;
};
var passed = numbers.every(condition);
document.write(passed); // false
В метод every() в качестве параметра передается функция, представляющая условие. Эта функция принимает три параметра: Function condition(value, index, array) {
}
Параметр value
представляет текущий перебираемый элемент массива, параметр index
представляет индекс этого элемента, а параметр array
передает ссылку на массив. В этой функции мы можем проверить переданное значение элемента на соответствие какому-нибудь условию. Например, в данном примере
мы проверяем каждый элемент массива, больше ли он нуля. Если больше, то возвращаем значение true , то есть элемент соответствует условию.
Если меньше, то возвращаем false - элемент не соответствует условию. В итоге, когда происходит вызов метода numbers.every(condition) он перебирает все элементы массива numbers и по очереди передает их
в функцию condition . Если эта функция возвращает значение true для всех элементов, то и метод every()
возвращает true . Если хотя бы один элемент не соответствует условию, то метод every() возвращает значение false . Метод some() похож на метод every() , только он проверяет, соответствует ли хотя бы один элемент условию. И в этом случае метод
some() возвращает true . Если элементов, соответствующих условию, в массиве нет, то возвращается значение
false: Var numbers = [ 1, -12, 8, -4, 25, 42 ];
function condition(value, index, array) {
var result = false;
if (value === 8) {
result = true;
}
return result;
};
var passed = numbers.some(condition); // true
Метод filter() , как some() и every() , принимает функцию условия.
Но при этом возвращает массив тех элементов, которые соответствуют этому условию: Var numbers = [ 1, -12, 8, -4, 25, 42 ];
function condition(value, index, array) {
var result = false;
if (value > 0) {
result = true;
}
return result;
};
var filteredNumbers = numbers.filter(condition);
for(var i=0; i < filteredNumbers.length; i++)
document.write(filteredNumbers[i] + " Вывод в браузере: 1
8
25
42
Методы forEach()
и map()
осуществляют перебор элементов и выполняют с ними определенный операции.
Например, для вычисления квадратов чисел в массиве можно использовать следующий код: Var numbers = [ 1, 2, 3, 4, 5, 6];
for(var i = 0; i Но с помощью метода forEach() можно упростить эту конструкцию: Var numbers = [ 1, 2, 3, 4, 5, 6];
function square(value, index, array) {
var result = value * value;
document.write("Квадрат числа " + value + " равен " + result + " Метод forEach() в качестве параметра принимает все ту же функцию, в которую при переборе элементов передается текущий перебираемый элемент
и над ним выполняются операции. Метод map()
похож на метод forEach , он также в качестве параметра принимает функцию, с помощью
которой выполняются операции над перебираемыми элементами массива, но при этом метод map() возвращает новый массив с результатами операций
над элементами массива. Например, применим метод map к вычислению квадратов чисел массива: Var numbers = [ 1, 2, 3, 4, 5, 6];
function square(value, index, array) {
return result = value * value;
};
var squareArray = numbers.map(square);
document.write(squareArray);
Функция, которая передается в метод map() получает текущий перебираемый элемент, выполняет над ним операции и
возвращает некоторое значение. Это значение затем попадает в результирующий массив squareArray Доброго времени суток всем, кто решил изучить все о массивах в языке 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 предусмотрели множество методов и функций, которые сильно упрощают работу с массивами. Среди них есть инструменты для копирования коллекций, смены порядка элементов, их сортировки, преобразования массива в строки и обратно, а также еще много всего другого.
Копирование массива. slice()
push()
");
document.write(fruit); // яблоки,груши,сливы,вишня,абрикос
pop()
");
document.write("В массиве fruit " + fruit.length + " элемента:
");
for(var i=0; i shift()
");
document.write("В массиве fruit " + fruit.length + " элемента:
");
for(var i=0; i unshift()
Удаление элемента по индексу. splice()
concat()
");
join()
sort()
");
reverse()
");
");
Поиск индекса элемента
every()
some()
filter()
");
forEach() и map()
");
};
numbers.forEach(square);
Поговорим о главной задаче массивов
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); //Томаты,Говядина,Макароны,Твердый сыр,Специи
А теперь пересчитаем элементы
Несколько полезных заметок