Когда я впервые начал свое путешествие по программированию, я обнаружил, что запутался в различиях в распространенных методах работы с массивами. Более глубокое изучение того, что именно делает каждый метод, помогло мне лучше понять, что происходит «под капотом», что, в свою очередь, дало мне лучшее представление о том, когда использовать каждый метод в моем коде.
Прежде чем мы углубимся, нам нужно поговорить о фундаментальной концепции JavaScript в отношении того, как и когда мы применяем эти функции к массивам. Большинство этих методов мы называем «деструктивными», что означает, что когда мы вызываем эти методы для массива, он навсегда изменяет массив. Из-за этого рекомендуется сначала скопировать массив и изменить этот массив, а не изменять оригинал. Сохранение исходного массива нетронутым является хорошей практикой для большинства сценариев; особенно когда ваш код длиннее и сложнее, чем в приведенных ниже примерах.
Чтобы скопировать массив, мы можем использовать удобный инструмент под названием «оператор спреда». Обозначенный тремя точками (…), это создаст дубликат нашего массива, который мы затем сможем изменить, не беспокоясь о мутации исходного массива. Мы достигаем этого, помещая наш оператор расширения в скобки с именем массива, который мы хотим скопировать, а затем присваивая это значение переменной.
Давайте попрактикуемся с набором всех цветов радуги.
Осторожно! Не присваивайте просто значение colors2 colors.
const colors2= colors; //NO. Bad.
То, как работает движок JavaScript, по существу указывает обеим переменным на одно и то же значение. Итак, все, что я изменил бы в массиве colors2, также повлияет на массив colors. Опять же, рекомендуется сначала сделать копию массива. Хотя этот метод выглядит так, как будто он достигает нашей цели, возвращая копию массива colors, на самом деле он возвращает точно такой же массив colors, что делает его уязвимым. к любым изменениям, которые мы хотим сделать.
Большой! Теперь, когда мы знаем, как правильно сделать дубликат массива, мы можем безопасно применить к нему любой из методов массива. По мере того, как мы углубляемся в особенности этих методов и в то, как их различать, давайте зададим себе 3 вопроса о каждом методе…
- Для чего вы используете этот метод?
- Какие аргументы (если есть) принимает метод?
- Что возвращается при вызове функции?
Добавление элементов в массивы
.push()
- Этот метод добавляет элемент в конец массива.
- Этот метод принимает 1 аргумент (элемент, который будет добавлен в конец)
- При вызове этот метод возвращает длину измененного массива
Чтобы применить это на практике, давайте продолжим работу с нашим массивом цветов.
Однако давайте подумаем вот о чем… Если бы я взял код из строки 4, где я вызываю наш метод .push(), и сохранил его в переменной, каким было бы значение этой переменной? Давай выясним!
Мы надеемся, что mysteryVariable не слишком загадочна, поскольку мы знаем, что каждый раз, когда мы вызываем метод .push(), мы возвращаем длину модифицированного массив. colors2 изначально состоял из 7 элементов. Затем мы .push() добавили в него новый элемент('purple'), который вернул длину измененного массива (8), а затем сохранили его в переменной с именем mysteryVariable. .
Также важно отметить, что, поскольку мы использовали наш оператор распространения в исходном массиве colors и .push() - передали наш новый элемент в colors2 массив, мы видим, что исходный массив не изменился.
.unshift()
- Этот метод добавляет элемент в начало массива.
- Этот метод принимает 1 аргумент (элемент, который будет добавлен в начало)
- При вызове этот метод возвращает длину измененного массива
Давайте продолжим использовать наш набор цветов, чтобы попрактиковаться.
Как и в случае с методом .push(), если я возьму код, в котором я вызываю .unshift(), и сохраню его в переменной, значением переменной будет число. который показывает длину измененного массива.
Опять же, мы можем проверить, не поврежден ли наш исходный массив colors.
Удаление элементов из массивов
.pop()
- Этот метод удаляет один элемент с конца массива.
- Этот метод не принимает не аргументов
- При вызове этот метод возвращает элемент, который был удален
Чтобы сохранить актуальность, давайте попрактикуемся в этих методах удаления с новым массивом.
Обратите внимание, что я не использовал здесь оператор распространения, чтобы сделать копию. Здесь я намеренно удалил «Плутон» из своего массива, так как, по-видимому, это больше не планета. РИ Плутон.
Также обратите внимание, что когда я вызывал метод .pop() и сохранял его в переменной, значением этой переменной был элемент, который был удален из конца массива. В данном случае это строка слова «Плутон».
.shift()
- Этот метод удаляет один элемент с начала массива.
- Этот метод не принимает не аргументов
- При вызове этот метод возвращает элемент, который был удален
В этом примере я хочу сохранить массив планет без изменений, поскольку теперь он точно отражает количество распознаваемых нами планет. Однако предположим, что я хочу назначить «Меркурий» в качестве новой переменной так же, как я сделал это для «Плутона». Я могу сделать это, не затрагивая исходный массив планет.
Давайте разберем, что здесь происходит…
Во-первых, я сделал копию своего массива planets, используя оператор распространения, чтобы избежать изменения исходного массива planets.
Затем я вызвал метод .shift() для моего массива planetsCopy, который удаляет первый элемент массива.
Наконец, я сохранил его в переменной firstPlanet, чтобы зафиксировать возвращаемое значение моего метода .shift(). В этом случае возвращаемое значение представляет собой строку слова «Меркурий».
НО ЖДАТЬ! Это еще не все!
Часть этого кода является избыточной, и мы можем ее немного почистить. Технически мне не нужно сохранять значение массива planetsCopy, если моя единственная цель — извлечь этот первый элемент. Если это ваша основная цель здесь это можно объединить в одну строку, как показано ниже.
Мы по-прежнему хотим использовать здесь оператор распространения, иначе наш массив planets будет изменен навсегда. Помните, что общий процесс .shift() заключается в изменении массива и возврате удаленного элемента.
.slice() и .splice()
Эти два метода немного более уникальны и поэтому требуют отдельных разделов. Вы по-прежнему хотите задать себе те же 3 вопроса («Для чего вы это используете?», «Какие аргументы передаются?» и «Что возвращается?»), но эти два метода не так просты, поскольку количество передаваемых аргументов изменяет функциональность метода.
.slice()
- Этот метод принимает 0, 1 или 2 аргумента
- При вызове этот метод возвращает часть (или «срез») массива
- Этот метод является неразрушающим. Это означает, что он не удаляет элементы из вызываемого массива навсегда.
.slice() с 1 или 2 переданными аргументами
- Первый аргумент (если применимо) — это число, указывающее на индекс в массиве, по существу говорящее «начать с этого индекса и вернуться до конца массива».
- Второй аргумент (если применимо) — это число, указывающее на индекс в массиве, по существу говорящий «Не включайте этот. Остановитесь, пока не доберетесь сюда».
Давайте подробнее рассмотрим это с помощью нашего массива планет.
Если мы не сохранили это в переменную, возвращаемый массив по существу исчезает немедленно. Итак, давайте изменим это, чтобы у нас был доступ к нему позже!
Опять же, исходный массив планет остается неизменным, поскольку .slice() является неразрушающим методом.
.slice() без переданных аргументов
-когда .slice() вызывается без переданных аргументов, мы, по сути, говорим движку JavaScript начинать с начала и идти до конца. Из-за этого в результате возвращается копия массива, содержащая все элементы исходного массива.
По сути, это действует так же, как наш любимый оператор спреда […]
.splice()
- Этот метод принимает 1, 2 или 3 аргумента
- В зависимости от того, сколько аргументов передано, этот метод деструктивно удаляет, добавляет или заменяет элементы в массиве.
.splice() с 1 аргументом
- Первый аргумент — это число, указывающее на индекс в массиве, который, по сути, говорит: «Начните здесь и удалите оставшиеся элементы».
- При вызове он возвращает новый массив того, что было удалено.
- Помните, что это также мутирует исходный массив
Давайте воспользуемся нашим ранее полученным массивом цветов для демонстрации.
Обратите внимание, что мой .splice() не только вернул массив того, что было «отрезано», но и изменил исходный массив. Итак, когда я вызвал массив colors после нашего вызова .splice(), он теперь содержит только первые три элемента.
.splice() с двумя аргументами
- Первый аргумент действует так же, как и в предыдущем примере, тогда как это число, указывающее на индекс в массиве, который сообщает JavaScript «Начать здесь».
- Второй аргумент — это число, означающее «удалить столько элементов». (Это не число, указывающее на индекс)
- При вызове он действует так же, как и выше, где он возвращает новый массив того, что было удалено, а также изменяет исходный массив.
Давайте снова используем наш цветовой массив для демонстрации.
Я никогда не понимал, насколько важно отличать индиго от синего и фиолетового. Итак, давайте удалим этот цвет из нашего массива.
Важно отметить, что при использовании .splice() возвращается массив; не элемент, который был удален. В нашем примере .pop() ранее он возвращал удаленный элемент (строку), здесь он возвращает массив с элементами .splice() -ed внутри это. Так уж получилось, что в этом примере мы .splice() -ing всего одна строка, но эта строка является элементом внутри нового массива, который был сохранен в переменной индиго.
.splice() с 3+ аргументами
- Первый и второй аргумент действуют так же, как в примерах выше, но третий аргумент будет добавлен в массив по индексу первого аргумента.
Важно. Поскольку второй аргумент сообщает JavaScript, «сколько элементов нужно удалить», если второй аргумент равен 0, будет возвращен пустой массив. Это связано с тем, как .splice() возвращает значение при вызове. Он вернет нам только то, что было «обрублено», и если ничего не было «обрублено», нам возвращается массив, внутри которого ничего нет.
Я чувствую себя плохо из-за того, что я сказал об Индиго. Итак, давайте добавим это обратно в наш массив цветов.
Нам нужно будет передать 3 аргумента, чтобы это произошло; (Начните с этого индекса, удалите столько-то вещей и добавьте «эту вещь» к индексу, указанному в первом аргументе).
Это может быть сложно. Итак, давайте сделаем еще один пример.
Если вы еще этого не поняли, я допустил ошибку в нашем массиве планет.
Я случайно дважды назвал «Сатурн» в массиве и пропустил «Уран».
Давайте воспользуемся нашим методом .splice(), чтобы удалить лишний элемент «Сатурн» и вставить новый элемент «Уран».
Поскольку я буду удалять элемент, а также добавлять элемент, мне нужно будет передать 3 аргумента; начальный индекс (в данном случае 6), число, сообщающее .splice(), сколько элементов я хочу удалить (в данном случае 1), а затем элемент, который я хочу добавить в индекс мы указали в первом аргументе.
Я надеюсь, что это помогло пролить свет на то, как правильно использовать эти распространенные методы работы с массивами. Удачного кодирования!
-Андрей
