トップ JavaScriptに関する質問 JavaScriptで、プロパティ値をもとにオブジェクトをソートしたい

編集履歴

回答編集履歴

テキスト修正

2018/07/28 00:52

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -200,7 +200,7 @@
-think49さんがご回答で、og24715さんがコメントでご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使ったコードを示します。`for ... of` を使ったときに、`index` の値の昇順に内容を列挙するようなMapオブジェクトを作成するには、以下のようにします。
+think49さんがご回答で、og24715さんがコメントで、それぞれご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使ったコードを示します。`for ... of` を使ったときに、`index` の値の昇順に内容を列挙するようなMapオブジェクトを作成するには、以下のようにします。

テキスト修正

2018/07/28 00:52

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -200,9 +200,7 @@
-think49さんがご回答で、og24715さんがコメントでご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使ったコードを示します。
-`for ... of` を使ったときに、`index` の値の昇順に内容を列挙するようなMapオブジェクトを作成するには、以下のようにします。
+think49さんがご回答で、og24715さんがコメントでご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使ったコードを示します。`for ... of` を使ったときに、`index` の値の昇順に内容を列挙するようなMapオブジェクトを作成するには、以下のようにします。

テキスト修正

2018/07/28 00:48

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -200,7 +200,7 @@
-他の回答者様からご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使ったコードを示します。
+think49さんがご回答で、og24715さんがコメントでご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使ったコードを示します。
 `for ... of` を使ったときに、`index` の値の昇順に内容を列挙するようなMapオブジェクトを作成するには、以下のようにします。

テキスト修正

2018/07/28 00:46

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -200,7 +200,9 @@
-他の回答者様からご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使って、`for ... of` を使ったときに、`index` の値の昇順に内容を列挙できるようなMapオブジェクトを作成するには、以下のようにします。
+他の回答者様からご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使ったコードを示します。
+`for ... of` を使ったときに、`index` の値の昇順に内容を列挙するようなMapオブジェクトを作成するには、以下のようにします。

テキスト修正

2018/07/28 00:44

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -182,7 +182,7 @@
-上記の質問の回答の中に、 [ECMAScript Third Edition (pdf)](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf) からの引用で、以下が書かれているものがあります。
+上記、質問の回答の中で[一番得票の多い回答](https://stackoverflow.com/a/5525820) では、 [ECMAScript Third Edition (pdf)](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf) からの引用で、以下が書かれています。

テキスト修正

2018/07/28 00:24

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -200,7 +200,7 @@
-他の回答者様から提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使って、`for ... of` を使ったときに、`index` の値の昇順に内容を列挙できるようなMapオブジェクトを作成するには、以下のようにします。
+他の回答者様からご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使って、`for ... of` を使ったときに、`index` の値の昇順に内容を列挙できるようなMapオブジェクトを作成するには、以下のようにします。
@@ -216,4 +216,4 @@
 ```
-上記のサンプル： [https://jsfiddle.net/jun68ykt/jug198we/2/](https://jsfiddle.net/jun68ykt/jug198we/2/)
+上記のサンプル： [https://jsfiddle.net/jun68ykt/jug198we/3/](https://jsfiddle.net/jun68ykt/jug198we/3/)

テキスト修正

2018/07/28 00:18

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -191,3 +191,29 @@
 >
 > An object is a member of the type Object. **It is an unordered collection of properties** each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.
+---
+**補足2**
+他の回答者様から提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使って、`for ... of` を使ったときに、`index` の値の昇順に内容を列挙できるようなMapオブジェクトを作成するには、以下のようにします。
+```javascript
+const sortedEntriesByIndex = Object.entries(dataObj).sort(([key1, data1], [key2, data2]) => data1.index - data2.index);
+const map = new Map(sortedEntriesByIndex);
+```
+上記のサンプル： [https://jsfiddle.net/jun68ykt/jug198we/2/](https://jsfiddle.net/jun68ykt/jug198we/2/)

テキスト修正

2018/07/28 00:17

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -14,7 +14,7 @@
 - [Object.entries()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
-- [Array.prototype.reduce()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
+- [Array.prototype.map()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
@@ -82,19 +82,13 @@
-const sortedAry = Object.entries(dataObj)
+const sortedAry =
-    .reduce(
+    Object.entries(dataObj)
-      (ary, [key, data]) => {
+           .map(([key, data]) => ({ key, ...data }))
-          ary.push({ key, ...data });
-          return(ary);
-       }, [])
-    .sort((e1, e2) => e1.index - e2.index );
+           .sort((e1, e2) => e1.index - e2.index );
@@ -102,7 +96,7 @@
 ```
-※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/36/](https://jsfiddle.net/jun68ykt/g956j2fn/36/) にも上げました。
+※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/39/](https://jsfiddle.net/jun68ykt/g956j2fn/39/) にも上げました。

テキスト修正

2018/07/27 19:31

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,9 +2,7 @@
-ソート後のデータ構造をどのように持つか用途によっていろいろ考えられそうです。
+ソート後のデータ構造をどのように持つのか、用途によっていろいろ考えられそうですが、一例としてこの回答では、元のJSONから以下のような形のオブジェクト
-一例としてこの回答では、元のJSONから以下のような形のオブジェクト
 ```javascript
@@ -77,8 +75,6 @@
     }
 }`;
@@ -188,7 +184,7 @@
-[Does JavaScript Guarantee Object Property Order?](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) (stackoverflow)
+- [Does JavaScript Guarantee Object Property Order?](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) (stackoverflow)

テキスト修正

2018/07/27 18:54

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -88,17 +88,17 @@
 const sortedAry = Object.entries(dataObj)
-	.reduce(
+    .reduce(
-		(ary, [key, data]) => {
+      (ary, [key, data]) => {
-  		ary.push( { key, ...data } );
+          ary.push({ key, ...data });
-  		return(ary);
+          return(ary);
-		} , [])
+       }, [])
-  .sort((e1, e2) => e1.index - e2.index );
+    .sort((e1, e2) => e1.index - e2.index );

テキスト修正

2018/07/27 18:48

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -80,6 +80,8 @@
 const dataObj = JSON.parse(jsonString);
@@ -100,17 +102,15 @@
- console.log(JSON.stringify(sortedAry));
+console.log(JSON.stringify(sortedAry, null, "\t"));
 ```
-※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/30/](https://jsfiddle.net/jun68ykt/g956j2fn/30/) にも上げました。
+※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/36/](https://jsfiddle.net/jun68ykt/g956j2fn/36/) にも上げました。
-これを実行すると、以下が出力されます。（改行とインデントを入れています）
+これを実行すると、以下が出力されます。
@@ -118,55 +118,55 @@
 [
-   {
+	{
-      "key":"hoge",
+		"key": "hoge",
-      "val":"val1",
+		"val": "val1",
-      "index":1
+		"index": 1
-   },
+	},
-   {
+	{
-      "key":"foo",
+		"key": "foo",
-      "val":"val2",
+		"val": "val2",
-      "index":2
+		"index": 2
-   },
+	},
-   {
+	{
-      "key":"piyo",
+		"key": "piyo",
-      "val":"val3",
+		"val": "val3",
-      "index":3
+		"index": 3
-   },
+	},
-   {
+	{
-      "key":"bar",
+		"key": "bar",
-      "val":"val4",
+		"val": "val4",
-      "index":4
+		"index": 4
-   },
+	},
-   {
+	{
-      "key":"fuga",
+		"key": "fuga",
-      "val":"val5",
+		"val": "val5",
-      "index":5
+		"index": 5
-   }
+	}
 ]

テキスト修正

2018/07/27 18:43

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -34,54 +34,52 @@
 ```javascript
-const jsonString = `{\
+const jsonString = `{
-    "hoge": {\
+    "hoge": {
-        "val": "val1",\
+        "val": "val1",
-        "index": 1\
+        "index": 1
-    },\
+    },
-    "piyo": {\
+    "piyo": {
-        "val": "val3",\
+        "val": "val3",
-        "index": 3\
+        "index": 3
-    },\
+    },
-    "fuga": {\
+    "fuga": {
-        "val": "val5",\
+        "val": "val5",
-        "index": 5\
+        "index": 5
-    },\
+    },
-    "foo": {\
+    "foo": {
-        "val": "val2",\
+        "val": "val2",
-        "index": 2\
+        "index": 2
-    },\
+    },
-    "bar": {\
+    "bar": {
-        "val": "val4",\
+        "val": "val4",
-        "index": 4\
+        "index": 4
-    }\
+    }
 }`;
 const dataObj = JSON.parse(jsonString);
@@ -108,7 +106,7 @@
 ```
-※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/28/](https://jsfiddle.net/jun68ykt/g956j2fn/28/) にも上げました。
+※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/30/](https://jsfiddle.net/jun68ykt/g956j2fn/30/) にも上げました。
@@ -194,7 +192,7 @@
-上記の質問の回答の中に、 [ECMAScript Third Edition (pdf)](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf) からの引用で、以下が書かれているものがありますので、確認されるとよろしいかと思います。
+上記の質問の回答の中に、 [ECMAScript Third Edition (pdf)](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf) からの引用で、以下が書かれているものがあります。

テキスト修正

2018/07/27 18:34

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -4,7 +4,7 @@
 ソート後のデータ構造をどのように持つか用途によっていろいろ考えられそうです。
-一例として、この回答では元のJSONから、以下のような形のオブジェクト
+一例としてこの回答では、元のJSONから以下のような形のオブジェクト
 ```javascript
@@ -12,9 +12,7 @@
 ```
-を要素とする配列を作って、これを `index` の値によってソートします。
-このような配列を作るために、
+を要素とする配列を、
 - [Object.entries()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
@@ -22,7 +20,15 @@
+によって作成し、これを `index` の値の昇順になるように、
+- [Array.prototype.sort()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
-を使います。
+を使ってソートします。以下がそのコードです。

テキスト修正

2018/07/27 18:29

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,11 +2,27 @@
-ソート後のデータ構造をどのように持つか、用途によっていろいろ考えられそうです。
+ソート後のデータ構造をどのように持つか用途によっていろいろ考えられそうです。
+一例として、この回答では元のJSONから、以下のような形のオブジェクト
-以下のコードは、[Object.entries()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) と、[Array.prototype.reduce()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)を使って、`"hoge"`, `"piyo"` ... を `key` というプロパティの値とし、 `{ val, index }` がマージされたオブジェクトの配列を得て、これをソートします。
+```javascript
+{ key: "hoge", val:"val1", index:1 }
+```
+を要素とする配列を作って、これを `index` の値によってソートします。
+このような配列を作るために、
+- [Object.entries()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
+- [Array.prototype.reduce()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
+を使います。

テキスト修正

2018/07/27 18:22

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,9 +2,11 @@
-用途により、ソート後のデータ構造をどのように持つか、いろいろ考えられそうですので、あくまで一例として、以下はいかがでしょう？
+ソート後のデータ構造をどのように持つか、用途によっていろいろ考えられそうです。
-（※下記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/20/](https://jsfiddle.net/jun68ykt/g956j2fn/20/) にも上げました。）
+以下のコードは、[Object.entries()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) と、[Array.prototype.reduce()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)を使って、`"hoge"`, `"piyo"` ... を `key` というプロパティの値とし、 `{ val, index }` がマージされたオブジェクトの配列を得て、これをソートします。
@@ -62,13 +64,13 @@
-const sortedAry = Object.keys(dataObj)
+const sortedAry = Object.entries(dataObj)
 	.reduce(
-		(ary, key) => {
+		(ary, [key, data]) => {
-  		ary.push( { key, ...dataObj[key] } );
+  		ary.push( { key, ...data } );
   		return(ary);
@@ -84,9 +86,11 @@
 ```
+※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/28/](https://jsfiddle.net/jun68ykt/g956j2fn/28/) にも上げました。
-上記を実行すると、以下が出力されます。（改行とインデントを入れています）
+これを実行すると、以下が出力されます。（改行とインデントを入れています）
@@ -156,81 +160,7 @@
 ---
-**追記1**
+**補足**
-`hoge`, `piyo`  ... をキーと呼ぶことにすると、キーを要素とする配列を作成して、
-これを、それぞれのキーに対応した `{ val ,index }` の `index` の値でソートした
-キーの配列を、以下で得ることができます。
-```javascript
-const sortedKeys = Object.keys(dataObj)
-	.sort((k1, k2) => dataObj[k1].index - dataObj[k2].index);
-// => ["hoge", "foo", "piyo", "bar", "fuga"]
-```
-上記のサンプル： [https://jsfiddle.net/jun68ykt/pkvme410/4/](https://jsfiddle.net/jun68ykt/pkvme410/4/)
----
-**追記2**
-回答の冒頭に書いた `reduce` を使うコードで、`Object.entries` を使うと、以下のようにも書けます。
-```javascript
-const jsonString = ・・・
-const dataObj = JSON.parse(jsonString);
-const sortedAry = Object.entries(dataObj)
-	.reduce(
-		(ary, [key, data]) => {
-  		ary.push( { key, ...data } );
-  		return(ary);
-		} , [])
-  .sort((e1, e2) => e1.index - e2.index );
-```
-上記のサンプル： [https://jsfiddle.net/jun68ykt/g956j2fn/27/](https://jsfiddle.net/jun68ykt/g956j2fn/27/)
----
-**追記3**

テキスト追加

2018/07/27 18:13

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -222,4 +222,32 @@
 ```
 上記のサンプル： [https://jsfiddle.net/jun68ykt/g956j2fn/27/](https://jsfiddle.net/jun68ykt/g956j2fn/27/)
+---
+**追記3**
+プレーンオブジェクトのプロパティに順序がないことについては、以下の投稿で確認されるとよいかと思います。
+[Does JavaScript Guarantee Object Property Order?](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) (stackoverflow)
+上記の質問の回答の中に、 [ECMAScript Third Edition (pdf)](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf) からの引用で、以下が書かれているものがありますので、確認されるとよろしいかと思います。
+> 4.3.3 Object
+>
+> An object is a member of the type Object. **It is an unordered collection of properties** each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.

テキスト追加

2018/07/27 04:20

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,7 +2,7 @@
-どのように使うのかによって、ソート後のデータ構造をどのように持つか、いろいろ考えられそうですので、あくまで一例として、以下はいかがでしょう？
+用途により、ソート後のデータ構造をどのように持つか、いろいろ考えられそうですので、あくまで一例として、以下はいかがでしょう？
 （※下記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/20/](https://jsfiddle.net/jun68ykt/g956j2fn/20/) にも上げました。）

テキスト追加

2018/07/27 04:09

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -198,6 +198,10 @@
 ```javascript
+const jsonString = ・・・
 const dataObj = JSON.parse(jsonString);

テキスト追加

2018/07/27 04:00

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -156,7 +156,7 @@
 ---
-**追記**
+**追記1**
@@ -183,3 +183,39 @@
 上記のサンプル： [https://jsfiddle.net/jun68ykt/pkvme410/4/](https://jsfiddle.net/jun68ykt/pkvme410/4/)
+---
+**追記2**
+回答の冒頭に書いた `reduce` を使うコードで、`Object.entries` を使うと、以下のようにも書けます。
+```javascript
+const dataObj = JSON.parse(jsonString);
+const sortedAry = Object.entries(dataObj)
+	.reduce(
+		(ary, [key, data]) => {
+  		ary.push( { key, ...data } );
+  		return(ary);
+		} , [])
+  .sort((e1, e2) => e1.index - e2.index );
+```
+上記のサンプル： [https://jsfiddle.net/jun68ykt/g956j2fn/27/](https://jsfiddle.net/jun68ykt/g956j2fn/27/)

テキスト追加

2018/07/27 03:59

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -164,7 +164,7 @@
 これを、それぞれのキーに対応した `{ val ,index }` の `index` の値でソートした
-配列を得るには、以下でOKです。
+キーの配列を、以下で得ることができます。

テキスト追加

2018/07/27 02:53

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -151,3 +151,35 @@
 以上参考になれば幸いです。
+---
+**追記**
+`hoge`, `piyo`  ... をキーと呼ぶことにすると、キーを要素とする配列を作成して、
+これを、それぞれのキーに対応した `{ val ,index }` の `index` の値でソートした
+配列を得るには、以下でOKです。
+```javascript
+const sortedKeys = Object.keys(dataObj)
+	.sort((k1, k2) => dataObj[k1].index - dataObj[k2].index);
+// => ["hoge", "foo", "piyo", "bar", "fuga"]
+```
+上記のサンプル： [https://jsfiddle.net/jun68ykt/pkvme410/4/](https://jsfiddle.net/jun68ykt/pkvme410/4/)