Вступление
Arrays в JavaScript состоит из списка элементов. В JavaScript есть много полезных встроенных методов для работы с массивами. Методы, которые изменяют исходный массив, называются методами * mutator , а методы, которые возвращают новое значение или представление, называются https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-. in-javascript-методы доступа [ методы доступа *]. В этом уроке мы сосредоточимся на методах мутатора.
Чтобы получить максимальную отдачу от этого учебного пособия, вы должны быть знакомы с созданием, индексацией, изменением и циклическим просмотром массивов, которые вы можете просмотреть в учебном руководстве https://www.digitalocean.com/community/tutorials/understanding -rarays-in-javascript [Понимание массивов в JavaScript].
Массивы похожи на strings в том, что они оба состоят из последовательности элементов, которые можно получить по номеру индекса. Однако важно помнить, что строки являются неизменяемым типом данных, то есть они не могут быть изменены. Массивы, с другой стороны, являются изменяемыми, что означает, что многие методы массива будут влиять на исходный массив, а не на копию массива.
В этом руководстве будут добавлены и удалены элементы, реверсированы, заменены и иным образом изменены элементы в массиве.
IsArray ()
Прежде чем мы перейдем к методам мутатора, давайте посмотрим на метод + isArray () +, чтобы проверить, являются ли объекты массивами. Это метод Boolean, который возвращает + true +, если значение переменной равно массиву. Если объект не является массивом, этот метод возвращает + false.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Test if fish variable is an array
Array.isArray(fish);OutputtrueМетод + isArray () + полезен, потому что оператор + typeof +, который мы обычно используем для тестирования, возвращает + object + при использовании с массивами, и иногда зная различие между объектом и объектом + Array + необходимо.
Обратите внимание, что + isArray () + написано не так, как большинство методов массива, а переменная массива предоставляется в качестве аргумента метода.
Теперь, когда мы знаем, как проверить, является ли объект массивом, давайте перейдем к методам мутатора.
поп ()
Первый метод мутатора, который мы рассмотрим, это метод + 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;Output[ 'piranha', 'barracuda', 'koi' ]Мы успешно удалили " eel " из массива + fish +. Метод + pop () + не принимает дополнительных параметров.
сдвиг()
Другой метод мутатора, метод + 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;Output[ 'barracuda', 'koi', 'eel' ]В этом примере " piranha " была удалена, и каждый элемент сместился вниз на один порядковый номер. По этой причине обычно предпочтительнее использовать метод + pop () + всякий раз, когда это возможно, так как другие элементы массива сохранят свои позиции в индексе.
От себя()
Метод мутатора + push () + добавляет новый элемент или элементы в конец массива.
let fish = [ "piranha", "barracuda", "koi", "eel" ];Чтобы добавить элемент в конец, мы записываем новый элемент в качестве параметра функции.
// Use push method to add an item to the end of an array
fish.push("swordfish");
fish;Output[ 'piranha', 'barracuda', 'koi', 'eel', 'swordfish' ]Также возможно добавить несколько новых значений в массив. Например, + fish.push (" меч-рыба "," рыба-дракон ") + добавил бы элементы в индексы + 4 + и + 5 +.
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;Output[ 'shark', 'piranha', 'barracuda', 'koi', 'eel' ]В приведенном выше примере " shark " был добавлен в индексную позицию + 0 +, смещая все остальные элементы массива на один. Как и с + shift () +, вы можете добавить несколько разделенных запятыми элементов в массив одновременно.
+ pop () + и + push () + влияют на конец массива, а + shift () + и + unshift () + влияют на начало массива. Простой способ запомнить это - помнить, что + shift () + и + unshift () + изменят все порядковые номера возвращаемого массива
сращивать ()
Метод + splice () + может добавить или удалить элемент из любой позиции массива. Метод мутатора + splice () + может либо добавлять, либо удалять, либо добавлять и удалять одновременно.
+ splice () + принимает три параметра - порядковый номер, с которого нужно начать, количество удаляемых элементов и добавляемых элементов (необязательно).
splice(index number, number of items to remove, items to add)+ splice (0, 0," new ") + добавит строку " new " в начало массива и ничего не удалит.
Давайте рассмотрим несколько примеров ниже, как + splice () + может добавлять и удалять элементы в массиве.
Добавление с помощью + splice () +
Если мы установим наш второй параметр (элементы для удаления) как + 0 +, + splice () + удалит ноль элементов. Таким образом, мы можем выбрать добавление только элемента, начинающегося с любого номера индекса, что делает + splice () + более мощным, чем + push () + или + unshift () +, которые только добавляют элементы в конец или начало массива.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Splice a new item number into index position 1
fish.splice(1, 0, "manta ray");
fish;Output[ '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;Output[ 'piranha', 'eel' ]Мы удалили два элемента из массива, начиная с индекса + 1 +, " барракуда ". Если второй аргумент удален, все элементы в конце массива будут удалены.
Добавление и удаление с помощью + splice () +
Используя все параметры одновременно, мы можем добавлять и удалять элементы из массива одновременно.
Чтобы продемонстрировать это, давайте удалим те же элементы, что мы сделали выше, и добавим новый на их позиции.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Remove two items and add one
fish.splice(1, 2, "manta ray");
fish;Output[ 'piranha', 'manta ray', 'eel' ]+ splice () + - мощный метод для изменения любой части массива. Обратите внимание, что + splice () + не следует путать с + slice () + массивом аксессоров, который создаст копию части массива.
задний ход()
Метод + reverse () + меняет порядок элементов в массиве.
let fish = [ "piranha", "barracuda", "koi", "eel" ];Используя + reverse () +, последний элемент будет первым, а первый элемент будет последним.
// Reverse the fish array
fish.reverse();
fish;Output[ 'eel', 'koi', 'barracuda', 'piranha' ]Метод массива + reverse () + не имеет параметров.
заполнить ()
Метод + fill () + заменяет все элементы в массиве статическим значением.
let fish = [ "piranha", "barracuda", "koi", "eel" ];В массиве + fish + у нас есть четыре элемента. Давайте применим + fill () +.
// Replace all values in the array with "shark"
fish.fill("shark");
fish;Output[ 'shark', 'shark', 'shark', 'shark' ]Все четыре элемента в массиве были заменены одинаковыми значениями " shark ". + fill () + также принимает необязательные аргументы начальной и конечной точек.
fish.fill("shark", 1) // > [ 'piranha', 'shark', 'shark', 'shark' ]
fish.fill("shark", 1, 3); // > [ 'piranha', 'shark', 'shark', 'eel' ]Используя + fill () +, мы можем заменить один или несколько элементов в массиве статическим значением.
Сортировать()
Метод + sort () + сортирует элементы в массиве по первому символу в элементе. В случае, если первый символ идентичен, он будет продолжать вниз по линии и сравнивать второй символ и так далее.
По умолчанию + sort () + будет алфавитно размещать массив строк в верхнем или нижнем регистре.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Sort items in array
fish.sort();
fish;Output[ 'barracuda', 'eel', 'koi', 'piranha' ]Так как + sort () + основан на первом символе Юникода, он будет сортировать элементы в верхнем регистре перед строчными.
Давайте изменим наш исходный массив так, чтобы одна из наших строк начиналась с заглавной буквы.
let fish = [ "piranha", "barracuda", "Koi", "eel" ];
fish.sort();
fish;Output[ 'Koi', 'barracuda', 'eel', 'piranha' ]Числа ставятся перед прописными и строчными буквами.
Мы можем снова изменить массив, чтобы включить число в один из строковых элементов.
let fish = [ "piranha", "barracuda", "Koi", "1 eel" ];
fish.sort();Output[ '1 eel', 'Koi', 'barracuda', 'piranha' ]+ sort () + не будет сортировать массив чисел по размеру по умолчанию. Вместо этого он будет проверять только первый символ в числе.
let numbers = [ 42, 23, 16, 15, 4, 8 ];
numbers.sort();Output[ 15, 16, 23, 4, 42, 8 ]Чтобы правильно отсортировать числа, вы можете создать функцию сравнения в качестве аргумента.
// Function to sort numbers by size
const sortNumerically = (a, b) => {
return a - b;
}
numbers.sort(sortNumerically);Output[ 4, 8, 15, 16, 23, 42 ]Функция сравнения + sortNumerically + позволила нам выполнить сортировку по назначению. + sort () + применит изменения к исходному массиву.
Заключение
В этом руководстве мы рассмотрели основные методы массива мутаторов в JavaScript. Методы Mutator изменяют исходный массив, в котором они используются, в отличие от создания копии, как это делают методы доступа. Мы узнали, как добавлять и удалять элементы в начале или конце массива, а также сортировать, обращать и заменять значения элементов массива.
Чтобы ознакомиться с основами массивов, прочитайте Understanding Arrays in JavaScript. Чтобы просмотреть полный список всех методов массива, просмотрите ссылку Array в Mozilla Developer Network.