teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問JavaScriptで、プロパティ値をもとにオブジェクトをソートしたい

編集履歴

回答編集履歴

21

テキスト修正

2018/07/28 00:52

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -99,7 +99,7 @@
99
99
  ---
100
100
  **補足2**
101
101
 
102
- think49さんがご回答で、og24715さんがコメントでご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使ったコードを示します。`for ... of` を使ったときに、`index` の値の昇順に内容を列挙するようなMapオブジェクトを作成するには、以下のようにします。
102
+ think49さんがご回答で、og24715さんがコメントで、それぞれご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使ったコードを示します。`for ... of` を使ったときに、`index` の値の昇順に内容を列挙するようなMapオブジェクトを作成するには、以下のようにします。
103
103
 
104
104
  ```javascript
105
105
  const sortedEntriesByIndex = Object.entries(dataObj).sort(([key1, data1], [key2, data2]) => data1.index - data2.index);

20

テキスト修正

2018/07/28 00:52

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -99,8 +99,7 @@
99
99
  ---
100
100
  **補足2**
101
101
 
102
- think49さんがご回答で、og24715さんがコメントでご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使ったコードを示します。
103
- `for ... of` を使ったときに、`index` の値の昇順に内容を列挙するようなMapオブジェクトを作成するには、以下のようにします。
102
+ think49さんがご回答で、og24715さんがコメントでご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使ったコードを示します。`for ... of` を使ったときに、`index` の値の昇順に内容を列挙するようなMapオブジェクトを作成するには、以下のようにします。
104
103
 
105
104
  ```javascript
106
105
  const sortedEntriesByIndex = Object.entries(dataObj).sort(([key1, data1], [key2, data2]) => data1.index - data2.index);

19

テキスト修正

2018/07/28 00:48

投稿

jun68ykt
jun68ykt

スコア9058

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

18

テキスト修正

2018/07/28 00:46

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -99,7 +99,8 @@
99
99
  ---
100
100
  **補足2**
101
101
 
102
- 他の回答者様からご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使って、`for ... of` を使ったときに、`index` の値の昇順に内容を列挙できるようなMapオブジェクトを作成するには、以下のようにします。
102
+ 他の回答者様からご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使ったコードを示します。
103
+ `for ... of` を使ったときに、`index` の値の昇順に内容を列挙するようなMapオブジェクトを作成するには、以下のようにします。
103
104
 
104
105
  ```javascript
105
106
  const sortedEntriesByIndex = Object.entries(dataObj).sort(([key1, data1], [key2, data2]) => data1.index - data2.index);

17

テキスト修正

2018/07/28 00:44

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -90,7 +90,7 @@
90
90
 
91
91
  - [Does JavaScript Guarantee Object Property Order?](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) (stackoverflow)
92
92
 
93
- 上記の質問の回答の中に、 [ECMAScript Third Edition (pdf)](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf) からの引用で、以下が書かれているものがあります。
93
+ 上記、質問の回答の中で[一番得票の多い回答](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) からの引用で、以下が書かれています。
94
94
 
95
95
  > 4.3.3 Object
96
96
  >

16

テキスト修正

2018/07/28 00:24

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -99,7 +99,7 @@
99
99
  ---
100
100
  **補足2**
101
101
 
102
- 他の回答者様から提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使って、`for ... of` を使ったときに、`index` の値の昇順に内容を列挙できるようなMapオブジェクトを作成するには、以下のようにします。
102
+ 他の回答者様からご提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使って、`for ... of` を使ったときに、`index` の値の昇順に内容を列挙できるようなMapオブジェクトを作成するには、以下のようにします。
103
103
 
104
104
  ```javascript
105
105
  const sortedEntriesByIndex = Object.entries(dataObj).sort(([key1, data1], [key2, data2]) => data1.index - data2.index);
@@ -107,4 +107,4 @@
107
107
  const map = new Map(sortedEntriesByIndex);
108
108
 
109
109
  ```
110
- 上記のサンプル： [https://jsfiddle.net/jun68ykt/jug198we/2/](https://jsfiddle.net/jun68ykt/jug198we/2/)
110
+ 上記のサンプル： [https://jsfiddle.net/jun68ykt/jug198we/3/](https://jsfiddle.net/jun68ykt/jug198we/3/)

15

テキスト修正

2018/07/28 00:18

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -94,4 +94,17 @@
94
94
 
95
95
  > 4.3.3 Object
96
96
  >
97
- > 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.
97
+ > 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.
98
+
99
+ ---
100
+ **補足2**
101
+
102
+ 他の回答者様から提案されている [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使って、`for ... of` を使ったときに、`index` の値の昇順に内容を列挙できるようなMapオブジェクトを作成するには、以下のようにします。
103
+
104
+ ```javascript
105
+ const sortedEntriesByIndex = Object.entries(dataObj).sort(([key1, data1], [key2, data2]) => data1.index - data2.index);
106
+
107
+ const map = new Map(sortedEntriesByIndex);
108
+
109
+ ```
110
+ 上記のサンプル： [https://jsfiddle.net/jun68ykt/jug198we/2/](https://jsfiddle.net/jun68ykt/jug198we/2/)

14

テキスト修正

2018/07/28 00:17

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -6,7 +6,7 @@
6
6
  ```
7
7
  を要素とする配列を、
8
8
  - [Object.entries()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
9
- - [Array.prototype.reduce()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
9
+ - [Array.prototype.map()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
10
10
 
11
11
  によって作成し、これを `index` の値の昇順になるように、
12
12
 
@@ -40,17 +40,14 @@
40
40
 
41
41
  const dataObj = JSON.parse(jsonString);
42
42
 
43
+ const sortedAry =
43
- const sortedAry = Object.entries(dataObj)
44
+ Object.entries(dataObj)
44
- .reduce(
45
- (ary, [key, data]) => {
46
- ary.push({ key, ...data });
45
+ .map(([key, data]) => ({ key, ...data }))
47
- return(ary);
48
- }, [])
49
- .sort((e1, e2) => e1.index - e2.index );
46
+ .sort((e1, e2) => e1.index - e2.index );
50
47
 
51
48
  console.log(JSON.stringify(sortedAry, null, "\t"));
52
49
  ```
53
- ※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/36/](https://jsfiddle.net/jun68ykt/g956j2fn/36/) にも上げました。
50
+ ※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/39/](https://jsfiddle.net/jun68ykt/g956j2fn/39/) にも上げました。
54
51
  　　
55
52
  これを実行すると、以下が出力されます。
56
53
 

13

テキスト修正

2018/07/27 19:31

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,7 +1,6 @@
1
1
  こんにちは。
2
2
 
3
- ソート後のデータ構造をどのように持つか用途によっていろいろ考えられそうです。
3
+ ソート後のデータ構造をどのように持つのか、用途によっていろいろ考えられそうですが、一例としてこの回答では、元のJSONから以下のような形のオブジェクト
4
- 一例としてこの回答では、元のJSONから以下のような形のオブジェクト
5
4
  ```javascript
6
5
  { key: "hoge", val:"val1", index:1 }
7
6
  ```
@@ -39,7 +38,6 @@
39
38
  }
40
39
  }`;
41
40
 
42
-
43
41
  const dataObj = JSON.parse(jsonString);
44
42
 
45
43
  const sortedAry = Object.entries(dataObj)
@@ -93,7 +91,7 @@
93
91
 
94
92
  プレーンオブジェクトのプロパティに順序がないことについては、以下の投稿で確認されるとよいかと思います。
95
93
 
96
- [Does JavaScript Guarantee Object Property Order?](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) (stackoverflow)
94
+ - [Does JavaScript Guarantee Object Property Order?](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) (stackoverflow)
97
95
 
98
96
  上記の質問の回答の中に、 [ECMAScript Third Edition (pdf)](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf) からの引用で、以下が書かれているものがあります。
99
97
 

12

テキスト修正

2018/07/27 18:54

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -43,12 +43,12 @@
43
43
  const dataObj = JSON.parse(jsonString);
44
44
 
45
45
  const sortedAry = Object.entries(dataObj)
46
- .reduce(
46
+ .reduce(
47
- (ary, [key, data]) => {
47
+ (ary, [key, data]) => {
48
- ary.push( { key, ...data } );
48
+ ary.push({ key, ...data });
49
- return(ary);
49
+ return(ary);
50
- } , [])
50
+ }, [])
51
- .sort((e1, e2) => e1.index - e2.index );
51
+ .sort((e1, e2) => e1.index - e2.index );
52
52
 
53
53
  console.log(JSON.stringify(sortedAry, null, "\t"));
54
54
  ```

11

テキスト修正

2018/07/27 18:48

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -39,6 +39,7 @@
39
39
  }
40
40
  }`;
41
41
 
42
+
42
43
  const dataObj = JSON.parse(jsonString);
43
44
 
44
45
  const sortedAry = Object.entries(dataObj)
@@ -49,40 +50,39 @@
49
50
  } , [])
50
51
  .sort((e1, e2) => e1.index - e2.index );
51
52
 
52
- console.log(JSON.stringify(sortedAry));
53
+ console.log(JSON.stringify(sortedAry, null, "\t"));
53
-
54
54
  ```
55
- ※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/30/](https://jsfiddle.net/jun68ykt/g956j2fn/30/) にも上げました。
55
+ ※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/36/](https://jsfiddle.net/jun68ykt/g956j2fn/36/) にも上げました。
56
56
  　　
57
- これを実行すると、以下が出力されます。（改行とインデントを入れています）
57
+ これを実行すると、以下が出力されます。
58
58
 
59
59
  ```JSON
60
60
  [
61
- {
61
+ {
62
- "key":"hoge",
62
+ "key": "hoge",
63
- "val":"val1",
63
+ "val": "val1",
64
- "index":1
64
+ "index": 1
65
- },
65
+ },
66
- {
66
+ {
67
- "key":"foo",
67
+ "key": "foo",
68
- "val":"val2",
68
+ "val": "val2",
69
- "index":2
69
+ "index": 2
70
- },
70
+ },
71
- {
71
+ {
72
- "key":"piyo",
72
+ "key": "piyo",
73
- "val":"val3",
73
+ "val": "val3",
74
- "index":3
74
+ "index": 3
75
- },
75
+ },
76
- {
76
+ {
77
- "key":"bar",
77
+ "key": "bar",
78
- "val":"val4",
78
+ "val": "val4",
79
- "index":4
79
+ "index": 4
80
- },
80
+ },
81
- {
81
+ {
82
- "key":"fuga",
82
+ "key": "fuga",
83
- "val":"val5",
83
+ "val": "val5",
84
- "index":5
84
+ "index": 5
85
- }
85
+ }
86
86
  ]
87
87
  ```
88
88
 

10

テキスト修正

2018/07/27 18:43

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -16,30 +16,29 @@
16
16
  を使ってソートします。以下がそのコードです。
17
17
 
18
18
  ```javascript
19
- const jsonString = `{\
19
+ const jsonString = `{
20
- "hoge": {\
20
+ "hoge": {
21
- "val": "val1",\
21
+ "val": "val1",
22
- "index": 1\
22
+ "index": 1
23
- },\
23
+ },
24
- "piyo": {\
24
+ "piyo": {
25
- "val": "val3",\
25
+ "val": "val3",
26
- "index": 3\
26
+ "index": 3
27
- },\
27
+ },
28
- "fuga": {\
28
+ "fuga": {
29
- "val": "val5",\
29
+ "val": "val5",
30
- "index": 5\
30
+ "index": 5
31
- },\
31
+ },
32
- "foo": {\
32
+ "foo": {
33
- "val": "val2",\
33
+ "val": "val2",
34
- "index": 2\
34
+ "index": 2
35
- },\
35
+ },
36
- "bar": {\
36
+ "bar": {
37
- "val": "val4",\
37
+ "val": "val4",
38
- "index": 4\
38
+ "index": 4
39
- }\
39
+ }
40
40
  }`;
41
41
 
42
-
43
42
  const dataObj = JSON.parse(jsonString);
44
43
 
45
44
  const sortedAry = Object.entries(dataObj)
@@ -53,7 +52,7 @@
53
52
  console.log(JSON.stringify(sortedAry));
54
53
 
55
54
  ```
56
- ※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/28/](https://jsfiddle.net/jun68ykt/g956j2fn/28/) にも上げました。
55
+ ※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/30/](https://jsfiddle.net/jun68ykt/g956j2fn/30/) にも上げました。
57
56
  　　
58
57
  これを実行すると、以下が出力されます。（改行とインデントを入れています）
59
58
 
@@ -96,7 +95,7 @@
96
95
 
97
96
  [Does JavaScript Guarantee Object Property Order?](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) (stackoverflow)
98
97
 
99
- 上記の質問の回答の中に、 [ECMAScript Third Edition (pdf)](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf) からの引用で、以下が書かれているものがありますので、確認されるとよろしいかと思います。
98
+ 上記の質問の回答の中に、 [ECMAScript Third Edition (pdf)](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf) からの引用で、以下が書かれているものがあります。
100
99
 
101
100
  > 4.3.3 Object
102
101
  >

9

テキスト修正

2018/07/27 18:34

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,17 +1,20 @@
1
1
  こんにちは。
2
2
 
3
3
  ソート後のデータ構造をどのように持つか用途によっていろいろ考えられそうです。
4
- 一例として、この回答では元のJSONから、以下のような形のオブジェクト
4
+ 一例としてこの回答では、元のJSONから以下のような形のオブジェクト
5
5
  ```javascript
6
6
  { key: "hoge", val:"val1", index:1 }
7
7
  ```
8
- を要素とする配列を作って、これを `index` の値によってソートします。
9
- このような配列を作るために、
8
+ を要素とする配列を、
10
9
  - [Object.entries()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
11
10
  - [Array.prototype.reduce()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
12
11
 
13
- を使います。
12
+ によって作成し、これを `index` の値の昇順になるように、
14
13
 
14
+ - [Array.prototype.sort()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
15
+
16
+ を使ってソートします。以下がそのコードです。
17
+
15
18
  ```javascript
16
19
  const jsonString = `{\
17
20
  "hoge": {\

8

テキスト修正

2018/07/27 18:29

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,9 +1,17 @@
1
1
  こんにちは。
2
2
 
3
- ソート後のデータ構造をどのように持つか、用途によっていろいろ考えられそうです。
4
- 　　　
5
- 以下のコードは、[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 }` がマージされたオブジェクトの配列を得て、これをソートします。
3
+ ソート後のデータ構造をどのように持つか用途によっていろいろ考えられそうです。
4
+ 一例として、この回答では元のJSONから、以下のような形のオブジェクト
5
+ ```javascript
6
+ { key: "hoge", val:"val1", index:1 }
7
+ ```
8
+ を要素とする配列を作って、これを `index` の値によってソートします。
9
+ このような配列を作るために、
10
+ - [Object.entries()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
11
+ - [Array.prototype.reduce()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
6
12
 
13
+ を使います。
14
+
7
15
  ```javascript
8
16
  const jsonString = `{\
9
17
  "hoge": {\

7

テキスト修正

2018/07/27 18:22

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,7 +1,8 @@
1
1
  こんにちは。
2
2
 
3
- 用途により、ソート後のデータ構造をどのように持つか、いろいろ考えられそうですので、あくまで一例として、以下はいかがでしょう？
4
- （※下記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/20/](https://jsfiddle.net/jun68ykt/g956j2fn/20/) にも上げました。）
3
+ ソート後のデータ構造をどのように持つか、用途によっていろいろ考えられそうです。
4
+ 　　　
5
+ 以下のコードは、[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 }` がマージされたオブジェクトの配列を得て、これをソートします。
5
6
 
6
7
  ```javascript
7
8
  const jsonString = `{\
@@ -30,10 +31,10 @@
30
31
 
31
32
  const dataObj = JSON.parse(jsonString);
32
33
 
33
- const sortedAry = Object.keys(dataObj)
34
+ const sortedAry = Object.entries(dataObj)
34
35
  .reduce(
35
- (ary, key) => {
36
+ (ary, [key, data]) => {
36
- ary.push( { key, ...dataObj[key] } );
37
+ ary.push( { key, ...data } );
37
38
  return(ary);
38
39
  } , [])
39
40
  .sort((e1, e2) => e1.index - e2.index );
@@ -41,9 +42,10 @@
41
42
  console.log(JSON.stringify(sortedAry));
42
43
 
43
44
  ```
45
+ ※上記のコードと同じものを、[https://jsfiddle.net/jun68ykt/g956j2fn/28/](https://jsfiddle.net/jun68ykt/g956j2fn/28/) にも上げました。
46
+ 　　
47
+ これを実行すると、以下が出力されます。（改行とインデントを入れています）
44
48
 
45
- 上記を実行すると、以下が出力されます。（改行とインデントを入れています）
46
-
47
49
  ```JSON
48
50
  [
49
51
  {
@@ -77,45 +79,8 @@
77
79
  以上参考になれば幸いです。
78
80
 
79
81
  ---
80
- **追記1**
82
+ **補足**
81
83
 
82
- `hoge`, `piyo` ... をキーと呼ぶことにすると、キーを要素とする配列を作成して、
83
- これを、それぞれのキーに対応した `{ val ,index }` の `index` の値でソートした
84
- キーの配列を、以下で得ることができます。
85
-
86
- ```javascript
87
- const sortedKeys = Object.keys(dataObj)
88
- .sort((k1, k2) => dataObj[k1].index - dataObj[k2].index);
89
-
90
- // => ["hoge", "foo", "piyo", "bar", "fuga"]
91
- ```
92
-
93
- 上記のサンプル： [https://jsfiddle.net/jun68ykt/pkvme410/4/](https://jsfiddle.net/jun68ykt/pkvme410/4/)
94
-
95
- ---
96
- **追記2**
97
-
98
- 回答の冒頭に書いた `reduce` を使うコードで、`Object.entries` を使うと、以下のようにも書けます。
99
-
100
- ```javascript
101
- const jsonString = ・・・
102
-
103
- const dataObj = JSON.parse(jsonString);
104
-
105
- const sortedAry = Object.entries(dataObj)
106
- .reduce(
107
- (ary, [key, data]) => {
108
- ary.push( { key, ...data } );
109
- return(ary);
110
- } , [])
111
- .sort((e1, e2) => e1.index - e2.index );
112
- ```
113
-
114
- 上記のサンプル： [https://jsfiddle.net/jun68ykt/g956j2fn/27/](https://jsfiddle.net/jun68ykt/g956j2fn/27/)
115
-
116
- ---
117
- **追記3**
118
-
119
84
  プレーンオブジェクトのプロパティに順序がないことについては、以下の投稿で確認されるとよいかと思います。
120
85
 
121
86
  [Does JavaScript Guarantee Object Property Order?](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) (stackoverflow)

6

テキスト追加

2018/07/27 18:13

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -110,4 +110,18 @@
110
110
  } , [])
111
111
  .sort((e1, e2) => e1.index - e2.index );
112
112
  ```
113
- 上記のサンプル： [https://jsfiddle.net/jun68ykt/g956j2fn/27/](https://jsfiddle.net/jun68ykt/g956j2fn/27/)
113
+
114
+ 上記のサンプル： [https://jsfiddle.net/jun68ykt/g956j2fn/27/](https://jsfiddle.net/jun68ykt/g956j2fn/27/)
115
+
116
+ ---
117
+ **追記3**
118
+
119
+ プレーンオブジェクトのプロパティに順序がないことについては、以下の投稿で確認されるとよいかと思います。
120
+
121
+ [Does JavaScript Guarantee Object Property Order?](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) (stackoverflow)
122
+
123
+ 上記の質問の回答の中に、 [ECMAScript Third Edition (pdf)](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf) からの引用で、以下が書かれているものがありますので、確認されるとよろしいかと思います。
124
+
125
+ > 4.3.3 Object
126
+ >
127
+ > 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.

5

テキスト追加

2018/07/27 04:20

投稿

jun68ykt
jun68ykt

スコア9058

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

4

テキスト追加

2018/07/27 04:09

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -98,6 +98,8 @@
98
98
  回答の冒頭に書いた `reduce` を使うコードで、`Object.entries` を使うと、以下のようにも書けます。
99
99
 
100
100
  ```javascript
101
+ const jsonString = ・・・
102
+
101
103
  const dataObj = JSON.parse(jsonString);
102
104
 
103
105
  const sortedAry = Object.entries(dataObj)

3

テキスト追加

2018/07/27 04:00

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -77,7 +77,7 @@
77
77
  以上参考になれば幸いです。
78
78
 
79
79
  ---
80
- **追記**
80
+ **追記1**
81
81
 
82
82
  `hoge`, `piyo` ... をキーと呼ぶことにすると、キーを要素とする配列を作成して、
83
83
  これを、それぞれのキーに対応した `{ val ,index }` の `index` の値でソートした
@@ -90,4 +90,22 @@
90
90
  // => ["hoge", "foo", "piyo", "bar", "fuga"]
91
91
  ```
92
92
 
93
- 上記のサンプル： [https://jsfiddle.net/jun68ykt/pkvme410/4/](https://jsfiddle.net/jun68ykt/pkvme410/4/)
93
+ 上記のサンプル： [https://jsfiddle.net/jun68ykt/pkvme410/4/](https://jsfiddle.net/jun68ykt/pkvme410/4/)
94
+
95
+ ---
96
+ **追記2**
97
+
98
+ 回答の冒頭に書いた `reduce` を使うコードで、`Object.entries` を使うと、以下のようにも書けます。
99
+
100
+ ```javascript
101
+ const dataObj = JSON.parse(jsonString);
102
+
103
+ const sortedAry = Object.entries(dataObj)
104
+ .reduce(
105
+ (ary, [key, data]) => {
106
+ ary.push( { key, ...data } );
107
+ return(ary);
108
+ } , [])
109
+ .sort((e1, e2) => e1.index - e2.index );
110
+ ```
111
+ 上記のサンプル： [https://jsfiddle.net/jun68ykt/g956j2fn/27/](https://jsfiddle.net/jun68ykt/g956j2fn/27/)

2

テキスト追加

2018/07/27 03:59

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -81,7 +81,7 @@
81
81
 
82
82
  `hoge`, `piyo` ... をキーと呼ぶことにすると、キーを要素とする配列を作成して、
83
83
  これを、それぞれのキーに対応した `{ val ,index }` の `index` の値でソートした
84
- 配列を得るには、以下でOKです。
84
+ キーの配列を、以下で得ることができます。
85
85
 
86
86
  ```javascript
87
87
  const sortedKeys = Object.keys(dataObj)

1

テキスト追加

2018/07/27 02:53

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -74,4 +74,20 @@
74
74
  ]
75
75
  ```
76
76
 
77
- 以上参考になれば幸いです。
77
+ 以上参考になれば幸いです。
78
+
79
+ ---
80
+ **追記**
81
+
82
+ `hoge`, `piyo` ... をキーと呼ぶことにすると、キーを要素とする配列を作成して、
83
+ これを、それぞれのキーに対応した `{ val ,index }` の `index` の値でソートした
84
+ 配列を得るには、以下でOKです。
85
+
86
+ ```javascript
87
+ const sortedKeys = Object.keys(dataObj)
88
+ .sort((k1, k2) => dataObj[k1].index - dataObj[k2].index);
89
+
90
+ // => ["hoge", "foo", "piyo", "bar", "fuga"]
91
+ ```
92
+
93
+ 上記のサンプル： [https://jsfiddle.net/jun68ykt/pkvme410/4/](https://jsfiddle.net/jun68ykt/pkvme410/4/)