JS для начинающих. Урок 1.15: Методы для работы с массивами

В одном из предыдущих уроков я уже знакомил вас с массивами. Тогда был рассмотрен синтаксис объявления массивов и обращения к их элементам. В этом уроке мы сосредоточимся на описании встроенных методов для работы с массивами.

Вызовы таких методов производятся следующим образом.

имяМассива.имяМетода(аргумен1, аргумен2,, аргументN);

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

pop

Удаляет последний элемент в массиве и возвращает удалённый элемент.

var arr = [1, 2, 3, 4];
console.log(arr.pop());  // 4
console.log(arr); // [1, 2, 3]. Массив изменился

push

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

var arr = ['js', 'php'];
console.log(arr.push('html', 'css')); // 4
console.log(arr); // ['js', 'php', 'html', 'css']

или

var arr = ['html', 'css'];
console.log(arr.push('js', 'php', 'ActionScript')); // 5
console.log(arr); // [ 'html', 'css', 'js', 'php', 'ActionScript']

shift

Удаляет нулевой элемент массива и возвращает удалённый элемент.

var arr = ['apple', 'pear', 'orange'];
console.log(arr.shift()); //  'apple'
console.log(arr); // ['pear', 'orange']

unshift

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

var arr = ['red', 'blue'];
console.log(arr.unshift('black', 'orange'));  // 4
console.log(arr); // ['black', 'orange', 'red', 'blue'];

или

var arr = ['green'];
console.log(arr.unshift('black'));  // 2
console.log(arr); // ['black', 'green'];

reverse

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

var arr = ['до', 'ре', 'ми', 'фа', 'соль', 'ля', 'си'];
console.log(arr.reverse()); // ['си', 'ля', 'соль', 'фа', 'ми', 'ре', 'до']
console.log(arr); // ['си', 'ля', 'соль', 'фа', 'ми', 'ре', 'до']. Массив изменился

join

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

var arr = ['Sid', 'Nansy'];
console.log(arr.join('&')); // Sid&Nansy

Аргумент у этого метода можно опускать. В этом случае элементы массива будут соединены запятыми.

var arr = [1, 2];
 console.log(arr.join()); // 1,2

slice

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

var arr  = ['a', 'b', 'e', 'f', 'g'];
console.log( arr.slice(1, 3)); // ['b', 'e']
console.log(arr); // ['a', 'b', 'e', 'f', 'g']. Исходный массив не изменился

Второй параметр в методе slice можно опускать. В этом случае выборка элементов в новый массив продолжится до последнего элемента исходного массива.

var arr  = ['a', 'b', 'e', 'f', 'g'];
console.log( arr.slice(2)); // ['e', 'f', 'g']

splice

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

var arr = ['ie', 'opera', 'chrome', 'ff'];
var deleted = arr.splice(1, 3);
console.log(deleted); // ['opera', 'chrome', 'ff']
console.log(arr); // ['ie']

Для удаления элемента из массива по индексу следует передать методу splice в качестве первого параметра индекс удаляемого элемента, а в качестве второго единицу.

var arr = ['opera', 'chrome', 'ie', 'ff'];
var ie = arr.splice(2, 1);
console.log(ie); // ['ie'];
console.log(arr);  // ['opera', 'chrome', 'ff'];

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

var arr = ['opera', 'ff'];
console.log(arr.splice(1, 0, 'chrome', 'ie', 'netscape')); // []
console.log(arr); // ['opera', 'chrome', 'ie', 'netscape', 'ff']

Можно также совместить удаление и вставку элементов.

var arr = ['opera', 'ff', 'netscape', 'ie'];
console.log(arr.splice(2, 1, 'chrome')); // ['netscape']
console.log(arr); // ['opera', 'ff', 'chrome', 'ie'];

concat

Склеивает массивы

var arr1 = [1, 2, 3],
  arr2 = [4, 5, 6];
 
var arr = arr1.concat(arr2);
console.log(arr); // [1, 2, 3, 4, 5, 6];
console.log(arr1); // [1, 2, 3]. Метод не меняет исходный массив

Можно использовать метод concat для склейки произвольного массивов.

var arr1 = [1, 2, 3],
  arr2 = [4, 5],
  arr3 = [6, 7];
 
var arr = arr1.concat(arr2, arr3);
console.log(arr); // [1, 2, 3, 4, 5, 6 ,7]

Так же метод может принимать в качестве аргументов и не массивы. В этом случае они просто добавятся в массив.

var arr1 = [1, 2],
  arr2 = [3, 4];
 
var arr = arr1.concat(arr2, 5, 6);
console.log(arr); // [1, 2, 3, 4, 5, 6]

sort

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

var arr = [7, 6, 5, 11, 23, 45];
arr.sort(); 
console.log(arr); // [11, 23, 45, 5, 6, 7]

Если элементы массива строки, то после сортировки они будут расположены в алфавитном порядке.

Метод sort в качестве необязательного параметра может принимать функцию. Эта функция принимает в качестве аргументов два сравниваемых по какому-то критерию элемента массива. Она должна возвращать отрицательное число, если первый аргумент меньше второго, ноль, если аргументы равны и положительное число, если второй аргумент меньше первого. Для сортировки массива чисел по возрастанию эта функция будет выглядеть вот так.

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

Или, короче, вот так:

function sortFunct(a, b) {
  return a - b;
}

Для сортировки по убыванию вот так:

function sortFunct(a, b) {
  return b - a;
}

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

filter

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

var arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.filter(function (item) { // [2, 4, 6, 8]
  return item % 2 == 0;
}));

forEach

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

var arr = ['one', 'two', 'three', 'four', 'five'];
arr.forEach(function (item) {
  console.log(item);
});

every

Возвращает true, если все элементы массива удовлетворяют некоторому условию и false в противном случае. Проверим, являются ли все элементы массива чётными.

var arr = [1, 2, 4, 5, 6, 8];
arr.every(function (item) { // false
  return item % 2 == 0;
});
 
arr  = [2, 4, 6, 8];
arr.every(function (item) { // true
  return item % 2 == 0;
});

some

Возвращает true, если хотя бы один элемент массива удовлетворяет некоторому условию и false в противном случае. Проверим, есть ли в массиве нули.

var arr = [1, 2, 3];
 
arr.some(function (item) { // false
  return item == 0;
});
 
arr = [0, 1, 2, 3];
 
arr.some(function (item) { // true
  return item == 0;
});

map

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

var arr = [1, 2, 6, 8, 2, 9];
 
arr = arr.map(function (item) {
  return ++item;
});
 
console.log(arr); // [2, 3, 7, 9, 3, 10]

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

var arr = [1, 2, 3, 4, 5, 6, 7, 8];
 
arr = arr
  .filter(function (item) { // отобрали чётные числа
    return item % 2 == 0;
  })
  .map(function (item) { // делим их на два
    return item / 2; 
  });
 
console.log(arr); // [1, 2, 3, 4]

На этом про работу с массивами пока всё. Как всегда желаю вам успехов.