В этой статье мы рассмотрим стандартные 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
. Это потому, что метод преобразует все в строку и использует по умолчанию лексикографический порядок. 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. 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 не предоставляет 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;
};
Метод не точный и имеющий множество проблем — например есть вероятность уйти в бесконечный цикл. Последнее обновление: 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
: Var fruit = new Array();
fruit = "яблоки";
fruit = "груши";
fruit = "сливы";
document.write("В массиве fruit " + fruit.length + " элемента: По факту длиной массива будет индекс последнего элемента с добавлением единицы. Например: 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 предусмотрели множество методов и функций, которые сильно упрощают работу с массивами. Среди них есть инструменты для копирования коллекций, смены порядка элементов, их сортировки, преобразования массива в строки и обратно, а также еще много всего другого. И как вы поняли из той статьи, в переменную можно сохранить только одно значение. Сколько бы мы пытались больше одного значения в переменной мы не запишем
. Допустим, мы объявим некую переменную 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] + " Открываем эту страницу в браузере и видим такую картину: Для тренировки, попробуйте перебрать массив "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 + "Задание для самостоятельного выполнения
Решение
Задание для самостоятельного выполнения
Решение
join и split
Задание для самостоятельного выполнения
Решение
Использование length для обрезки массива
Array представляет собой объект, что из этого следует
Нечисловые ключи массива
Таким образом, shift/unshift
работают медленнее, чем push/pop
. Чем больше массив, тем больше времени занимает в JavaScript
сортировка массива.
Задание для самостоятельного выполнения
Решение
Разреженные массивы, описание length
Удаление из массива
Метод splice
Задание для самостоятельного выполнения
Решение
Метод slice
Метод reverse
Вычисление на javascript количества элементов в массиве
Вычисление на javascript размера массива в байтах
Инициализация массива
length
");
for(var i=0; i < fruit.length; i++)
document.write(fruit[i] + "
");
Копирование массива. 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); //Томаты,Говядина,Макароны,Твердый сыр,Специи
А теперь пересчитаем элементы
Несколько полезных заметок
Заполнение массива с помощью цикла
Посчитаем сумму всех элементов из массива
Вот и все о чем я хотел Вам рассказать в этой статье. Теперь Вы знаете, как создавать массив, как его заполнять и как с ним работать.
На практике массивы встречаются довольно часто, так как они очень важны в программировании, поэтому Вы должны их знать на отлично .