신진 소프트웨어 엔지니어와 웹 개발자로서 우리가 해결하기 시작한 첫 번째 코드/알고리즘 과제 중 하나는 문자열을 뒤집는 방법을 알아낼 수 있는지 확인하는 것입니다. 문자열은 문자와 공백의 모음일 뿐입니다. 예를 들어 "Hello World!" 문자열을 반대로 설정해야 합니다. "!dlrow olleH"를 반환합니다. 이 문제를 해결할 수 있는 몇 가지 방법이 있으며 이 기사에서 그 중 몇 가지를 다룰 것입니다.
프롬프트
reverseString 함수 작성 , 문자열을 뒤집고 반환합니다. 반전할 문자열은 함수의 인수로 제공됩니다.
솔루션 # 1:For 루프
첫 번째이자 아마도 가장 간단한 솔루션 중 하나는 for 루프를 사용하고 문자열을 뒤로 이동하는 것입니다. 문자열의 각 문자를 전달할 때 새로운 역 문자열을 보유하는 변수를 인스턴스화하거나 생성해야 합니다.
function reverseString(str) {
let newStr = '';
for(let i = str.length - 1; i >= 0; i--) {
newStr += str[i];
}
return newStr;
}
우리는 나 를 할당합니다. 마지막 인덱스까지 (문자열의 길이에서 1을 취할 때 계산됨) ⇒ 이것이 우리의 초기화입니다. 루프를 통과하는 첫 번째 인덱스 역할을 합니다. for 루프의 두 번째 부분은 조건 입니다. ⇒ 이것은 루프를 멈출 때를 알려줍니다. for 루프의 세 번째이자 마지막 부분은 i가 얼마나 증가 할 것인지입니다. 루프가 완료된 후에도 조건은 여전히 참입니다. i– 본질적으로 i를 가져와 i – 1에 재할당합니다.
각 반복을 반복하면서 str[i]에서 각 문자를 가져와 newStr에 추가합니다. 그런 다음 for 루프 외부에서 newStr을 반환하고 함수를 종료합니다.
코드 편집기에서 직접 시도해 보세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
<script>
function reverseString(str) {
let newStr = '';
for(let i = str.length - 1; i >= 0; i--) {
newStr += str[i];
}
return newStr;
}
function showInput(e) {
e.preventDefault();
const inputStr = document.getElementById('user_input').value;
if(inputStr.length < 1) {
alert("Must enter a string to reverse. Try again.")
}
let reversed = reverseString(inputStr);
document.getElementById(
'display'
).innerHTML = reversed;
document.getElementById('user_input').value = '';
}
</script>
<style>
* {
box-sizing: border-box;;
}
body {
width: 100%;
max-width: 500px;
height: 100vh;
background: lightblue;
margin: 0 auto;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
}
div {
display: flex;
flex-flow: column wrap;
align-items: flex-start;
width: 100%;
}
form {
display: flex;
flex-flow: column wrap;
width: 100%;
background: lightgray;
padding: 20px;
border: 5px double slategray;
}
#user_input {
width: 100%;
}
#submit_button {
width: 25%;
align-self: flex-end;
margin-top: 10px;
}
#display {
font-size: 1.4rem;
height: 50px;
}
</style>
</head>
<body>
<div>
<form onsubmit="showInput(event);">
<label id="label">Enter a String to Reverse:</label>
<input type="text" name="message" id="user_input"/>
<input type="submit" onclick="showInput(event);" id="submit_button"/><br />
<label>Your input: </label>
<p><span id="display"></span></p>
</form>
</div>
</body>
</html> 해결책 # 2:JavaScript의 ES6 지도 방법
JavaScript에는 map이라는 ES6의 새로운 내장 배열 메서드가 있습니다. . 이것이 하는 일은 지정된 값을 가진 새 배열을 반환하는 것입니다. map 메소드에는 현재 항목, 항목의 인덱스 및 해당 항목이 나오는 배열의 복사본이라는 세 가지 매개변수가 있습니다. 솔루션의 마지막 두 매개변수를 사용합니다.
먼저 split()를 사용하여 문자열을 배열로 분할해야 합니다. 방법. 빈 문자열로 분할하면 이 메서드는 각 개별 문자가 포함된 배열을 제공합니다. 그런 다음 새 배열을 사용하여 매핑합니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
function reverseString(str) {
let newArr = str.split('');
let rev = newArr.map((letter, index, array) => {
let swapIndex = array.length - index - 1;
return array[swapIndex];
});
return rev.join('')
}
우리는 본질적으로 인덱스를 교환하기를 원하기 때문에 현재 인덱스 자리에 넣고자 하는 문자의 인덱스를 알아내야 합니다. 그것이 우리가 반환하는 캐릭터가 될 것입니다.
그렇게 하려면 0부터 시작하는 배열이기 때문에 배열의 길이에서 1을 뺀 다음 현재 인덱스의 위치를 제거합니다. 우리가 반환하는 array[swapIndex]는 기본적으로 현재 인덱스를 대신합니다. 이것은 문자열에서 반전된 문자 배열을 제공합니다.
마지막으로 해야 할 일은 배열을 문자열로 결합하고 반환하는 것입니다.
코드 편집기에서 솔루션을 테스트해보세요!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
<script>
function reverseString(str) {
let newArr = str.split('');
let rev = newArr.map((letter, index, array) => {
let newIndex = array.length - index - 1;
return array[newIndex];
});
return rev.join('')
}
function showInput(e) {
e.preventDefault();
const inputStr = document.getElementById('user_input').value;
if(inputStr.length < 1) {
alert("Must enter a string to reverse. Try again.")
}
let reversed = reverseString(inputStr);
document.getElementById(
'display'
).innerHTML = reversed;
document.getElementById('user_input').value = '';
}
</script>
<style>
* {
box-sizing: border-box;;
}
body {
width: 100%;
max-width: 500px;
height: 100vh;
background: lightblue;
margin: 0 auto;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
}
div {
display: flex;
flex-flow: column wrap;
align-items: flex-start;
width: 100%;
}
form {
display: flex;
flex-flow: column wrap;
width: 100%;
background: lightgray;
padding: 20px;
border: 5px double slategray;
}
#user_input {
width: 100%;
}
#submit_button {
width: 25%;
align-self: flex-end;
margin-top: 10px;
}
#display {
font-size: 1.4rem;
height: 50px;
}
</style>
</head>
<body>
<div>
<form onsubmit="showInput(event);">
<label id="label">Enter a String to Reverse:</label>
<input type="text" name="message" id="user_input"/>
<input type="submit" onclick="showInput(event);" id="submit_button"/><br />
<label>Your input: </label>
<p><span id="display"></span></p>
</form>
</div>
</body>
</html>
기억해야 할 중요한 점은 map이 새 배열을 반환한다는 것입니다. 따라서 전달된 원래 str/array를 수정하지 않습니다.
해결책 #3:내장 JavaScript 메소드
이 코드 문제를 해결하는 이 방법은 내장 함수/메서드 split()를 사용합니다. , reverse() 및 join() 이 한 줄로 해결하려면:
function reverseString(str) {
return str.split('').reverse().join('');
} 아래 코드를 실행하고 작동하는지 직접 테스트해 보세요!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
<script>
function reverseString(str) {
return str.split('').reverse().join('');
}
function showInput(e) {
e.preventDefault();
const inputStr = document.getElementById('user_input').value;
if(inputStr.length < 1) {
alert("Must enter a string to reverse. Try again.")
}
let reversed = reverseString(inputStr);
document.getElementById(
'display'
).innerHTML = reversed;
document.getElementById('user_input').value = '';
}
</script>
<style>
* {
box-sizing: border-box;;
}
body {
width: 100%;
max-width: 500px;
height: 100vh;
background: lightblue;
margin: 0 auto;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
}
div {
display: flex;
flex-flow: column wrap;
align-items: flex-start;
width: 100%;
}
form {
display: flex;
flex-flow: column wrap;
width: 100%;
background: lightgray;
padding: 20px;
border: 5px double slategray;
}
#user_input {
width: 100%;
}
#submit_button {
width: 25%;
align-self: flex-end;
margin-top: 10px;
}
#display {
font-size: 1.4rem;
height: 50px;
}
</style>
</head>
<body>
<div>
<form onsubmit="showInput(event);">
<label id="label">Enter a String to Reverse:</label>
<input type="text" name="message" id="user_input"/>
<input type="submit" onclick="showInput(event);" id="submit_button"/><br />
<label>Your input: </label>
<p><span id="display"></span></p>
</form>
</div>
</body>
</html>
기본적으로 내장된 reverse() 메소드는 map() 방법(이전 솔루션에서 설명한 방법) 하지만 , 제자리를 뒤집기 때문에 새 배열을 반환하는 대신 원래 배열을 변경합니다. . 더 큰 문제를 해결하는 경우 필요한 경우 원본에 계속 액세스할 수 있도록 원본 어레이의 복사본을 생성해야 할 수도 있습니다.
이것들은 이 문제를 해결하는 유일한 결정적인 방법이 아닙니다. 이것들은 문제를 해결하는 가장 인기 있는 방법 중 일부일 뿐입니다. 위의 코드 편집기에서 스스로 다른 솔루션을 찾을 수 있는지 실험하고 확인하십시오. reverseString()을 수정하면 됩니다. 기능만 있으면 화면에서 볼 수 있습니다.