JavaScript逆文字列コードチャレンジ
私たちが新進のソフトウェアエンジニアやWeb開発者として解決しようと試みた最初のコード/アルゴリズムの課題の1つは、文字列を逆にする方法を理解できるかどうかを確認することです。文字列は文字とスペースの単なるコレクションであることを忘れないでください。たとえば、「Hello World！」という文字列を逆にしようとする必要があります。そして、「！dlroWolleH」を返します。この問題を解決する方法はいくつかありますが、この記事ではそれらのいくつかについて説明します。
プロンプト
関数reverseStringを記述します 、文字列を反転して返します。反転する文字列は、関数の引数として指定されます。
ソリューション＃1：Forループ
最初の、そしておそらく最も簡単な解決策の1つは、forループを使用して、文字列を逆方向に移動することです。文字列内の各文字を渡すときに、新しい反転文字列を保持する変数をインスタンス化または作成する必要があります。
function reverseString(str) {
let newStr = '';
for(let i = str.length - 1; i >= 0; i--) {
newStr += str[i];
}
return newStr;
}
iを割り当てます 最後のインデックス（文字列の長さから1を取るときに計算されます）⇒これは初期化です ループする最初のインデックスとして機能します。 forループの2番目の部分は、条件です。 ⇒ これは、いつ停止するかをループに通知します。 forループの3番目で最後の部分は、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メソッドには、現在のアイテム、アイテムのインデックス、およびアイテムの元となる配列のコピーの3つのパラメータがあります。ソリューションでは最後の2つのパラメーターを使用します。
最初に行う必要があるのは、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('')
}
基本的にインデックスを交換したいので、現在のインデックスの場所に配置したい文字のインデックスを把握する必要があります。それが私たちが返すキャラクターになります。
これを行うには、配列の長さから1を引いたものを見つけます。これは、ゼロベースの配列であるためです。次に、現在のインデックスの位置を削除します。返すarray[swapIndex]は、基本的に現在のインデックスの代わりになります。これにより、文字列内の反転文字の配列が得られます。
最後に行う必要があるのは、配列を1つの文字列に結合して、それを返すことです。
コードエディタでソリューションをテストしてください！
<!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()を編集するだけです あなたがそれを画面上で見たいのであれば、機能と他には何もありません。
-
JavaScriptの配列reverse（）
JavaScript配列reverse（）関数は、配列内の要素の順序を逆にします 以下は、配列のreverse（）関数のコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document&
-
JavaScriptで文字列を繰り返しますか？
文字列を繰り返すには、Join（）と一緒にArray（）を使用できます。 例 以下はコードです- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit