Top.Mail.Ru
ypx
INTENSIVE
Попробуй себя в UX/UI-дизайне UX/UI-дизайн бесплатно
7 дней
5 проектов в портфолио
проверка дз
banner-circle
INTENSIVE
Попробуй себя во Frontend разработке Frontend бесплатно
7 дней
1 полноценный проект
проверка дз
banner-circle
Алгоритм JavaScript: слова наоборот
Показываем 3 способа написать обратный строковый алгоритм на JavaScript. !dlroW olleH
Веб-разработка
36268
Задачку сделать обратный ход строки на JavaScript очень часто задают на технических собеседованиях. Вас могут попросить написать код для переворачивания строки разными методами, например, без использования встроенных методов или с помощью рекурсии.
Потенциально существуют десятки различных способов реализовать алгоритм. В этой статье будут приведены три интересных способа решения задачи переворачивания строки на JavaScript, которые предложила в своем блоге программист Соня Мойссет.

Итак, задача


Написать алгоритм на JavaScript, который перевернет строку «hello».


Решения


1. Обращаем строку с помощью встроенных функций в JS


В алгоритме мы будем использовать три метода: метод String.prototype.split(), метод Array.prototype.reverse() и метод Array.prototype.join().

  • Метод split() разбивает объект string на массив строк путём разделения строки указанной подстрокой.
  • Метод reverse() на месте обращает порядок следования элементов массива. Первый элемент массива становится последним, а последний — первым.
  • Метод join() объединяет все элементы массива в строку.

Попробуем написать код:

Шаг 1. Используем split() метод, чтобы вернуть новый массив.
Шаг 2. Используем reverse() метод, чтобы перевернуть созданный массив.
Шаг 3. Используем join() метод, чтобы соединить все элементы массива в строку.
Шаг 4. Возвращаем перевернутую строку.

function reverseString(str) {    
    var splitString = str.split(""); // var splitString = "hello".split(""); // ["h", "e", "l", "l", "o"]     
    var reverseArray = splitString.reverse(); // var reverseArray = ["h", "e", "l", "l", "o"].reverse(); 
         // ["o", "l", "l", "e", "h"]   
    var joinArray = reverseArray.join(""); // var joinArray = ["o", "l", "l", "e", "h"].join(""); 
         // "olleh" 

    return joinArray; // "olleh"
} 

reverseString("hello"); 

Три метода вместе:

function reverseString(str) { 
   return str.split("").reverse().join("");
}
reverseString("hello");


2. Переворачиваем строку с помощью цикла


Шаг 1. Создаем пустую строку, в которой будет размещаться новая строка.
Шаг 2. Создаем цикл FOR.
Шаг 3. Возвращаем перевернутую строку.

function reverseString(str) {    
    var newString = "";     

     /* Стартовой точкой для цикла будет (str.length - 1), что соответствует последнему символу строки — "o"      
     До тех пор, пока i больше или равно 0, цикл будет работать Мы уменьшаем i после каждой итерации */
    
     for (var i = str.length - 1; i >= 0; i--) {        
         newString += str[i]; // или newString = newString + str[i];    
        }     

     /* Длина нашей строки «hello» равна пяти        
         Для каждой итерации: i = str.length – 1 и newString = newString + str[i]        
         1-я:  i = 5 - 1 = 4,      newString = "" + "o" = "o"        
         2-я:  i = 4 - 1 = 3,      newString = "o" + "l" = "ol"        
         3-я:  i = 3 - 1 = 2,      newString = "ol" + "l" = "oll"
         4-я:  i = 2 - 1 = 1,      newString = "oll" + "e" = "olle"        
         5-я:  i = 1 - 1 = 0,      newString = "olle" + "h" = "olleh"    
     Конец цикла*/     

    
     return newString; // "olleh"
} 

reverseString('hello'); 


3. Переворачиваем строку с помощью рекурсии


Для этого решения мы будем использовать два метода: метод String.prototype.substr() и метод String.prototype.charAt().

Метод substr() возвращает указанное количество символов из строки, начиная с указанной позиции.

"hello".substr(1); // "ello"

Метод charAt() возвращает указанный символ из строки.

"hello".charAt(0); // «h" 

Глубина рекурсии равна длине строки. Этот способ решения будет не самым удобным, если строка будет очень длинной.

function reverseString(str) {  
    if (str === "") // Завершение рекурсии
        return "";  
  
    else    
        return reverseString(str.substr(1)) + str.charAt(0);

        /* Первая часть метода рекурсии. Вы должны помнить, что у вас не будет одного вызова функции, у вас будет несколько вложен           ных вызовов. 
       Each call: str === "?"                         reverseString(str.subst(1)) + str.charAt(0)
       1-й вызов – reverseString("Hello»)   вернет   reverseString("ello»)           + "h"
       2-й вызов – reverseString("ello")   вернет   reverseString("llo")            + "e"
       3-й вызов – reverseString("llo")    вернет   reverseString("lo")             + "l"
       4-й вызов – reverseString("lo")     вернет   reverseString("o")              + "l"
       5-й вызов – reverseString("o")      вернет   reverseString("")               + "o" 

      Вторая часть метода рекурсии. Метод попадает в условие if и наиболее вложенный вызов немедленно возвращается.
   
       5-й вызов вернет reverseString("") + "o" = "o"
       4-й вызов вернет reverseString("o") + "l" = "o" + "l"
       3-й вызов вернет reverseString("lo") + "l" = "o" + "l" + "l"
       2-й вызов вернет reverserString("llo") + "e" = "o" + "l" + "l" + "e"
       1-й вызов вернет reverserString("ello") + "h" = "o" + "l" + "l" + "e" + "h" */

}

reverseString("hello");


Заключение


Практиковать написание алгоритмов на языках программирования — полезное занятие для развития логики и отличная практика кодирования. Задачу обратной строки можно решить несколькими способами: пойти по короткому пути или воспользоваться более сложными методами. Надеемся, что статья была вам полезна!
Понравилась статья? Сохраните её в своих соц. сетях!
обучайся с нами профессии
Frontend-разработчик
Подробнее о курсе
Читайте другие статьи
Как эффективно общаться frontend- и backend-разработчикам
Узнайте, какие приемы помогают Frontend- и Backend-разработчикам лучше понимать друг друга и вместе эффективно работать над IT-проектами. Делимся лучшими практиками и инструментами для успешной коммуникации между специалистами.
Веб-разработка
2424
Топ-5 ИИ-сервисов для разработчиков на 2024 год
Все больше IT-команд применяют искусственный интеллект для создания IT-продуктов. Это серьезно ускоряет процесс за счет автоматизации рутинных задач. Если вы тоже разрабатываете IT-решения, 5 ИИ-сервисов из этой статьи точно пригодятся вам в 2024 году.
Веб-разработка
6502
9 шагов к позиции junior fullstack-разработчика
Хотите стать fullstack-разработчиком, но не знаете, с чего начать? Мы подготовили инструкцию, где рассказали, какие технологии надо изучать и в какой последовательности это делать, чтобы достичь намеченной цели как можно быстрее.
Веб-разработка
5049
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!