Разбиваем нашу первую задачу кодирования
Вступление
В последнее время я проводил время, работая над различными задачами кода на Codewars.com. Изначально у меня были проблемы с задачами или я совершенно не понимал, как их решать, но, потратив больше времени на изучение JavaScript, я начал собирать некоторые проблемы воедино. В этой серии я хочу разбить некоторые из этих задач и обсудить, как я их решил.
Вызов обратных слов
В этой статье я расскажу о проблеме обратных слов. Цель этой задачи - перевернуть слово в строке, и если в строке есть несколько слов, они останутся на том же месте, но слова будут обратными. В этой задаче строка “The quick brown fox jumps over the lazy dog.”, а цель - вернуть“ehT kciuq nworb xof spmuj revo eht yzal .god”. Я рассмотрю .split(), .reverse() и .join() и включил ссылки на MDN для каждого из них внизу сообщения.
Давайте решать
function reverseWords(str) {
return str
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);
Это то, с чего мы начинаем. У нас есть функция, которая принимает один аргумент - строку. Изначально вы могли подумать, что мы можем сделать str.reverse() для начала, но, к сожалению, .reverse() работает только с массивом. Вместо этого первое, что нам нужно сделать, это использовать use str.split(‘’) для возврата массива символов. Для этого можно использовать .split(‘’) или .split(‘ ‘). Если вы используете разделение без пробелов между кавычками, оно будет разделено после каждого символа. Если вы используете разделение с пробелом между кавычками, оно будет разделено на каждом пробеле в строке. Для этой задачи я решил использовать .split(‘').
function reverseWords(str) {
return str.split(‘’)
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);
Выход: [‘T’, ‘h’, ‘e’, ‘ ‘, ‘q’, ‘u’, ’i’, ’c’, ’k’,’ ‘, ‘b’, ’r’, ’o’, ’w’, ’n’, ’ ‘, ’f’, ’o’, ’x’, ’ ‘, ’j’, ’u’, ’m’, ’p’, ’s’, ’ ‘, ’o’, ’v’, ’e’, ’r’, ’ , ’t’, ’h’, ’e’, ’ ‘, ’l’, ’a’, ’z’, ’y’, ’ ‘, ’d’, ’o’, ’g’, ’.’].
Теперь, когда у нас есть массивный массив, который разбивается на каждый символ, мы можем добавить .reverse() и перевернуть эту штуку. При использовании методов .split() и .reverse() вам не нужно создавать разные переменные и связывать их вместе, вы можете просто добавить их, например: str.split(‘’).reverse(). Давайте проверим вывод и посмотрим, что у нас получилось:
function reverseWords(str) {
return str.split(‘’).reverse()
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);
Выход: [‘.’, ’g’, ’o’, ’d’, ’ ‘, ’y’, ’z’, ’a’, ’l’, ’ ‘, ’e’, ’h’, ’t’, ’ ‘, ’r’, ’e’, ’v’, ’o’, ’ ‘, ’s’, ’p’, ’m’, ’u’, ’j’, ’ ‘, ’x’, ’o’, ’f’, ’ ‘, ’n’, ’w’, ’o’, ’r’, ’b’, ’ ‘, ’k’, ’c’, ’I’, ’u’, ’q’, ’ ‘, ’e’, ’h’, ’T’]
Мы приближаемся к тому, чего хотим, но еще не достигли цели. Теперь нам нужно собрать эту штуку обратно в строку, чтобы мы могли поработать над ней. Вот тут-то и пригодится .join(). Мы используем .join() точно так же, как мы использовали .split(). Для этого нам нужно добавить к .join() тот же аргумент, что и на .split():
function reverseWords(str) {
return str.split(‘’).reverse().join(‘’)
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);
Выход: ‘.god yzal eht revo spmuj xof nworb kciuq ehT’
Похоже, мы почти у цели. Слова перевернуты, но теперь они не в том месте. Оглядываясь назад на цель, мы должны вернуть «ehT» на первое место и «.god» на последнее место. Для этого нам нужно снова разделить строку на массив, чтобы мы могли снова ее перевернуть. На этот раз мы будем использовать .split(‘ ‘). Убедитесь, что между кавычками есть пробел, это позволяет нам разделять их по пробелам, а не после каждого символа.
function reverseWords(str) {
return str.split(‘’).reverse().join(‘’).split(‘ ‘)
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);
Выход [ ‘.god’, ‘yzal’, ‘eht’, ‘revo’, ‘spmuj’, ‘xof’, ‘nworb’, ‘kciuq’, ‘ehT’ ]
Мы приближаемся к завершению этой работы! Теперь, когда у нас есть строка, разделенная на массив, мы можем изменить порядок слов. .reverse() работает, меняя порядок каждого элемента в массиве, поэтому, когда мы используем его сейчас, он не изменит буквы в каждой строке, он просто изменит позицию индекса каждой строки в массиве.
function reverseWords(str) {
return str.split(‘’).reverse().join(‘’).split(‘ ‘).reverse()
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);
Выход [ ‘ehT’, ‘kciuq’, ‘nworb’, ‘xof’, ‘spmuj’, ‘revo’, ‘eht’, ‘yzal’, ‘.god’ ]
Так выглядит намного лучше! Последнее, что нам нужно сделать для выполнения этой задачи, - это преобразовать этот массив обратно в строку, мы сделаем это, снова используя .join(). В последнем .split(‘ ‘), который мы использовали, у нас был пробел между кавычками, когда мы используем .join(‘ ‘), он должен быть таким же.
function reverseWords(str) {
return str.split(‘’).reverse().join(‘’).split(‘ ‘).reverse().join(‘ ‘)
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);
Выход ‘ehT kciuq nworb xof spmuj revo eht yzal .god’
Вот оно! Это последняя функция, которая обеспечивает результаты, которые мы ищем:
function reverseWords(str) {
return str
.split(‘’)
.reverse()
.join(‘’)
.split(‘ ‘)
.reverse()
.join(‘ ‘);
}
reverseWords(‘The quick brown fox jumps over the lazy dog.’);
Заключение
Когда вы объединяете эти вызовы в цепочку, не обязательно, чтобы все они были на одной линии. Как только я сохраняю, prettier берет на себя и помещает их все, чтобы мне было легче читать. Когда для меня все так разбито, мне кажется, что мой взгляд легче скользит по ним, и я могу быстрее понять, что происходит.
Вот несколько ссылок на MDN, если вы хотите узнать больше о разделении, реверсе или присоединении:
Я ценю, что вы нашли время, чтобы прочитать это, и надеюсь, что это помогло вам в какой-то мере. Это мое первое сообщение в блоге, объясняющее код, поэтому, если у вас есть какие-либо предложения или отзывы, которые помогут мне улучшить, не стесняйтесь оставлять здесь комментарий. Спасибо за ваше время, и я надеюсь, что вы зайдете и напишете мой следующий пост.
