javascript 配列の指定した位置を入れ替える
- 作成日 2022.11.25
- 更新日 2023.02.16
- javascript
- javascript

javascriptで、配列の指定した位置を入れ替えるサンプルコードを記述してます。入れ替えたい位置のインデックス番号を双方に指定することで入れ替えることが可能です。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 110.0.5481.78
配列の指定した位置を入れ替え
配列の指定した位置を入れ替えするには、
1. 入れ替えたい位置を指定して値を挿入
で可能です。
let arr = ["c", "b", "a", "d", "e"];
[arr[0], arr[2]] = [arr[2], arr[0]];
console.log(arr); // ['a', 'b', 'c', 'd', 'e']
サンプルコード
以下は、
「実行」ボタンをクリックすると、用意した5個のランダムな配列の「1番目」と「5番目」を入れ替えた結果を示する
サンプルコードとなります。
※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<!-- MDB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>
<body>
<div class="container text-center w-25" style="margin-top:150px">
<h2><span class="badge badge-success">元の配列</span></h2>
<ul id="txt1" class="list-group"></ul>
<h2><span class="badge badge-success">実行結果</span></h2>
<ul id="txt2" class="list-group"></ul>
<button id="btn" type="button" class="btn btn-raised btn-success">
実行
</button>
</div>
<script>
const toObj = () => {
// ランダムな5個の整数1桁の配列を生成
const arr = Array(5).fill().map(x => ~~(Math.random() * 10));
// 表示
disp(arr, "txt1");
// 1番目と5番目の位置を変更する
[arr[0], arr[4]] = [arr[4], arr[0]];
// 表示
disp(arr, "txt2");
}
//フロントに表示する関数
const disp = (arr, id) => {
let text = [];
// for ofを使用
for (let item of arr) {
text.push('<li class="list-group-item">' + JSON.stringify(item) + '</li>');
}
//innerHTMLを使用して表示
document.getElementById(id).innerHTML = text.join('');
}
// クリックイベントを登録
btn.onclick = () => {
toObj();
};
</script>
</body>
</html>
入れ替えされていることが確認できます。

-
前の記事
GAS スプレッドシートのタブの色を変更する 2022.11.24
-
次の記事
sakuraエディタ タイプ別設定一覧を開くショートカットキー 2022.11.25
コメントを書く