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
Веб-разработка
29783
Задачку сделать обратный ход строки на 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-разработчик
Подробнее о курсе
Читайте другие статьи
Почему в 2022 году нужно учиться на веб-разработчика?
Актуальна ли профессия веб-разработчика в 2022 году? Рассказываем, зачем становиться веб-разработчиком, и почему такие специалисты всегда будут в цене на рынке труда.
Веб-разработка
21620
Как настроить рабочее пространство Slack веб-разработчику?
Делимся полезными советами по настройке и использованию Slack, которые повысят вашу продуктивность и ускорят реализацию любых проектов.
Веб-разработка
3609
Подготовка к собеседованию на веб-разработчика
Вы отправили резюме в компанию и вас пригласили на собеседование. Возник вопрос – как подготовиться к интервью на должность веб-разработчика морально, физически и технически?
Веб-разработка
3000
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!