この記事で共通して使う変数
const word = 'プログラミングJavaScript';
この記事では上記の文字列を以下のように反転させたいと思います。
プログラミングJavaScript -> tpircSavaJグンミラグロプ
forループとpushとpop で頑張ってみる
const converted = []; // 文字を格納する配列を用意する。
for (let i = 0, len = word.length; i < len; i++) {
const char = word.charAt(i); // インデックスの位置の一文字を取得する。
converted.push(char); // 要素を追加する。
}
let reversed = ''; // 反転された文字を入れる変数を用意する。
for (let i = 0, len = converted.length; i < len; i++) {
const popped = converted.pop(); // 配列の末尾から1つ取り出す。
reversed += popped; // 文字を繋げる。
}
console.log(reversed); // tpircSavaJグンミラグロプ
原始的でコーディングミスも起こしやすそう。（ループの終了条件など）
処理を追わなければ何をしているかわからないし、状態が複雑であまり美しくないです。
for...ofとunshiftで頑張ってみる
const converted = [];
for (let char of word) { // 一文字ずつ処理する
converted.unshift(char); // 配列の先頭に追加する。
}
let reveresed = '';
for (let char of converted) {
reveresed += char;
}
console.log(reveresed); // tpircSavaJグンミラグロプ
ループ部分が先ほどよりスッキリしました。
Stringはイテラブルなのでfor...ofで扱うことができます。
けれどまだイケてるとはいいがたいです。
StringのメソッドとArrayのアクセサメソッドを使う
const reversed = word.split('') // 空文字で分割して配列に
.reverse() // 配列を反転して
.join(''); // 空文字で連結する
console.log(reversed); // tpircSavaJグンミラグロプ
メソッドチェーンで繋げていますが以下と同じです。
const converted = word.split('');
const reversedArray = converted.reveresd();
const reveresdString = reversedArray.join('');
forループを使わないコードなら簡潔に書けるし間違いが入り込む要素がぐっと減ります。
見ただけで何をしているかわかります。
スプレッド演算子とArrayの反復メソッドとアロー関数を使う
const reversed = [...word].reduceRight((p, c) => p + c); // 配列に変換し右から左へたたみ込む。
console.log(reversed); // tpircSavaJグンミラグロプ
ES6で記述したのでレガシーブラウザで動かす場合Babelなどでトランスパイルが必要かもしれません。
文字列はイテラブルなのでスプレッド演算子で展開でき、さらに配列に格納することで、文字列を配列にできます。
reduceRightでたたみ込み演算をし匿名関数はアロー関数でシンプルに記述します。
新しいシンタックスについては以下が参考になりました。
ありがとうございました！