Добро пожаловать в первый пост в блоге об основах Интернета. Web Basics - это серия статей по основным темам программирования, которые должен знать каждый веб-разработчик! Вы можете каждую неделю следить за новостями о сети в моем Instagram.
Я расскажу о трех методах:
split()
reverse()
join()
К концу этого вы сможете применить решение этой основной задачи алгоритма:
/** Reverse a String * * Write a function that will reverse a string * Your result must be a string. * */
Подробнее об этом позже. Приступим к нашему уроку 🤓
Основы работы в Интернете: split()
Этот метод разбивает вашу строку на отдельные подстроки. В моем примере я разделяю его на (‘’), что означает разделение каждой буквы. Таким образом, на выходе получается массив каждой буквы.
const name = 'samantha'; const result = name.split(''); console.log(result); // [ 's', 'a', 'm', 'a', 'n', 't', 'h', 'a' ]
Основы Интернета: reverse()
Этот метод используется для изменения порядка элементов в массиве. Следует отметить, что этот метод изменяет исходный массив.
const letters = ['a', 'b', 'c']; const result = letters.reverse(); console.log(result); // [ 'c', 'b', 'a' ] console.log(letters); // [ 'c', 'b', 'a' ]
⚠️ На заметку:
- Он изменяет ваш исходный массив.
- Он только переворачивает массив. Он не печатает алфавиты в порядке убывания.
Пример "Основы Интернета": reverse()
Пример 1. Массивы целых чисел
const numbers = [2, 10, 5]; const result = numbers.reverse(); console.log(numbers); // [ 5, 10, 2 ]
Пример 2. Массив эмодзи
Ничего особенного, просто относитесь к этим смайликам, как к струнам. Я заключил его в одинарные кавычки '
(и да, двойные кавычки тоже будут работать "
).
const medals = ['🥇', '🥈', '🥉']; const result = medals.reverse(); console.log(result); // [ '🥉', '🥈', '🥇' ]
Смайлы определенно немного отличаются от обычных символов (), поэтому вы столкнетесь с некоторыми проблемами, пытаясь разобрать их. Но давайте оставим это для другого урока.
Пример 3. Массив смешанных типов
const mix = [true, 'hi', false, 100]; const result = mix.reverse(); console.log(result); // [ 100, false, 'hi', true ]
Основы работы в Интернете: join()
Этот метод разделяет все элементы в массиве запятыми (по умолчанию) или указанным разделителем. Возвращает новую строку.
const pieces = [ 's', 'a', 'm', 'a', 'n', 't', 'h', 'a' ]; const result = pieces.join(''); console.log(result); // 'samantha' console.log(pieces); // Original array is not affected // [ 's', 'a', 'm', 'a', 'n', 't', 'h', 'a' ]
Примеры основ работы с Интернетом: join()
Разделитель по умолчанию, если вы ничего не передаете, - запятые ,
. Чтобы указать собственный разделитель, вы просто передаете его в качестве аргумента. т.е. присоединиться ('+').
const strings = ['Web', 'Basics', '!']; strings.join(); // default comma (,) // 'Web,Basics,!' strings.join( ); // empty space // 'Web Basics !' strings.join('-'); // dash // 'Web-Basics-!'
Массив целых чисел
const numbers = [2, 10, 5]; numbers.join(' + '); // '2 + 10 + 5'
Алгоритм Challenge 💪
Хорошо, а теперь давайте все вместе! Вот ваша задача алгоритма! Вы должны решить эту проблему с помощью встроенных функций, которые мы использовали вместе. А если вы хотите поднять уровень еще выше, попробуйте решить его без встроенных функций.
/** Reverse a String * * Reverse the provided string. * Your result must be a string. * * reverseString("hello") * Output: "olleh" * * reverseString("HoWdy") * Output: "ydWoH" * */
Это задание от freeCodeCamp.org
Решение
Как у вас получилось, удалось ли решить? Я не собираюсь описывать решение в этом сообщении в блоге. Но я дам ссылку на свое решение, которое вы можете использовать для сравнения с моим. Помните, что есть несколько способов решить эту проблему. Нет правильного или неправильного пути. В программировании замечательно то, что вы можете достичь того же результата множеством способов. Конечно, одни способы более эффективны, чем другие. Но вы знаете, что, как новички в программировании, давайте просто сосредоточимся на том, чтобы решить эту проблему. Это первый шаг. И вы всегда можете провести рефакторинг, когда приобретете больше уверенности и узнаете больше способов решения проблем.
Удачи! Надеюсь, вам понравится этот новый пост об основах Интернета! Поделитесь своим решением - это также отличный способ учиться друг у друга. Так что, если у вас есть другие способы решения этой проблемы, поделитесь ими в комментарии ниже 😊
Ресурсы
- Веб-документы MDN: разделить
- Веб-документы MDN: обратная сторона
- Веб-документы MDN: присоединяйтесь
- FreeCodeCamp
- Смайлы в JavaScript
Спасибо за чтение ❤
Сказать привет! Instagram | Facebook | Твиттер | SamanthaMing.com | Блог