【JavaScript】配列の並び替え【sortではなくorder】

配列の並び替えで検索するとソート(sort)の記事が多くヒットします。 しかし、「ちがうんや。任意の位置に移動して並べ替えたいんや」という時もありますね。 sort ではなく order の並び替えです。 そのコードを書いたのでログとして記載します。

/**
 * 元の配列をの順番は変更しない並べ替え
 * 
 * @param {array}  array - 並べ替える配列
 * @param {number} from  - 並べ替える要素のindex番号
 * @param {number} to    - 並べ替え先のindex番号
 */
function reorderArray(array, from, to) {
  const copyArray = array.slice(); // シャローコピーの新しい配列
  const element = copyArray[from];
  copyArray.splice(from, 1);
  copyArray.splice(to, 0, element);
  return copyArray;
}

// サンプル配列
const users = [
  { name: '山田', age: 18},
  { name: '田中', age: 28},
  { name: '鈴木', age: 38},
  { name: '杉原', age: 48},
  { name: '池田', age: 58}
];

// 先頭の要素(index:0)を4番目(index:3)に並べ替える
const reordered = reorderArray(users, 0, 3);

// 並び替え元の配列(変化なし)
console.log(users);
// console log
// [
//   { name: '山田', age: 18},
//   { name: '田中', age: 28},
//   { name: '鈴木', age: 38},
//   { name: '杉原', age: 48},
//   { name: '池田', age: 58}
// ];

// 並び替えた後の配列(シャローコピーなので参照は同じ)
console.log(reordered);
// console log
// [
//   { name: '田中', age: 28},
//   { name: '鈴木', age: 38},
//   { name: '杉原', age: 48},
//   { name: '山田', age: 18},
//   { name: '池田', age: 58}
// ];

// reordered の name を書き換える
reordered[0].name = 'tanaka';

console.log(reordered);
// console log
// [
//   { "name": "tanaka", "age": 28 },
//   { "name": "鈴木", "age": 38 },
//   { "name": "杉原", "age": 48 },
//   { "name": "山田", "age": 18 },
//   { "name": "池田", "age": 58 }
// ]

// 参照は残っているので元の配列(user)の name も書き換わる
console.log(users);
// [
//   { "name": "山田", "age": 18 },
//   { "name": "tanaka", "age": 28 },
//   { "name": "鈴木", "age": 38 },
//   { "name": "杉原", "age": 48 },
//   { "name": "池田", "age": 58 }
// ]

人気記事すべて表示

WEBすべて表示