Очень многие задачи программирования основаны на манипулировании целыми коллекциями данных, и подраумевают свободное владение методами обработки массивов в JavaScript. Изучение этих методов является также отличным способом достижения очередного уровня мастерства в JavaScript.

Массив (Array) – это упорядоченный набор пронумерованных значений. Каждое значение называется элементом массива, а номер элемента в массиве, называется его индексом. Так как JavaScript – это нетипизированный язык, элемент массива может иметь любой тип, причем разные элементы одного массива могут иметь разные типы. Элемент массива может быть даже объектом или другим массивом.

Объекты массивов могут создаваться путем присвоения переменным литеральных значений массивов [] либо при помощи оператора new.

Литерально массив определяется перечислением значений в квадратных скобках []. При этом значения разделяются запятыми и имеют целочисленный, последовательно возрастающий от нуля индекс:

var colors = ["red", "yellow", "green"];  // массив с тремя строками
var names = [];  // пустой массив 

Другой способ создания массива состоит в вызове конструктора Array(). Вызывать конструктор можно тремя разными способами:

В первом случае создается пустой массив, эквивалентный литералу []:

var a = new Array(); // пустой массив 

Во втором – массив с заданным количеством элементов (каждый из которых имеет значение undefined) и устанавливает свойство length массива равным указанному значению:

var a = new Array(10); // 10 – длина массива 

Третий способ очень похож на определение массива с помощью литерала – аналогично создается массив, заполненный указанными значениями. Свойство length массива устанавливается равным количеству элементов, переданных конструктору:

var а = new Array(5, 4, 3, 2, 1, "testing"); 

Когда конструктор Array вызывается как функция (без оператора new), он ведет себя точно так же, как при вызове с оператором new:

var arr = Array();
alert(Array.isArray(arr)); // true 

Доступ к элементам массива осуществляется с помощью оператора []. Внутри скобок указывается произвольное выражение, имеющее неотрицательное целое значение. Этот синтаксис пригоден как для чтения, так и для записи значения элемента массива. Значения, указанные при создании массива в литерале массива или в конструкторе, располагаются в созданном массиве в том порядке, в котором были указаны:

Выполнить код »

Добавление нового элемента осуществляется точно так же, с помощью оператора квадратные скобки:

Выполнить код »

В этом коде в массив arr добавляется значение в позиции 5, при этом длина становится равна 6 (5 + 1). Элементы с индексами от 1 до 4 не существуют, и при доступе к ним возвращается значение undefined.

Если в массиве есть пропущенные индексы, как в примере выше, то при его выводе появляются «лишние» запятые. Дело в том, что алгоритм вывода массива осуществляется от 0 до arr.length и выводит всё через запятую. Отсутствующие значения дают несколько запятых подряд.

Удаление элементов массива осуществляется с помощью оператора delete:

Выполнить код »

В процессе анализ кода у вас может возникнуть вопрос: является ли переменная массивом?

Проблема в том, что оператор JavaScript typeof возвращает object, потому что массив JavaScript является объектом:

Выполнить код »

Чтобы решить этот вопрос, стандарт ECMAScript 5 определяет новый метод Array.isArray():

Выполнить код »

Проблема с этим решением заключается в том, что ECMAScript 5 не поддерживается в старых браузерах.

Узнать, является ли переменная массивом можно через пользовательскую функцию isArray():

Выполнить код »

И, наконец, оператор instanceof возвращает true, если объект является массивом:

Выполнить код »

Свойство length – длина, или, иными словами, количество элементов в массиве. Значение свойства length всегда на еди­ницу больше, чем самый высокий индекс массива.

[].length        // => О: массив не имеет элементов 
[а, Ь, с].length // => З: наибольший индекс равен 2 

Чтобы изменить размер массива, можно установить значение свойства length. Если новое значение length меньше предыдущего, массив обрезается, и элементы в его конце удаляются. Можно также присвоить свойству length значение, большее, чем текущая длина массива. В результате будут созданы пустые элементы, со значением undefined, и массив станет «разреженным»:

аrr = [1, 2, З, 4, 5];  // Создание массива из 5 элементов
arr.leпgth = З;         // Теперь массив такой: [1, 2, 3]
arr.leпgth = О;         // Удаление всех элементов массива
arr.leпgth = 5;         // Опять 5 элементов, но пустых 

Свойство prototype – ссылается на объект, являющийся прототипом для объектов типа Array. Данное свойство используется интерпретатором JavaScript, когда функция используется как конструктор при создании нового объекта. Любой объект, созданный с помощью конструктора, наследует все свойства объекта, на который ссылается свойство prototype.

Array.prototype сам является экземпляром Array:

Array.isArray(Array.prototype); // true 

Свойство прототип позволяет добавлять новые свойства и методы ко всем созданным массивам.

Например, следующее выражение добавляет свойство color ко всем уже созданным массивам:

Выполнить код »

Прототипу можно присвоить функции. При этом они пополнят множество методов объекта Array.

Например, определим функцию sum(), которая возвращает сумму элементов числового массива. В качестве параметра наша функция будет принимать массив. Затем присоединим к прототипу массива новый метод sum:

Выполнить код »

Этот пример просто демонстрирует использование свойства prototype. Чтобы вычислить сумму элементов массива, достаточно написать: s = sum(myarray).

Свойство constructor ссылается на функцию-конструктор, которая была использована при создании объекта.

Возвращаемое значение является ссылкой на функцию, а не на имя функции:

Выполнить код »

Свойство constructor можно использовать для определения, является ли переменная массивом.

МетодОписание
concat()Метод для создания массива путем объединения нескольких массивов. Результат получается объединением массива, из которого вызывается метод с массивом или значениями, переданными аргументами методу.
copyWithin()Копирует элементы массива и вставляет их в тот же массив, заменяя определенные элементы массива (в зависимости от их индекса), длина массива при этом не изменяется.
entries()Возвращает объект итератор, который содержит пары ключ/значение по каждому индексу в массиве.
every()Возвращает true, если каждый элемент в этом массиве удовлетворяет предоставленной функции тестирования.
fill()Заполняет все элементы массива одним значением, при необходимости задавая значение начального индекса с которого начинается заполнение и конечное значение индекса, которым заканчивается заполнение.
filter()Возвращает элементы массива, удовлетворяющие условию, указанному в функции обратного вызова.
find()Возвращает значение первого элемента в массиве, который соответствует условию в переданной функции, или undefined, если ни один элемент не удовлетворяет условию в переданной функции.
findIndex()Возвращает индекс первого элемента в массиве, который соответствует условию в переданной функции. В противном случае возвращается -1.
forEach()Выполняет переданную функцию один раз для каждого элемента в массиве в порядке возрастания индекса.
from()Возвращает объект Array (массив) из любого объекта с свойством length или итерируемого объекта.
includes()Определяет, содержит ли массив определённый элемент, возвращая в зависимости от этого true или false.
indexOf()Возвращает первый индекс, по которому данный элемент может быть найден в массиве или -1, если такого индекса нет.
isArray()Проверяет, является ли переданный ему аргумент массивом.
join()Объединяет все элементы массива в строку и возвращает эту строку. По умолчанию разделителем является запятая (,), но метод позволяет задавать и другие разделители.
keys()Объединяет все элементы массива в строку и возвращает эту строку. По умолчанию разделителем является запятая (,), но метод позволяет задавать и другие разделители.
lastIndexOf()Возвращает последний индекс элемента внутри массива, эквивалентный указанному значению, или -1, если совпадений не найдено.
map()Создаёт новый массив с результатом вызова указанной функции для каждого элемента массива.
pop()Удаляет последний элемент из массива и возвращает этот элемент.
push()Добавляет один или несколько элементов в конец массива и возвращает новую длину массива.
reduce()Вызывает заданную функцию обратного вызова для всех элементов в массиве. Возвращаемое значение функции обратного вызова представляет собой накопленный результат и предоставляется как аргумент в следующем вызове функции обратного вызова.
reduceRight()Применяет заданную функцию обратного вызова к аккумулятору и каждому значению массива (справа-налево), сводя его к одному значению.
reverse()Изменяет порядок следования элементов в текущем массиве на обратный.
shift()Удаляет первый элемент из массива и возвращает этот элемент.
slice()Извлекает часть массива и возвращает новый массив.
some()Определяет, возвращает ли заданная функция обратного вызова значение true для какого-либо элемента массива.
sort()Сортирует элементы массива.
splice()Изменяет текущий массив, добавляя или удаляя элементы. Возвращает массив с удаленными элементами, если элементы не удалялись, то возвращает пустой массив.
toString()Преобразует массив в строку и возвращает результат.
unshift()Добавляет один или несколько элементов в начало массива и возвращает новую длину массива.
valueOf()Возвращает примитивное значение объекта.

  • Массив длин

    Используя метод map() напишите код, который получает из массива строк новый массив, содержащий их длины.

    var vegetables = ['Капуста', 'Репа', 'Редиска', 'Морковка'];
    
    // Ваш код
    
    alert( vegetableLength ); // 7,4,7,8
    
    Показать решение

    Решение:

    Выполнить код »
  • Массив сумм чисел

    Имеется массив простых чисел: numbers = [2, 3, 5, 7, 11, 13, 17, 19]. Использую метод reduce() напишите функцию currentSums(numbers), которая возвращает новый массив из такого же числа элементов, в котором на каждой позиции будет находиться сумма элементов массива numbers до этой позиции включительно.

    для numbers = [2, 3, 5, 7, 11, 13, 17]
    
    // ваш код
    
    currentSums(numbers); // [2, 2+3, 2+3+5, 2+3+5+7, 2+3+5+7+11, 2+3+5+7+11+13, 2+3+5+7+11+13+17] = [ 2,5,10,17,28,41,58]
    
    Показать решение
    Выполнить код »
  • Равные в сумме пары чисел

    Напишите код, который получает из массива чисел новый массив, содержащий пары чисел, которые в сумме должны быть равны семи: (0:7), (1:6) и т.д.

    var arr = [0, 1, 2, 3, 4, 5, 6, 7];
    function sumSeven(numbers) {
    
     // ваш код
    
    }
    
    document.writeln(sumSeven(numbers)); // [0:7, 1:6, 2:5, 3:4]
    
    
    Показать решение
    Выполнить код »
  • Массив из первых букв

    Перед вами переменная, содержащая строку. Напишите код, создащий массив, который будет состоять из первых букв слов строки str. При написании данного кода, позаимствуйте у объека Array метод filter.

    var str = "Каждый охотник желает знать, где сидит фазан."; 
    
    // Ваш код 
    
    document.write(array);  // [К,о,ж,з,г,с,ф]
    
    
    Показать решение
    Выполнить код »
  • Массив строк по три символа

    Перед вами переменная, содержащая строку. Напишите код, создащий массив, который будет состоять из строк, состоящих из предыдущего, текущего и следующего символа строки str. При написании данного кода, позаимствуйте у объека Array метод map.

    var str = "JavaScript"; 
    
    // Ваш код 
    
    document.writeln(arr); // [Ja,Jav,ava,vaS,aSc,Scr,cri,rip,ipt,pt] 
    
    
    Показать решение
    Выполнить код »
  • Получить массив цифр по убыванию

    Напишите код, преобразующий массив цифр, которые располагаются неупорядоченно, в массив цифр расположенных по убыванию их значений.

    var numerics = [5, 7, 2, 9, 3, 1, 8];
    
    // Ваш код 
    
    document.writeln(numerics); // [9,8,7,5,3,2,1] 
    
    
    Показать решение
    Выполнить код »
  • Слияние массивов

    Напишите код, объединяющий три массива цифр, и располагающий цифры, в полученном массиве, в порядке убывания их значений через пробел.

    var a = [1,2,3];
    var b = [4,5,6];
    c = [7,8,9];
    function getArr(a, b, c) {
    
    // Ваш код 
    
    }
    
    getArr(a, b, c); // [9 8 7 6 5 4 3 2 1]  
    
    
    Показать решение
    Выполнить код »

Комментарии

пожелания к комментариям…
  • Приветствуются комментарии, соответствующие теме урока: вопросы, ответы, предложения.
  • Одну строчку кода оборачивайте в тег <code>, несколько строчек кода — в теги <pre><code>...ваш код...</code></pre>.
  • Допускаются ссылки на онлайн-песочницы (codepen, plnkr, JSBin и др.).