【jsトリビア】jsにて変数同士の値を交換する4つの方法
Web2017年7月28日
jsを使って変数同士の値を入れ替えたい場合、一時格納用の変数を使ったり、配列を応用したりなど様々な方法があります。本記事ではjsで変数同士の値を入れ替える4つの方法をご紹介させていただきたいと思います。
サンプルコード①
一時格納用の変数を使う方法
$(function(){
'use scrict';
var $hoge_1 = 'ほげ1';
var $moge_1 = 'もげ1';
var $dummy_1 = $hoge_1;
$hoge_1 = $moge_1;
$moge_1 = $dummy_1;
alert($hoge_1);
alert($moge_1);
});加減算で入れ替える方法
$(function(){
'use scrict';
var $hoge_2 = 10;
var $moge_2 = 100;
$moge_2 = $hoge_2 - $moge_2;
$hoge_2 -= $moge_2;
$moge_2 += $hoge_2;
alert($hoge_2);
alert($moge_2);
});XOR演算子で入れ替える方法
$(function(){
'use scrict';
var $hoge_3 = 20;
var $moge_3 = 200;
$moge_3 ^= $hoge_3;
$hoge_3 ^= $moge_3;
$moge_3 ^= $hoge_3;
alert($hoge_3);
alert($moge_3);
});
配列を応用した方法
$(function(){
'use scrict';
var $hoge_X = 'ほげX';
var $moge_X = 'もげX';
$hoge_X = [$moge_X, $moge_X = $hoge_X][0];
alert($hoge_X);
alert($moge_X);
});- ※jQueryを読み込んでいる場合のスクリプトとなります
解説
一時格納用の変数を使う方法
一番わかりやすい方法かと思います。一時格納用の変数$dummy_1に変数$hoge_1の値を格納しておき、$hoge_1 = $moge_1、$moge_1 = $dummy_1とすることで結果的に変数同士を入れ替えることができます。
加減算で入れ替える方法
整数とBoolean型（true or false）でしか使えないのでフロントエンドで使うことはあまりないかもしれません。小数の場合においても、桁落ちして入れ替えがうまくいかないこともあるので使いどころは注意が必要です。条件さえそろっていれば、コードの難読化や一時格納用変数を用意したくない場合は有効です。また、この方法はjs以外の言語でも活用することができます。
XOR演算子で入れ替える方法
理屈上は加減算で入れ替える方法と同じです。こちらも整数とBoolean型（true or false）でしか使えないので使う際はよく確認するようにしましょう。
配列を応用した方法
js以外の言語で使うことはできませんが、一番おすすめできる方法です。まず、配列で[$moge_X, $moge_X = $hoge_X]のように配列を定義します。配列の1番目の値は$moge_Xで初期化します。さらに2番目の値を[$moge_X = $hoge_X]で初期化しますが「$moge_Xに$hoge_Xを代入する」だけが目的なので、変数$hoge_X、$moge_Xともに「最初に$hoge_Xに代入された値」となります。
最後の[0]にて配列の1番目の値すなわち$moge_Xにあった値を取り出すことで$hoge_Xに代入され、最終的に値が入れ替わることになります。
次に、配列の2番目の項目を「b = a」で初期化しています。「b = a」はbにaを代入した結果、つまりaの値で初期化されるわけですが、「bにaを代入すること」だけが目的です。この時点で、変数a, bともに、「最初にaに代入された値」になっています。
一時格納用変数と同様に確実に入れ替えることができかつ1行のコードで済むので個人的には一番好きな方法ですね。
デモ
実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。
まとめ
一時格納用変数かもしくは配列を使う方法のいずれかがバグを起こしにくいのでおすすめですが、ケースバイケースで使い分けるとよいでしょう。jsで変数同士を入れ替えたい場合はどうぞ本記事をご参考にしていただければ幸いです。