Первое, что я помню при изучении javascript, - это то, что я слишком часто получал какую-то отдачу, которой не хотел. Часто это было «не определено». Это было причиной, по которой в прошлом я избегал использования методов массива и выбирал метод migrain, вызывающий вложенные циклы.

Недавно я прочитал статью среднего размера, в которой предполагалось, что нам редко нужно использовать циклы for при работе с массивами. В моей голове крутились воспоминания. «Undefined» в console.log. Ужасно.
Как может кто-то просто добровольно подвергнуть себя садомашизму методом массивов?

Что-то в меньшей, более разумной области моего мозга щелкнуло. Эти люди вовсе не ошибались. Я плохо разбирался в методах Array в javascript, и это заставляло меня избегать их использования, когда я мог в прошлом.

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

Методы мутации массива

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

Давайте посмотрим на несколько примеров.

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

Как мы можем добавить элемент в массив и в то же время вернуть новый преобразованный массив?

В этом случае мы можем использовать метод .concat ()

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

Давайте посмотрим на функцию .reverse ().

Глядя на два вышеизложенных, вы понимаете, что .pop () возвращает нечто иное, чем мы могли ожидать? (Элемент, который выскочил бы из конца массива). Как же тогда это метод массива мутации, когда он возвращает что-то совершенно новое?

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

.pop () возвращает новое значение, которое является последним элементом в массиве, но в то же время изменяет исходный массив.

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

Методы преобразования массива

Одна школа мысли, которую я много читал, заключается в том, чтобы как можно больше избегать мутации данных с помощью методов массива (когда вы можете, это не строгое правило «сделай или умри»).

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

Эти методы имеют вид .map, .filter, .reduce .concat и т. Д. Вы можете найти их список в документации Mozilla MDN о методах массивов. Они назвали их мутаторами, аксессорами и итераторами, но я думаю, что мои имена для них намного круче.

Представьте, что у нас есть массив футбольной команды (manUTD). Допустим, я хочу сказать своей новой функции, которую я создал, что я хочу удалить игроков, которые не играли в каждом матче, и вернуть только тех, кто играл.

Если мы изменим наш исходный входной массив команды, довольно скоро у нас почти не будет футбольной команды. Сколько мутаций может перенести manUTD? Что, если для правильной и точной работы другой функции требуется, чтобы manUTD был в целости и сохранности?

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

Вот наша уменьшенная для читабельности футбольная команда

Вот наш список травмированных игроков:

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

Теперь посмотрим на результат

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

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

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

Одним из полезных ресурсов, если вы им еще не пользуетесь, является MDN Web Docs!

Я надеюсь, что эта статья смогла немного прояснить причины, по которым различные методы работы с массивами не работают так, как можно было бы ожидать! Лучший способ научиться - это делать, поэтому экспериментируйте! Спасибо за прочтение!