Алгоритмы Javascript №1: Подсчет гласных в строке текста

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

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

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

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

Так что сидите и наслаждайтесь поездкой. Давайте расти вместе!

# Соревнование

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

# Алгоритмическое мышление

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

Затем в функции мы должны просмотреть текст и найти вхождения английских гласных (a, e, i, o, u).

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

Ооооооооо да !!! Мы избавились от скучных вещей. Эти алгоритмы не будут писать сами, не так ли?

# Реализация кода

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

## Итерационный подход

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

Вот наша реализация:

/*
An iterative approach to counting the number of vowels in a
string of text.
*/
const vowels = ["a", "e", "i", "o", "u"]

function countVowelsIterative(text) {
// Initialize counter
let counter = 0

// Loop through text to test if each character is a vowel
for (let letter of text.toLowerCase()){
    if (vowels.includes(letter)) {
       counter++
    }
}

// Log formatted response to console
console.log(`The text contains ${counter} vowel(s)`)

// Return number of vowels
return counter
}

/*
    ============== Test Case ===================
*/
countVowelsIterative('I am a world-class developer using iterations');
// Logs "The text contains 16 vowel(s)" to the console
// returns 16

Ну, это было само собой разумеющимся, не так ли? Давайте рассмотрим некоторые ключевые моменты.

Во-первых, мы объявили постоянный «гласный», который содержит массив из пяти английских гласных.
Затем мы используем цикл for… of для перебора каждой буквы текста. Если вы не знакомы с этим, цикл for… of в основном создает цикл, перебирающий повторяемые объекты. Итерируемые объекты могут быть строками, массивами, картами, наборами и т. Д. Подробнее см. здесь.
Обратите внимание, как мы конвертируем все буквы текста в нижний регистр внутри цикла. Это потому, что мы не хотим пропускать регистры гласных в верхнем регистре в переданном тексте (поверьте мне, это было сделано не намеренно).
Затем в цикле мы используем оператор if, чтобы проверить, включена ли выбранная буква в массив гласных, который мы определили ранее. Соответственно, мы вызываем метод includes() для массива гласных, чтобы определить, включает ли массив выбранную букву, возвращая true или false в зависимости от ситуации. Узнайте больше о том, как работает includes (), здесь.
Если условие истинно, мы увеличиваем счетчик.
После цикла мы выводим на консоль отформатированное сообщение, в котором указывается количество гласных, а затем возвращаем счетчик, который эквивалентен количеству найденных гласных.

Ууууу !!! Это было хорошо. Теперь давайте рассмотрим более сложный, но краткий подход.

## Использование регулярных выражений

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

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

Без лишних слов, давайте рассмотрим решение. Если вы хотите узнать больше о регулярных выражениях в Javascript, просмотрите документацию Mozilla Developer Network здесь.

Вот наша реализация:

/*
Using Regular Expressions to count the number of vowels in a
string of text.
*/
function countVowelsRegex(text) {
// Search text with Regex and store all matching instances
let matchingInstances = text.match(/[aeiou]/gi);
// Check if matching instances exist then calculate length
    if(matchingInstances) {

    // Log formatted response to console
    console.log(`The text contains ${matchingInstances.length} vowel(s)`)
// Return number of vowels
        return matchingInstances.length
    } else{
        return 0
    }
}

/*
    ============== Test Case ===================
*/
countVowelsRegex('I am a world-class developer uisng Regex');
// Logs "The text contains 13 vowel(s)" to the console
// returns 13

Думаю, вам не понадобится обзор этого, не так ли? Хорошо! Хорошо! Давайте посмотрим на решение.

Первое, что мы сделали в рамках функции, - это вызвали метод match() для текста, который возвращает массив совпадений, найденных после сопоставления с регулярным выражением, переданным в качестве аргумента для текста. Узнайте больше о том, как работает match (), здесь.
Регулярное выражение определяет буквы, которые нужно искать, в квадратных скобках []. Для простых шаблонов регулярные выражения обычно определяются в виде пары косых черт. Обратите внимание на символы «gi» после закрывающей косой черты?
«g» обозначает глобальный поиск, который не возвращается после первого совпадения, возобновляя последующие поиски с конца предыдущего совпадения.
«i »Означает поиск без учета регистра, что делает все выражение без учета регистра (например, /xyz/i будет соответствовать XyZ).
Затем мы используем условие, чтобы проверить, были ли найдены какие-либо подходящие экземпляры. Используемый выше метод .match () возвращает массив совпадающих элементов, если совпадения были найдены, и «null», если они не были. Следовательно, в условном выражении, если «matchingInstances» дает истинное значение (то есть массив найденных совпадений), мы регистрируем отформатированное сообщение, показывающее количество гласных, которое совпадает с длиной массива. Затем мы также возвращаем номер. С другой стороны, если он оценивается как ложное значение, мы возвращаем 0, поскольку это означает, что совпадений не найдено.

# Оценка и резюме

Мы успешно реализовали алгоритм, который подсчитывает количество гласных в строке текста в Javascript.

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

Щелкните здесь, чтобы запустить эти тесты самостоятельно.

Возможно, мы могли бы сказать, что метод Regex побеждает? Тем не менее, оба подхода работают и могут быть использованы в ситуации интервью.

Нажмите здесь, чтобы просмотреть на CodePen.

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

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

Поделитесь этой статьей с другими, если вы сочли ее полезной. Вы получили даром, давайте даром. Я также не против аплодисментов, знаете ли (*** подмигивает ***).

Свяжитесь со мной в твиттере, ладно? @Worldclassdev

ПОДПИСАТЬСЯ НА ОБНОВЛЕНИЯ И СОБЛЮДАЙТЕ СЛЕДУЮЩУЮ СТАТЬЮ В СЕРИИ.

Алгоритмы Javascript №1: Подсчет гласных в строке текста