Методы массивов в JavaScript: модификаторы

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

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

Читайте также:

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

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

Примечание: Методы массивов пишутся как Array.prototype.method(), где Array.prototype относится к объекту Array. Но для простоты в руководстве массивы пишутся как method().

Метод isArray()

Для начала нужно ознакомиться с методом isArray(). Он позволяет понять, является ли объект массивом. Этот булевый (логический) метод возвращает true. Если значение переменной равно массиву. В противном случае он возвращает false.

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Test if fish variable is an array
Array.isArray(fish);
true

В отличие от оператора typeof, который в случае с массивами возвращает просто object, метод isArray() видит разницу между объектом Array и другими объектами (object).

Обратите внимание: isArray () записывается иначе, чем большинство методов массива, переменная массива указывается как аргумент метода.

Метод pop()

Первый модификатор, с которым нужно уметь работать, — метод pop(). Он удаляет последний элемент в массиве.

Рассмотрим массив fish:

let fish = [ “piranha”, “barracuda”, “koi”, “eel” ];

Теперь инициализируйте метод pop(), чтобы удалить из массива последний элемент (в данном случае это eel).

// Use pop method to remove an item from the end of an array
fish.pop();

Вызовите массив, чтобы убедиться, что последний элемент удален:

fish;
[ 'piranha', 'barracuda', 'koi' ]

Метод pop() не принимает дополнительных параметров.

Метод shift()

Метод shift() – еще один важный модификатор, который удаляет первый элемент из массива.

let fish = [ "piranha", "barracuda", "koi", "eel" ];

Используйте метод shift(), чтобы удалить из массива первый элемент (в данном случае это piranha). Метод удалит элемент с индексом 0 и изменит индексацию остальных элементов массива.

// Use shift method to remove an item from the beginning of an array
fish.shift();
fish;
[ 'barracuda', 'koi', 'eel' ]

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

Метод push()

Модификатор push() добавляет новый элемент в конец массива:

let fish = [ "piranha", "barracuda", "koi", "eel" ];

Чтобы добавить элемент, запишите его как параметр функции:

// Use push method to add an item to the end of an array
fish.push("swordfish");
fish;
[ 'piranha', 'barracuda', 'koi', 'eel', 'swordfish' ]

Этот метод позволяет также добавлять несколько элементов одновременно. К примеру:

fish.push("swordfish", "dragonfish")

добавит в массив сразу два новых элемента.

Метод unshift()

Модификатор unshift() добавляет новый элемент в начало массива.

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Use unshift method to add an item to the beginning of an array
fish.unshift("shark");
fish;
[ 'shark', 'piranha', 'barracuda', 'koi', 'eel' ]

В начале массива появляется новый элемент, а остальные элементы меняют свой индекс. Этот метод, как и shift(), может добавить в массив несколько элементов одновременно. Для этого их нужно разделить запятыми.

Методы pop() и push() изменяют конечные элементы массива, а shift() и unshift() влияют на его начальные элементы и, соответственно, на индексацию элементов в массиве.

Метод splice()

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

Метод splice() принимает три параметра –индекс, с которого нужно начать; индекс элемента, который нужно удалить; и элементы, которые нужно добавить (опционально).

splice(index number, number of items to remove, items to add)

Метод splice(0, 0, «new») добавит строку «new» в начало массива и не удалит ни одного элемента.

Добавление элементов с помощью splice()

Если в качестве второго параметра (индекс элементов, которые нужно удалить) указать 0, метод splice() удалит 0 элементов. Таким образом, он только добавит новый элемент с указанным индексом, при этом ничего не удалив. Это делает его более гибким и удобным, чем методы push() и unshift(), которые добавляют элементы только в конец или начало массива.

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Splice a new item number into index position 1
fish.splice(1, 0, "manta ray");
fish;
[ 'piranha', 'manta ray', 'barracuda', 'koi', 'eel' ]

Метод добавил в массив элемент «manta ray» с указанным индексом 1.

Удаление элементов с помощью splice()

Чтобы удалить элементы из любой точки массива, нужно пропустить третий параметр (элементы, которые нужно добавить).

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Remove two items, starting at index position 1
fish.splice(1, 2);
fish;
[ 'piranha', 'eel' ]

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

Добавление и удаление элементов с помощью splice()

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

Попробуйте выполнить следующий пример.

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Remove two items and add one
fish.splice(1, 2, "manta ray");
fish;
[ 'piranha', 'manta ray', 'eel' ]

Метод splice() легко изменит любой элемент массива.

Важно! Не путайте splice() с методом доступа slice(), который скопирует выбранный раздел массива.

Метод reverse()

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

let fish = [ "piranha", "barracuda", "koi", "eel" ];

С помощью метода reverse() последний элемент станет первым и наоборот.

// Reverse the fish array
fish.reverse();
fish;
[ 'eel', 'koi', 'barracuda', 'piranha' ]

Метод reverse() не принимает параметров.

Метод fill()

Метод fill() заменяет все элементы в массиве статическим значением.

let fish = [ "piranha", "barracuda", "koi", "eel" ];

В массиве fish четыре элемента. Теперь примените fill().

// Replace all values in the array with "shark"
fish.fill("shark");
fish;
[ 'shark', 'shark', 'shark', 'shark' ]

Все элементы массива заменены статическим значением «shark». Метод fill() опционально принимает в качестве аргументов начальную и конечную точку.

fish.fill("shark", 1) // > [ 'piranha', 'shark', 'shark', 'shark' ]
fish.fill("shark", 1, 3); // > [ 'piranha', 'shark', 'shark', 'eel' ]

Метод sort()

Метод sort () сортирует элементы в массиве на основе первого символа в элементе. Если первый символ совпадает, он будет сравнивать второй символ и так далее.

По умолчанию sort() упорядочивает массив в алфавитном порядке. Все строки массива должны быль в верхнем либо в нижнем регистре.

let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Sort items in array
fish.sort();
fish;
[ 'barracuda', 'eel', 'koi', 'piranha' ]

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

Измените исходный массив так, чтобы одна из строк начиналась с прописной буквы.

let fish = [ "piranha", "barracuda", "Koi", "eel" ];
fish.sort();
fish;
[ 'Koi', 'barracuda', 'eel', 'piranha' ]

Числа всегда идут перед элементами верхнего регистра.

let fish = [ "piranha", "barracuda", "Koi", "1 eel" ];
fish.sort();
[ '1 eel', 'Koi', 'barracuda', 'piranha' ]

Метод sort() не будет сортировать массивы чисел по величине. Он упорядочит его по первой цифре в числе:

let numbers = [ 42, 23, 16, 15, 4, 8 ];
numbers.sort();
[ 15, 16, 23, 4, 42, 8 ]

Чтобы правильно сортировать такой массив, нужно создать функцию для сравнения:

// Function to sort numbers by size
const sortNumerically = (a, b) => {
return a - b;
}
numbers.sort(sortNumerically);
[ 4, 8, 15, 16, 23, 42 ]

Функция sortNumerically позволяет сортировать массив правильно.

Заключение

Теперь вы умеете переопределять исходный массив с помощью модификаторов.

Читайте также:

Tags: