Объект Array в JavaScript

141

посл. ред. 19.03.2018

Массивы

Массив - это спископодобный объект, в котором каждый элемент имеет свой порядковый номер. Именами свойств такого объекта являются целые числа, начиная с 0. А сами элементы являются значениями этих свойств.

Для создания массивов данных используется объект-конструктор Array. В качестве аргументов конструктору Array передаются элементы массива:

new Array(elem_0, elem_1, ...);

Если конструктору передаётся только один аргумент и этот аргумент является натуральным числом N, тогда создаётся массив из N элементов со значениями undefined:

new Array(N);

Если конструктор вызывается без аргументов, то создаётся пустой массив.

Чтобы избежать неприятностей, связанных с различной работой конструктора Array, лучше создавать массивы более новым способом через квадратные скобки. В таком случае любое количество аргументов будет трактоваться одинаково:

var arr_1 = [elem_0];
var arr_2 = [elem_0, elem_1];

Элементы массива

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

var arr = ['first', 'second'];
alert(arr[0]); // first
alert(arr[1]); // second

Массивы являются объектами, поэтому они могут содержать свойства с любыми именами, а не только с числовыми индексами. Также, можно использовать любые числовые индексы, не соблюдая последовательность. Но этого делать не рекомендуется. Объекты-массивы специально выделены в отдельный класс, чтобы работать с ними как с упорядоченными списками. Для этого используются определённые свойства и методы массивов.

Свойства объекта `Array`

`length`

Свойство length всегда имеет значение 1.

alert(Array.length); // 1

`prototype`

Свойство prototype наследуется из класса Object.

var arr = new Array();
Array.prototype.prop = 'новое свойство';
alert(arr.prop); /* 'новое свойство' */

Методы объекта `Array`

`isArray()`

Метод isArray() проверяет, является ли переданный аргумент массивом. Метод возвращает значение булевого типа (true или false).

alert(Array.isArray([])); // true
alert(Array.isArray(['1', 'second'])); // true
alert(Array.isArray(new Array())); // true

alert(Array.isArray()); // false
alert(Array.isArray({})); // false
alert(Array.isArray(null)); // false
alert(Array.isArray(undefined)); // false
alert(Array.isArray(true)); // false
alert(Array.isArray(25)); // false
alert(Array.isArray('str')); // false

Свойства наследников `Array`

`constructor`

Свойство constructor наследуется из класса Object.

var arr = new Array();
alert(arr.constructor); /* 'function Array() {[native code]}' */

`length`

Свойство length представляет собой положительное целое число, на единицу большее, чем индекс последнего элемента массива. Для упорядоченного массива это свойство равно количеству элементов в массиве. В таком случае его удобно использовать для перебора элементов массива.

var arr = ['first', 'second'];
alert(arr.length); // 2

var sum = '';
for (var i = 0; i < arr.length; i++) {
  sum += arr[i] + ', ';
};
alert(sum); /* first, second, */

Если в массиве имеются пропущенные индексы, тогда свойство length не будет равно количеству элементов. При переборе циклом for элементы с пропущенными индексами будут равны undefined:

var arr = ['first', 'second'];
arr[7] = 'third';
alert(arr.length); // 8

var sum = '';
for (var i = 0; i < arr.length; i++) {
  sum += arr[i] + ', ';
};
alert(sum); /* first, second, undefined, undefined, undefined, undefined, undefined, third, */

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

var arr = ['first', 'second', 'third'];
arr.length = 2;
alert(arr[2]); // undefined

arr.length = 5;
alert(arr[2]); // undefined

Методы наследников `Array`

`pop()`

Метод pop() удаляет последний элемент из массива и возвращает его значение. Если массив пустой, то возвращается undefined.

var arr = ['first', 'second', 'third'];
alert(arr.pop()); // third
alert(arr.length); // 2

`push()`

Метод push() добавляет один или несколько элементов в конец массива и возвращает новое значение length. Аргументами метода являются элементы, которые необходимо добавить в массив.

var arr = ['first'];
alert(arr.push('second', 'third')); // 3
alert(arr); /* first,second,third */

`shift()`

Метод shift() удаляет первый элемент массива и возвращает его значение. При этом индексы оставшихся элементов уменьшаются на 1, поэтому для больших массивов данный метод будет работать медленно. Если массив пустой, метод возвращает undefined.

var arr = ['first', 'second', 'third'];
alert(arr.shift()); // first
alert(arr[0]); // second

`unshift()`

Метод unshift() добавляет один или несколько элементов в начало массива и возвращает новое значение length. При этом индексы первоначальных элементов массива увеличиваются на величину, равную количеству добавляемых элементов. Для больших массивов данный метод будет работать медленно. Аргументами метода являются элементы, которые необходимо добавить в массив.

var arr = ['third'];
alert(arr.unshift('first', 'second')); // 3
alert(arr); /* first,second,third */

`reverse()`

Метод reverse() меняет порядок следования элементов массива на противоположный.

var arr = ['first', 'second', 'third'];
arr.reverse();
alert(arr); /* third,second,first */

`sort()`

Метод sort() используется для сортировки элемментов массива по заданному правилу. Если вызвать метод без аргумента, тогда выполняется сортировка элементов по возрастанию. Но сравнение происходит в строковом формате, то есть посимвольно:

var arr = [5, 10, 2, 1];
arr.sort();
alert(arr); /* 1,10,2,5 */

Такой результат получается, потому что строка 10 меньше, чем 2.

В качестве аргумента методу sort() можно передать функцию, которая будет определять правило, по которому должна осуществляться сортировка элементов массива. Функция должна принимать 2 аргумента и возвращать число. Необходимость перестановки элементов местами определяется знаком возвращаемого числа. Поэтому для двух элементов массива функция всегда должна возвращать однозначный результат. Если функция принимает параметры (a, b), то сортировка идёт так:

Если возращается отрицательное число, то элемент a устанавливается по наименьшему индексу из элементов a и b.
Если возращается положительное число, то элемент a устанавливается по наибольшему индексу из элементов a и b.
Если возращается число 0, то элементы a и b остаются на своих местах.

Пример сортировки массива в числовом формате:

function sortRule(a, b) {
  if (a > b) return 1;
  if (a < b) return -1;
  return 0;
}

var arr = [5, 10, 2, 1];
arr.sort(sortRule);
alert(arr); /* 1,2,5,10 */

`splice()`

Метод splice() используется для удаления и добавления элементов массива. Первым аргументом указывается индекс элемента, с которого выполняется удаление или добавление элементов. Если указанный аргумент больше длины массива, то он приравнивается к длине массива. Если указать отрицательное число, то индекс отсчитывается с конца массива.

Вторым аргументом задаётся количество удаляемых элементов. Если он равен 0, то элементы не удаляются.

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

Метод splice() возвращает массив, содержащий удалённые элементы. Если элементы не удаляются, то возвращается пустой массив.

var arr = [0, 1, 2, 3];
/* удаляются 2 элемента, начиная с индекса 1, */
/* затем добавляются 3 элемента, начиная с индекса 1 */
alert(arr.splice(1, 2, 'new 1', 'new 2', 'new 3')); // 1,2
alert(arr); /* 0,new 1,new 2,new 3,3 */

`toString()`

Метод toString() возвращает строковое значение объекта. Строка составляется из значений элементов массива, разделённых запятыми.

var arr = ['elem 1', 'elem 2', 'elem 3'];
alert(arr); /* строка 'elem 1,elem 2,elem 3' */

`concat()`

Метод concat() создаёт из исходного массива новый, дополненный с учётом переданных параметров. Метод принимает любое количество аргументов. Аргументами могут быть другие массивы или отдельные значения. Каджое переданное значение становится отдельным элементом нового массива. Если передаётся массив, то его элементы становятся отдельными элементами нового массива. Все новые элементы добавляются последовательно в конец массива.

var value = 2,
    arr = [3, 4];
new_arr = [0, 1].concat(value, arr);
alert(new_arr); /* 0,1,2,3,4 */

`join()`

Метод join() преобразует массив в одну строку. По умолчанию все элементы будут отделены друг от друга запятыми. В качестве параметра методу join() можно передать строку, которая будет разделять элементы.

var arr = [0, 1, 2, 3, 4, 5];
alert(arr.join()); /* 0,1,2,3,4,5 */
alert(arr.join(' + ')); /* 0 + 1 + 2 + 3 + 4 + 5 */

`indexOf()`

Метод indexOf() осуществляет поиск заданного элемента в массиве. Массив просматривается от начала к концу. Метод возвращает индекс первого совпавшего элемента или -1, если элемент не найден. Первым аргументом указывается искомый элемент. Для поиска используется строгое сравнение (оператор ===).

Второй аргумент указывает, с какого индекса следует начать поиск. Если аргумент не указан, то поиск начинается с начала массива. Если аргумент отрицательный, то индекс отсчитывается с конца массива.

var arr = [1, 2, 5, 2];
alert(arr.indexOf(2)); // 1
alert(arr.indexOf(2, -2)); // 3
alert(arr.indexOf(10)); // -1

`lastIndexOf()`

Метод lastIndexOf() осуществляет поиск заданного элемента в массиве. Массив просматривается с конца к началу. Метод возвращает индекс первого совпавшего элемента или -1, если элемент не найден. Первым аргументом указывается искомый элемент. Для поиска используется строгое сравнение (оператор ===).

Второй аргумент указывает, с какого индекса следует начать поиск. Если аргумент не указан, то поиск начинается с конца массива. Если аргумент отрицательный, то индекс отсчитывается с конца массива.

var arr = [1, 2, 5, 2];
alert(arr.lastIndexOf(2)); // 3
alert(arr.lastIndexOf(2, -2)); // 1
alert(arr.lastIndexOf(10)); // -1

`slice()`

Метод slice() создаёт новый массив, который является частью исходного массива. При этом исходный массив не изменяется. Первым аргументом указывается индекс элемента, с которого начинается копирование. Данный элемент включается в возвращаемый результат. Если указать отрицательное число, то индекс отсчитывается с конца массива. Если аргумент не указан, тогда он считается равным 0.

Вторым аргументом задаётся индекс элемента, на котором заканчивается копирование массива. Данный элемент не включается в результирующий массив. Если указать отрицательное число, то индекс отсчитывается с конца массива. Если аргумент не указан, тогда копирование происходит до конца массива.

var arr = [0, 1, 2, 3, 4, 5];
/* копирование с 1-го элемента включительно */
/* до последнего не включительно */
var res = arr.slice(1, -1);
alert(res); /* 1,2,3,4 */

`forEach()`

Метод forEach() используется для полного перебора массива. Для каждого элемента массива выполняется функция, переданная первым аргументом метода. Эта функция может принимать 3 аргумента:

значение текущего элемента.
индекс текущего элемента.
перебираемый массив.

Вторым аргументом можно указать значение, которое будет присвоено переменной this в выполняемой функции.

var arr = [1, 2, 3];
arr.forEach(function(elem, i, arr) {
  arr[i] = elem + this;
}, 2);
alert(arr); /* 3,4,5 */

Метод forEach() выполянется только для тех элементов массива, которые имеются до запуска метода. Данный метод используется для преобразования исходного массива. Сам метод возвращает undefined.

Вместо цикла for для перебора массива лучше использовать данный метод. Единственный недостаток метода в том, что его выполнение нельзя прервать.

`every()`

Метод every() проверяет, удовлетворяют ли элементы массива заданному условию. Для каждого элемента массива выполняется функция, переданная первым аргументом метода. Данная функция должна возвращать значения true или false. Как только будет возвращено false, метод остановится и сам вернёт значение false. Если для каждого элемента функция вернёт true, то метод вернёт true. Передаваемая функция может принимать 3 аргумента:

значение текущего элемента.
индекс текущего элемента.
перебираемый массив.

Вторым аргументом можно указать значение, которое будет присвоено переменной this в выполняемой функции.

function compare(elem, i, arr) {
  return elem > this;
}

alert([1, 2, 3].every(compare, 2)); // false
alert([3, 4, 5].every(compare, 2)); // true

Метод every() выполянется только для тех элементов массива, которые имеются до запуска метода.

`some()`

Метод some() проверяет, удовлетворяет ли хоть один элемент массива заданному условию. Для каждого элемента массива выполняется функция, переданная первым аргументом метода. Данная функция должна возвращать значения true или false. Как только будет возвращено true, метод остановится и сам вернёт значение true. Если для каждого элемента функция вернёт false, то метод вернёт false. Передаваемая функция может принимать 3 аргумента:

значение текущего элемента.
индекс текущего элемента.
перебираемый массив.

Вторым аргументом можно указать значение, которое будет присвоено переменной this в выполняемой функции.

function compare(elem, i, arr) {
  return elem > this;
}

alert([1, 2, 3].some(compare, 2)); // true
alert([0, 1, 2].some(compare, 2)); // false

Метод some() выполянется только для тех элементов массива, которые имеются до запуска метода.

`filter()`

Метод filter() создаёт новый массив из элементов, которые удовлетворяют заданному условию. Для каждого элемента массива выполняется функция, переданная первым аргументом метода. Данная функция должна возвращать значения true или false. Если функция возвращает true, тогда элемент копируется в новый массив. Если для элемента функция вернёт false, то элемент не копируется. Передаваемая функция может принимать 3 аргумента:

значение текущего элемента.
индекс текущего элемента.
перебираемый массив.

Вторым аргументом можно указать значение, которое будет присвоено переменной this в выполняемой функции.

function compare(elem, i, arr) {
  return elem > this;
}

alert([1, 2, 3].filter(compare, 2)); // 3
alert([3, 4, 5].filter(compare, 2)); // 3,4,5

Метод filter() выполянется только для тех элементов массива, которые имеются до запуска метода.

`map()`

Метод map() используется для перебора элементов исходного массива. Сам метод возвращает новый массив. Для каждого элемента массива выполняется функция, переданная первым аргументом метода. Данная функция должна возвращать значение, которое будет элементом нового массива. Эта функция может принимать 3 аргумента:

значение текущего элемента.
индекс текущего элемента.
перебираемый массив.

Вторым аргументом можно указать значение, которое будет присвоено переменной this в выполняемой функции.

function increment(elem, i, arr) {
  return elem + this;
}

alert([1, 2, 3].map(increment, 2)); // 3,4,5

Метод map() выполянется только для тех элементов массива, которые имеются до запуска метода.

`reduce()`

Метод reduce() выполняет для каждого элемента массива функцию, переданную первым аргументом метода. Данная функция должна возвращать значение, которое будет использоваться при следующем вызове функции. Эта функция может принимать 4 аргумента:

значение предыдущего выполнения функции.
значение текущего элемента.
индекс текущего элемента.
перебираемый массив.

Вторым аргументом можно указать значение, которое будет присвоено первому аргументу функции при первом вызове. Если данный параметр не указать, то ему будет присвоено значение первого элемента массива, а перебор массива начнётся со следующего элемента.

Результатом метода является последнее возвращённое функцией значение.

function sum(prev, elem, i, arr) {
  return elem + prev;
}

alert([1, 2, 3].reduce(sum)); // 6
alert([1, 2, 3].reduce(sum, 10)); // 16

Метод reduce() выполянется только для тех элементов массива, которые имеются до запуска метода.

`reduceRight()`

Метод reduceRight() перебирает элементы массива от конца к началу. При этом для каждого элемента массива выполняется функция, переданная первым аргументом метода. Данная функция должна возвращать значение, которое будет использоваться при следующем вызове функции. Эта функция может принимать 4 аргумента:

значение предыдущего выполнения функции.
значение текущего элемента.
индекс текущего элемента.
перебираемый массив.

Вторым аргументом можно указать значение, которое будет присвоено первому аргументу функции при первом вызове. Если данный параметр не указать, то ему будет присвоено значение последнего элемента массива, а перебор массива начнётся со второго элемента с конца.

Результатом метода является последнее возвращённое функцией значение.

function sum(prev, elem, i, arr) {
  return elem + prev;
}

alert([1, 2, 3].reduceRight(sum)); // 6
alert([1, 2, 3].reduceRight(sum, 10)); // 16

Метод reduceRight() выполянется только для тех элементов массива, которые имеются до запуска метода.

Объект Array в JavaScript

Массивы

Элементы массива

Свойства объекта Array

length

prototype

Методы объекта Array

isArray()

Свойства наследников Array

constructor

length

Методы наследников Array

pop()

push()

shift()

unshift()

reverse()

sort()

splice()

toString()

concat()

join()

indexOf()

lastIndexOf()

slice()

forEach()

every()

some()

filter()

map()

reduce()

reduceRight()

Свойства объекта `Array`

`length`

`prototype`

Методы объекта `Array`

`isArray()`

Свойства наследников `Array`

`constructor`

`length`

Методы наследников `Array`

`pop()`

`push()`

`shift()`

`unshift()`

`reverse()`

`sort()`

`splice()`

`toString()`

`concat()`

`join()`

`indexOf()`

`lastIndexOf()`

`slice()`

`forEach()`

`every()`

`some()`

`filter()`

`map()`

`reduce()`

`reduceRight()`