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

«В последнем эпизоде ​​этой серии я познакомил вас с различиями между фундаментальными методами работы с массивами (например, pop() или push()), которые получают простые типы данных. в качестве аргументов. Я также объяснил более сложные "функции высшего порядка", которые получают функцию в качестве аргумента. Затем эта функция получает аргументы как конкретные значения массива, к которому они привязаны. Вы уже немного узнали об обоих типах, но есть гораздо больше методов массивов, которые нужно открыть, и множество других изящных трюков, которые вы также можете делать с массивами. Итак, давайте погрузимся прямо в!

Одного достаточно

Метод JS find() настолько прост, насколько это звучит, и используется, чтобы помочь вам найти определенный элемент массива. Но поскольку вы можете легко спутать его с методом some(), есть некоторые вещи, с которыми следует быть осторожным: find() доставляет первый элемент в соответствии с индексами в массиве, который соответствует правилу, указанному в функция обратного вызова, тогда как some() возвращает только true или false, чтобы указать, было ли найдено совпадающее значение.

Синтаксис выглядит следующим образом:

someArray.find((item, index, array) => {
  // insert testing function here
})

Этот метод действительно полезен для проверки наличия хотя бы одного элемента, удовлетворяющего правилу, указанному в функции обратного вызова. Например, один объект, который вы ищете, имеет свойство name со значением Katrin. Итак, чтобы получить именно этот объект, find() перебирает все объекты внутри массива, но останавливается, когда находит первый объект, соответствующий критериям, заданным в функции обратного вызова, и возвращает этот элемент. Если он не находит подходящий элемент, он возвращает значение undefined.

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

Вы также можете использовать метод includes(), который обычно используется только с одним аргументом, который следует искать в массиве. Он возвращает либо true, либо false в качестве значения, в зависимости от того, находит ли он его внутри массива или нет. Он также проверяет строгое равенство («===»), как и метод indexOf().

Этот метод требователен

Метод filter() служит полной противоположностью find(), потому что вместо возврата первого совпадения этот метод находит и возвращает новый массив. Таким образом, исходный массив остается нетронутым, но новый массив исключает все элементы, которые не соответствуют правилу, указанному в обратном вызове. Это полезно, если вы хотите получить продукты одной категории, тогда вы можете отфильтровать все продукты, которые хранятся в массиве, и, например, получить только товары из раздела «Детям»:

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

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

Что ВЫ ожидаете увидеть в console.log? Я всегда предполагал, что метод filter будет отфильтровывать все элементы, соответствующие условию, потому что это будут термины, в соответствии с которыми мы хотели бы отфильтровать. Наоборот, он отфильтровывает все, КРОМЕ того, что указано в качестве правила внутри обратного вызова. Таким образом, с помощью приведенного выше кода мы не избавились бы от элемента, на который нажали, мы бы сохранили его как один элемент из всех элементов массива, что наверняка могло бы свести пользователя с ума. Но один оператор взрыва исправляет эту ошибку:

Приведение в порядок

Метод sort() в JavaScript используется для сортировки элементов массива на месте, что означает, что он изменяет исходный массив. Метод сортировки не так просто объяснить, потому что вы не всегда получаете ожидаемый результат. Это связано с тем, что без какой-либо функции сравнения, установленной в качестве параметра, этот метод сортирует элементы массива по возрастанию после преобразования каждого значения в строки. Но с числами все по-другому, потому что sort() сравнивает каждую цифру и рассматривает ее как кодовую единицу UTF-16. Таким образом, по умолчанию «8000» стоит перед «90».

Но вы можете указать свою собственную функцию, похожую на алгоритм, которая будет сравнивать следующие два элемента в каждом цикле. Помните: функция обратного вызова внутри этого метода массива всегда представляет собой сравнение между двумя следующими элементами (a и b в этом примере) массива и определяет сгенерированный вывод, который вы хотите увидеть. Итак, вы должны использовать операторы if-else следующим образом:

Или, поскольку мы здесь работаем с числами, вы можете выбрать вычитание одного из другого, и если результат отрицательный, вы знаете, что «а» должно стоять перед «б» в порядке возрастания, потому что теперь вместо строк вы преобразовал элементы массива в числа, которые затем можно расположить в порядке возрастания, включая отрицательные и положительные числа:

Если вы выбрали порядок убывания, вы должны вычесть a из b. Если a и b равны, результат будет равен нулю, что указывает на то, что их порядок в отсортированном массиве не имеет значения, будь то по возрастанию или по убыванию.

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

Хочешь кусок?

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

Вот основной синтаксис метода slice():

Array.prototype.slice(start, end)

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

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

Универсал

Другой метод массива, опять же не являющийся функцией высшего порядка, но все же очень полезный, — это splice(). Splice очень универсален: он может внедрять элементы, удалять их или даже делать и то, и другое одновременно. Вот почему некоторые называют это швейцарским армейским ножом массивных методов.

Как и этот полезный инструмент, метод splice может делать много вещей, поэтому важно количество заданных параметров. Ниже приведен пример того, как вырезать элемент исходного массива, который, кстати, после этого будет необратимо мутирован:

Он также может вырезать более одного элемента, который вы указываете вторым аргументом.

Когда вы хотите что-то вставить в существующий массив, вы должны указать это в третьем параметре:

Как уже было сказано, splice() также может выполнять оба вышеуказанных действия одновременно. Все, что вам нужно сделать, это: вместо того, чтобы указывать «0» во второй позиции параметров метода, выберите количество элементов в строке, которые должны быть удалены. В качестве третьего параметра вы заполняете эту пустоту новыми элементами массива. И вот вам полностью измененный набор данных!

Когда вы сохраняете возвращаемое значение метода в другой переменной и регистрируете это значение, оно возвращает вам удаленный элемент массива:

Не путайте splice() с slice()! Последний намного проще и имеет начальную и конечную точки только как два (необязательных) параметра. И самое главное, он создает новый массив, тогда как splice() изменяет исходный массив.

Краткое содержание

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

  • Будет ли это снова массив, но не тот же, поэтому мне, вероятно, придется сохранить результат в другой переменной?
  • Вернет ли метод логическое значение?
  • Сколько параметров метод позволит мне предоставить (и полезны ли они вообще для моей задачи)?

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

В качестве примечания: если вы изучаете другие фреймворки для JavaScript, такие как React, рекомендуется не изменять то, что в React называется «состоянием». Особенно, когда он хранит объекты и массивы. Вместо этого вы должны создать из него новую переменную или сделать копию состояния, чтобы повторно использовать и изменить его, а затем принудительно обновить пользовательский интерфейс. В противном случае React не заметит, что состояние изменилось. Вот почему все методы массивов, создающие новые массивы, лучше подходят для мира React, чем те, которые изменяют массив на месте.

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