Руководство для начинающих: как адаптировать техническую документацию к своей работе

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

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

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

const array = [element, element, element]
array.forEach(element => {
    Something here
})

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

В большинстве случаев при работе с данными из API или Code Challenges, чтобы продемонстрировать свои навыки работы с данными, вы имеете дело с элементами как с объектами. Создание согласованных имен переменных, ключей и понятий, которые мы используем, может помочь нам разбить то, что мы делаем. Вот почти формула для этого:

//An example of an array of n objects with n key/value pairs
const array = [{key1: value, key2: value,... keyn: value}, ..., {}]
array.forEach(<concept>Obj => {
   //If we wanted to put the first key into a div
   <concept/key>Li.innerText = <concept>Obj.key1
})

Мы заменяем <concept>Obj на animalObj, если имеем дело с массивом объектов животных. Мы заменяем <concept/key>Li на nameLi, если у нас есть ключ с именем name или animalNameLi, или любое другое имя, которое поможет вам понять, с чем вы работаете. Эти соглашения об именах зависят от вас, но используйте возможность называть эти элементы, переменные и т. д. в своих интересах.

Давайте теперь перейдем к методу find. Если вы перейдете к документам MDN и изучите их, просто прочитайте, что там написано:

Метод find() возвращает первый элемент предоставленного массива, удовлетворяющий заданной функции проверки. Если никакие значения не удовлетворяют функции тестирования, возвращается undefined.

Затем он дает нам пример:

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12

Если мы прочитаем описание и посмотрим на пример, то увидим, что find выполняет итерацию по массиву, для каждого элемента в массиве он проверяет элемент на основе сравнения, которое вы поместили в функцию. Затем, если он найдет что-то истинное, он выдаст возвращаемое значение этого элемента. Если это не так, то возвращается значение undefined. В нем также упоминается, что он вернет первый элемент, который окажется верным. Итак, мы знаем, что всегда будем получать один элемент, а не много.

Поэтому, когда они показывают нам этот пример, мы можем «перевести» его для использования в следующем формате:

const found = array1.find(element => element > 10)
 <a variable name to signify a result> = <name of the array to iterate over>.find(<variable name of the element we are going to iterate over> => <Some comparison or function that will have to return true>)

Если у вас возникли проблемы с каким-либо итератором, прочитайте его документацию, посмотрите его примеры и начните с того, что вы знаете, а затем стройте оттуда.

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

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

Теперь смотрим на пример:

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Если бы мы надеялись, что будет возвращен 1 элемент, мы могли бы столкнуться с небольшой загвоздкой. Потому что вместо этого мы получим массив. Но это не значит, что это неправильно. Это означает, что мы должны понимать, что происходит, и использовать это в своих интересах. При использовании find мы ожидаем, что result = element или found = element тогда давайте посмотрим на возвращаемое значение result или found при использовании фильтра. О, он возвращает elements в массиве для нас на основе сравнения. Хорошо, если есть только один возможный ответ, основанный на сравнении, тогда у нас будет 1 элемент в массиве, верно?

На этот раз позвольте мне показать вам пример с использованием объектов:

const words = [{id: 1, word:'spray'}, {id: 2, word:'limit'}, {id: 3, word:'elite'}, {id: 4, word:'exuberant'}, {id: 5, 'word: destruction'}, {id: 6, word:'present'}];
const result = words.filter(wordObj => wordObj.word === "elite");
console.log(result)
//expected output: Array [{id: 3, word:"elite"}]

Это означает, что если вы сделаете result[0], вы получите возвращаемое значение "elite". Это здорово, что мы по-прежнему можем «находить» то, что ищем, у нас просто есть массив с объектом внутри, а не отдельный объект.

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