JavaScript

最終更新日:
公開日:

レシピ

配列

配列の要素の並びを逆順にする

配列の要素の並びを反転させる方法について解説します。

この記事のポイント

  • 要素の値に関係なく機械的に並びを反対にする
  • 多次元配列も要素の並びを反対にすることができる
  • オブジェクトのプロパティは並び替えできない

目次

配列の要素の並びを反転する

配列に入っている要素の並びを反転したいときはreverseメソッドを使用します。
このメソッドは要素の値を比較せず、先頭から末尾までの並びを機械的に逆順にします。

JS コード例

let numbers = [ 4, 0, 50, -1, 2];

// 1回目(並びを反対にする)
numbers.reverse();
console.log(numbers);
// (5) [2, -1, 50, 0, 4]

// 2回目(並びを元に戻す)
numbers.reverse();
console.log(numbers);
// (5) [4, 0, 50, -1, 2]

reverseメソッドは元の配列に入っている要素の並びをそのまま編集するため、他の変数などで戻り値を受け取る必要はありません。
また、機械的に並びを反対にするだけなので、2回目を実行すると並びは元に戻ります。

配列の要素に文字列やオブジェクトが入っていても同じように使うことができます。

JS コード例

// パターン1:要素に文字列が入った配列
let animals = [ 'lion', 'rhinos', 'cat', 'dog', 'bear'];
animals.reverse();
console.log(animals);
// (5) ["bear", "dog", "cat", "rhinos", "lion"]


// パターン2:要素の値が混在している配列
let chaos = [ '猫', '5', 'fish', 'b', 110, '虎', 3];
chaos.reverse();
console.log(chaos);
// (7) [3, "虎", 110, "b", "fish", "5", "猫"]


// パターン3:要素にオブジェクトが入った配列
let users = [
	{
		name: "John",
		id: 150001,
		regist_datetime: "2016/07/01 14:20:19"
	},
	{
		name: "Emily",
		id: 150002,
		regist_datetime: "2016/07/01 14:27:34"
	},
	{
		name: "Taro",
		id: 150003,
		regist_datetime: "2016/07/01 14:28:05"
	}
];
users.reverse();
console.log(users);
// 0: {name: "Taro", id: 150003, regist_datetime: "2016/07/01 14:28:05"}
// 1: {name: "Emily", id: 150002, regist_datetime: "2016/07/01 14:27:34"}
// 2: {name: "John", id: 150001, regist_datetime: "2016/07/01 14:20:19"}

要素にオブジェクトが入っている場合についても、プロパティや値は比較せず並びを反対にすることができます。

多次元配列の要素を並び替える

多次元配列についてもreverseメソッドを使って並び替えを実行することができます。

JS コード例

let zoo = [
	[ 'cat', 'dog', 'mouse'],
	[ 'fox', 'rhinos', 'dolphin'],
	[ 'lion', 'horse', 'crocodile']
];

zoo.reverse();
console.log(zoo);

こちらの例では2次元配列の並び替えを行いますが、外側の要素の並びのみ反対にして、内側の「'cat', 'dog', 'mouse'」などの並びは変わりません。
もし内側の並びを反対にしたい場合は、以下のように添字(キー)を指定して内側の要素を対象にreverseメソッドを実行します。

JS コード例

let zoo = [
	[ 'cat', 'dog', 'mouse'],
	[ 'fox', 'rhinos', 'dolphin'],
	[ 'lion', 'horse', 'crocodile']
];

zoo[1].reverse();
console.log(zoo);
// 0: (3) ["cat", "dog", "mouse"]
// 1: (3) ["dolphin", "rhinos", "fox"]
// 2: (3) ["lion", "horse", "crocodile"]

ここでは配列の2つ目の要素の配列のみ並びを反対にして、「'fox', 'rhinos', 'dolphin'」から「'dolphin', 'rhinos', 'fox'」になります。
外側の要素の並びや、他の要素には影響せずに並び替えることができます。

オブジェクト(擬似的な連想配列)は並び替えできない

配列の添字(キー)は数値を使うことが多いですが、文字列を使うと擬似的な連想配列にすることができます。
しかし実際には添字(キー)を文字列にするとオブジェクトのプロパティになるため、配列の要素にはなりません。
そのため、配列のメソッドであるreverseメソッドを使っても並び替えをすることができません。

JS コード例

let animals = new Array();
animals["f"] = 'fox';
animals["b"] = 'bear';
animals["r"] = 'rhinos';

console.log(animals);
// [f: "fox", b: "bear", r: "rhinos"]

animals.reverse();
console.log(animals);
// [f: "fox", b: "bear", r: "rhinos"]

並び替えをする必要がある場合は要素の添字(キー)を数値にする必要があります。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。