8. Методы класса Array
Стандарты ECMAScript3-6 определяеют в составе Array.prototype множество удобных функций для работы с массивами, которые доступны как методы любого массива. Эти методы будут представлены в следующих подразделах. Более полную информацию можно найти в разделе Array в справочной части MDN по базовому языку JavaScript.
8.1 ES3
8.1.1 Метод join()
Метод Array.join() преобразует все элементы массива в строки, объединяет их и возвращает получившуюся строку. В необязательном аргументе методу можно передать строку, которая будет использоваться для отделения элементов в строке результата. Если строка-разделитель не указана, используется запятая.
'use strict';
var arr = ['Маша', 'Петя', 'Марина', 'Василий'];
var str = arr.join(';');
alert( str ); // Маша;Петя;Марина;Василий
alert(typeof str); // "string"
var str = arr.join();
alert( str ); // Маша,Петя,Марина,Василий
var str = arr.join(', ');
alert( str ); // Маша, Петя, Марина, Василий
8.1.2 Метод reverse()
Метод Array.reverse() меняет порядок следования элементов в массиве на обратный и возвращает переупорядоченный массив. Перестановка выполняется непосредственно в исходном массиве, т. е. этот метод не создает новый массив с переупорядоченными элементами, а переупорядочивает их в уже существующем массиве.
'use strict';
var arr = ['Маша', 'Петя', 'Марина', 'Василий'];
arr.reverse();
console.log(arr); // ["Василий", "Марина", "Петя", "Маша"]
8.1.3 Метод split()
Метод split(s), который позволяет превратить строку в массив, разбив ее по разделителю s. В примере ниже таким разделителем является строка из запятой и пробела.
'use strict';
var names = 'Маша, Петя, Марина, Василий';
var arr = names.split(', ');
for (var i = 0; i < arr.length; i++) {
alert( 'Вам сообщение ' + arr[i] );
}
У метода split есть необязательный второй аргумент – ограничение на количество элементов в массиве. Если их больше, чем указано – остаток массива будет отброшен.
8.1.4 Метод slice()
Метод Array.slice() возвращает фрагмент, или подмассив, указанного массива. Два аргумента метода определяют начало и конец возвращаемого фрагмента. Возвращаемый массив содержит элемент, номер которого указан в первом аргументе, плюс все последующие элементы, вплоть до (но не включая) элемента, номер которого указан во втором аргументе. Если указан только один аргумент, возвращаемый массив содержит все элементы от начальной позиции до конца массива. Если какой-либо из аргументов имеет отрицательное значение, он определяет номер элемента относительно конца массива. Так, аргументу –1 соответствует последний элемент массива, а аргументу –3 – третий элемент массива с конца.
'use strict';
var arr = ['Маша', 'Петя', 'Марина', 'Василий'];
var part = arr.slice(1, 3); // ["Петя", "Марина"]
Если вообще не указать аргументов – скопируется весь массив.
8.1.5 Метод splice()
Метод Array.splice() – это универсальный метод, выполняющий вставку или удаление элементов массива. Метод splice() изменяет исходный массив, относительно которого он был вызван. Обратите внимание, что методы splice() и slice() имеют очень похожие имена, но выполняют совершенно разные операции.
Метод splice() может удалять элементы из массива, вставлять новые элементы или выполнять обе операции одновременно. Элементы массива при необходимости смещаются, чтобы после вставки или удаления образовывалась непрерывная последовательность. Первый аргумент метода splice() определяет позицию в массиве, начиная с которой будет выполняться вставка и/или удаление. Второй аргумент определяет количество элементов, которые должны быть удалены (вырезаны) из массива. Если второй аргумент опущен, удаляются все элементы массива от указанного до конца массива. Метод splice() возвращает массив удаленных элементов или (если ни один из элементов не был удален) пустой массив.
'use strict';
var a = [1,2,3,4,5,6,7,8];
a.splice(4); // Вернет [5,6,7,8]; a = [1,2,3,4]
a.splice(1,2); // Вернет [2,3]; a = [1,4]
a.splice(1,1); // Вернет [4]; a = [1]
Первые два аргумента метода splice() определяют элементы массива, подлежащие удалению. За этими аргументами может следовать любое количество дополнительных аргументов, определяющих элементы, которые будут вставлены в массив, начиная с позиции, указанной в первом аргументе. Например:
'use strict';
var a = [1,2,3,4,5];
a.splice(2,0,'a','b'); // Вернет []; a = [1,2,'a','b',3,4,5]
a.splice(2,2,[1,2],3); // Вернет ['a','b']; a = [1,2,[1,2],3,3,4,5]
8.1.6 Метод concat()
Метод Array.concat() создает и возвращает новый массив, содержащий элементы исходного массива, для которого был вызван метод concat(), и значения всех аргументов, переданных методу concat(). Если какой-либо из этих аргументов самявляется массивом, его элементы добавляются в возвращаемый массив. Следует, однако, отметить, что рекурсивного превращения массива из массивов в одно мерный массив не происходит. Метод concat() не изменяет исходный массив. Ниже приводится несколько примеров:
'use strict';
var a = [1,2,3];
a.concat(4, 5) // Вернет [1,2,3,4,5]
a.concat([4,5]); // Вернет [1,2,3,4,5]
a.concat([4,5],[6,7]) // Вернет [1,2,3,4,5,6,7]
a.concat(4, [5,[6,7]]) // Вернет [1,2,3,4,5,[6,7]]
8.1.7 Метод sort()
Метод Array.sort() сортирует элементы в исходном массиве и возвращает отсортированный массив. Если метод sort() вызывается без аргументов, сортировка выполняется в алфавитном порядке (для сравнения элементы временно преобразуются в строки, если это необходимо).
Для сортировки в каком-либо ином порядке, отличном от алфавитного, методу sort() можно передать функцию сравнения в качестве аргумента. Эта функция устанавливает, какой из двух ее аргументов должен следовать раньше в отсортированном списке. Если первый аргумент должен предшествовать второму, функция сравнения должна возвращать отрицательное число. Если первый аргумент должен следовать за вторым в отсортированном массиве, то функция должна возвращать число больше нуля. А если два значения эквивалентны (т.е. порядок их следования не важен), функция сравнения должна возвращать 0. Поэтому, например, для сортировки элементов массива в числовом порядке можно сделать следующее:
'use strict';
var a = [33, 4, 1111, 222];
a.sort(); // Алфавитный порядок: 1111, 222, 33, 4
a.sort(function(a,b) { // Числовой порядок: 4, 33, 222, 1111
return a-b; // Возвращает значение < 0, 0 или > 0
}); // в зависимости от порядка сортировки a и b
a.sort(function(a,b) {return b-a}); // Обратный числовой порядок
Обратите внимание, насколько удобно использовать в этом фрагменте неименованную функцию. Функция сравнения используется только здесь, поэтому нет необходимости давать ей имя.
8.2 ES5
Стандарт ECMAScript 5 определяет девять новых методов массивов, позволяющих выполнять итерации, отображение, фильтрацию, проверку, свертку и поиск. Все эти методы описываются в следующих далее подразделах.
Однако, прежде чем перейти к изучению особенностей, следует сделать некоторые обобщения, касающиеся методов массивов в ECMAScript 5. Во-первых, большинство описываемых ниже методов принимают функцию в первом аргументе и вызывают ее для каждого элемента (или нескольких элементов) массива. В случае разреженных массивов указанная функция не будет вызываться для несуществующих элементов. В большинстве случаев указанной функции передаются три аргумента: значение элемента массива, индекс элемента и сам массив. Чаще всего вам необходим будет только первый аргумент, а второй и третий аргументы можно просто игнорировать. Большинство методов массивов, введенных стандартом ECMAScript 5, которые в первом аргументе принимают функцию, также принимают второй необязательный аргумент. Если он указан, функция будет вызываться, как если бы она была методом этого второго аргумента. То есть второй аргумент будет доступен функции, как значение ключевого слова this. Значение, возвращаемое функцией, играет важную роль, но разные методы обрабатывают его по-разному. Ни один из методов массивов, введенных стандартом ECMAScript 5, не изменяет исходный массив. Разумеется, функция, передаваемая этим методам, может модифицировать исходный массив.
8.2.1 Метод forEach()
Метод forEach() выполняет обход элементов массива и для каждого из них вызывает указанную функцию. Как уже говорилось выше, функция передается методу forEach() в первом аргументе. При вызове этой функции метод forEach() будет передавать ей три аргумента: значение элемента массива, индекс элемента и сам массив. Если вас интересует только значение элемента, можно написать функцию с одним параметром – дополнительные аргументы будут игнорироваться:
'use strict';
var data = [1,2,3,4,5]; // Массив, элементы которого будут суммироваться
// Найти сумму элементов массива
var sum = 0; // Начальное значение суммы 0
data.forEach(function(value) { sum += value; }); // Прибавить значение к sum
sum // => 15
// Увеличить все элементы массива на 1
data.forEach(function(v, i, a) { a[i] = v + 1; });
8.2.2 Метод map()
Метод map() создаёт новый массив с результатом вызова указанной функции для каждого элемента массива.
'use strict';
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// теперь roots равен [1, 2, 3], а numbers всё ещё равен [1, 4, 9]
Функция map просто преобразует один массив в другой массив. Например, предположим, что у вас есть массив объектов person, но вам нужен массив name (строк):
'use strict';
var friends = [
{id:1, name: 'Dave',age:50},
{id:2,name: 'Kellie',age:42},
{id:3,name: 'Max',age:12},
{id:2,name: 'Jack',age:12}
];
var friendsNamesList = friends.map(function(element) {
return element.name;
}); ["Dave", "Kellie", "Max", "Jack"]
// ["Dave", "Kellie", "Max", "Jack"]
8.2.3 Метод filter()
Метод filter() возвращает массив, содержащий подмножество элементов исходного массива. Передаваемая ему функция должна быть функцией-предикатом, т. е. должна возвращать значение true или false. Метод filter() вызывает функцию точно так же, как методы forEach() и map(). Если возвращается true или значение, которое может быть преобразовано в true, переданный функции элемент считается членом подмножества и добавляется в массив, возвращаемый методом. Например:
'use strict';
a = [5, 4, 3, 2, 1];
smallvalues = a.filter(function(x) { return x < 3 }); // [2, 1]
everyother = a.filter(function(x,i) { return i%2==0 }); // [5, 3, 1]
Обратите внимание, что метод filter() пропускает отсутствующие элементы в разреженных массивах и всегда возвращает плотные массивы. Чтобы уплотнить разреженный массив, можно выполнить следующие действия:
'use strict';
var dense = sparse.filter(function() { return true; });
А чтобы уплотнить массив и удалить из него все элементы со значениями undefined и null, можно использовать метод filter(), как показано ниже:
'use strict';
a = a.filter(function(x) { return x !== undefined && x != null; });
8.2.3 Методы every() и some()
Метод some() проверяет, удовлетворяет ли хоть какой-нибудь элемент массива условию, заданному в передаваемой функции.
Метод some() вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдет такой, для которого callback вернет истинное значение (значение, становящееся равным true при приведении его к типу Boolean). Если такой элемент найден, метод some() немедленно вернёт true. В противном случае, если callback вернёт false для всех элементов массива, метод some() вернёт false. Функция callback вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.
'use strict';
function isBiggerThan10(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
Метод every() проверяет, удовлетворяют ли все элементы массива условию, заданному в передаваемой функции.
Метод every() вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдет такой, для которого callback вернет ложное значение (значение, становящееся равным false при приведении его к типу Boolean). Если такой элемент найден, метод every() немедленно вернёт false. В противном случае, если callback вернёт true для всех элементов массива, метод every() вернёт true. Функция callback вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.
'use strict';
function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
8.2.4 Методы reduce() и reduceRight()
8.2.5 Методы indexOf() и lastIndexOf()
Методы indexOf() и lastIndexOf() отыскивают в массиве элемент с указанным значением и возвращают индекс первого найденного элемента или –1, если элемент с таким значением отсутствует. Метод indexOf() выполняет поиск от начала массива к концу, а метод lastIndexOf() – от конца к началу.
'use strict';
a = [0,1,2,1,0];
a.indexOf(1) // => 1: a[1] = 1
a.lastIndexOf(1) // => 3: a[3] = 1
a.indexOf(3) // => -1: нет элемента со значением 3
В отличие от других методов, описанных в этом разделе, методы indexOf() и lastIndexOf() не принимают функцию в виде аргумента. В первом аргументе им передается искомое значение. Второй аргумент является необязательным: он определяет индекс массива, с которого следует начинать поиск. Если опустить этот аргумент, метод indexOf() начнет поиск с начала массива, а метод lastIndexOf() – с конца. Во втором аргументе допускается передавать отрицательные значения, которые интерпретируются как смещение относительно конца массива, как в методе splice(): значение –1, например, соответствует последнему элементу массива.
8.3 ES6
8.3.1 Методы find()
8.3.2 Методы findIndex()
8.3.3 Методы fill
8.3.4 Методы copyWithin()
.png)
.png)