Методы массивов в 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: Javascript