トップ HTML5に関する質問 JavaScriptにおける配列の並び替えと抽出について

編集履歴

回答編集履歴

テキスト修正

2019/09/01 01:14

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -84,7 +84,17 @@
-ただし、こちらは、ご質問に挙げられているコードの `filter` する行だけではなく、その前の `sort` する処理含めて見直す案になりますので、ご質問の本題（ご質問にあるコードで、ソートした後の最新日付のデータ抽出時に、`filter`に与える関数をどう書けばいいか。）からは外れます。それゆえ、あくまでご参考に留めて頂ければと思います。
+ただし、こちらは、ご質問に挙げられているコードの `filter` する行だけではなく、その前の `sort` する処理含めて見直す案になりますので、ご質問の主題
+> ●質問内容
+上記1やりたいこと1は思うように並び替え出来た様ですが、やりたいこと2の抽出がfilterで抽出すると思うのですが、どの様に条件付ければ良いか分かりません。
+からは外れます。それゆえ、あくまでご参考に留めて頂ければと思います。

テキスト修正

2019/09/01 01:14

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -84,7 +84,7 @@
-ただし、こちらは、ご質問に挙げられているコードの `filter` する行だけではなく、その前の `sort` する処理含めて見直す案になりますので、ご質問の本題（ご質問にあるコードで、`filter`の条件をどう書けばいいか。）からは外れます。それゆえ、あくまでご参考に留めて頂ければと思います。
+ただし、こちらは、ご質問に挙げられているコードの `filter` する行だけではなく、その前の `sort` する処理含めて見直す案になりますので、ご質問の本題（ご質問にあるコードで、ソートした後の最新日付のデータ抽出時に、`filter`に与える関数をどう書けばいいか。）からは外れます。それゆえ、あくまでご参考に留めて頂ければと思います。

テキスト修正

2019/09/01 00:17

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -84,7 +84,7 @@
-ただし、こちらは、ご質問に挙げられているコードの `filter` する行だけではなく、 `sort` するところから見直しますので、ご質問の本題（ご質問にあるコードで、`filter`の条件をどう書けばいいか。）からはやや外れます。あくまで参考に留めて頂ければと思います。
+ただし、こちらは、ご質問に挙げられているコードの `filter` する行だけではなく、その前の `sort` する処理含めて見直す案になりますので、ご質問の本題（ご質問にあるコードで、`filter`の条件をどう書けばいいか。）からは外れます。それゆえ、あくまでご参考に留めて頂ければと思います。

テキスト修正

2019/09/01 00:05

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -220,4 +220,4 @@
-は、 [_.map](https://lodash.com/docs/#map) と [_.sortBy](https://lodash.com/docs/#sortBy) を使い、追記２のコードの中間生成物として、Mapを作るのを省き、コード量を減らしたものです。
+は、 [_.map](https://lodash.com/docs/#map) と [_.sortBy](https://lodash.com/docs/#sortBy) を使って、中間生成物としてMapを作っていたのを省き、コード量を減らしたものです。

テキスト修正

2019/08/31 12:33

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -212,12 +212,12 @@
-以下
+追記2 の修正版です。以下
-- [https://jsfiddle.net/jun68ykt/nu9pfvhd/2/](https://jsfiddle.net/jun68ykt/nu9pfvhd/2/)
+- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/nu9pfvhd/2/](https://jsfiddle.net/jun68ykt/nu9pfvhd/2/)
-は、 [_.map](https://lodash.com/docs/#map) と [_.sortBy](https://lodash.com/docs/#sortBy) を使って、追記２のコードから中間でMapを作るのを省き、コード量を減らしたものです。
+は、 [_.map](https://lodash.com/docs/#map) と [_.sortBy](https://lodash.com/docs/#sortBy) を使い、追記２のコードの中間生成物として、Mapを作るのを省き、コード量を減らしたものです。

テキスト修正

2019/08/31 12:31

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -212,8 +212,12 @@
+以下
+- [https://jsfiddle.net/jun68ykt/nu9pfvhd/2/](https://jsfiddle.net/jun68ykt/nu9pfvhd/2/)
- 以下は、 [_.map](https://lodash.com/docs/#map) と [_.sortBy](https://lodash.com/docs/#sortBy) を使って、追記２のコードから中間でMapを作るのを省き、コード量を減らしたものです。
+は、 [_.map](https://lodash.com/docs/#map) と [_.sortBy](https://lodash.com/docs/#sortBy) を使って、追記２のコードから中間でMapを作るのを省き、コード量を減らしたものです。
-- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/nu9pfvhd/2/](https://jsfiddle.net/jun68ykt/nu9pfvhd/2/)

テキスト修正

2019/08/31 12:01

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -205,3 +205,15 @@
 - **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/619atrpj/12/](https://jsfiddle.net/jun68ykt/619atrpj/12/)
+### 追記3
+ 以下は、 [_.map](https://lodash.com/docs/#map) と [_.sortBy](https://lodash.com/docs/#sortBy) を使って、追記２のコードから中間でMapを作るのを省き、コード量を減らしたものです。
+- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/nu9pfvhd/2/](https://jsfiddle.net/jun68ykt/nu9pfvhd/2/)

テキスト修正

2019/08/31 12:00

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -80,7 +80,11 @@
+別解を挙げます。要所要所で便利なライブラリの力を借ります。
-別解を挙げます。ただし、この別解は、ご質問に挙げられているコードの中で、 `filter` する行だけではなく、ソートするところから見直します。また、外部のライブラリの力を借りる案なので、ご質問の本題（ご質問にあるコードで、filterの条件をどう書けばいいか。）からはやや外れますから、あくまで参考に留めて頂ければと思います。
+ただし、こちらは、ご質問に挙げられているコードの `filter` する行だけではなく、 `sort` するところから見直しますので、ご質問の本題（ご質問にあるコードで、`filter`の条件をどう書けばいいか。）からはやや外れます。あくまで参考に留めて頂ければと思います。
@@ -196,7 +200,7 @@
-上記のコードでは、 各キーに対して、日付が最新の要素（である配列）を取得するときに、 [_.maxBy](https://lodash.com/docs/#maxBy) も使っています。
+上記のコードでは、 各キーに対して、日付が最新の要素（である配列）を取得するときに、Lodashの [_.maxBy](https://lodash.com/docs/#maxBy) も使っています。

テキスト修正

2019/08/31 11:12

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -180,9 +180,7 @@
 var keyToNewestDateMap = groupedEntries.reduce(
-  (map, [key, arrays]) => map.set(key, _.maxBy(arrays, ary => ary[4])
+  (map, [key, arrays]) => map.set(key, _.maxBy(arrays, ary => ary[4])), new Map());
-), new Map());
@@ -202,4 +200,4 @@
-- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/619atrpj/11/](https://jsfiddle.net/jun68ykt/619atrpj/11/)
+- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/619atrpj/12/](https://jsfiddle.net/jun68ykt/619atrpj/12/)

テキスト修正

2019/08/31 07:09

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -176,19 +176,13 @@
-// 各キーに対して、日付が最新の要素(である配列） を値とするマップを作成
+// 各キーに対して、日付が最新の要素を値とするマップを作成
 var keyToNewestDateMap = groupedEntries.reduce(
-  (map, [key, arrays]) =>
-     map.set(
-       key,
-       arrays.sort((ary1, ary2) => ary2[4].localeCompare(ary1[4])).shift()
+  (map, [key, arrays]) => map.set(key, _.maxBy(arrays, ary => ary[4])
-     ), new Map());
+), new Map());
@@ -204,4 +198,8 @@
+上記のコードでは、 各キーに対して、日付が最新の要素（である配列）を取得するときに、 [_.maxBy](https://lodash.com/docs/#maxBy) も使っています。
-- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/619atrpj/8/](https://jsfiddle.net/jun68ykt/619atrpj/8/)
+- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/619atrpj/11/](https://jsfiddle.net/jun68ykt/619atrpj/11/)

テキスト修正

2019/08/31 07:02

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -80,7 +80,7 @@
-別解を挙げます。ただし、この別解は、ご質問に挙げられているコードの中で、 `filter` する行だけではなく、ソートするところから修正する案なので、ご質問の本題（filterの条件をどう書けばいいか。）とはやや外れますので、あくまで参考に留めて頂ければと思います。
+別解を挙げます。ただし、この別解は、ご質問に挙げられているコードの中で、 `filter` する行だけではなく、ソートするところから見直します。また、外部のライブラリの力を借りる案なので、ご質問の本題（ご質問にあるコードで、filterの条件をどう書けばいいか。）からはやや外れますから、あくまで参考に留めて頂ければと思います。

テキスト修正

2019/08/31 06:26

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -172,13 +172,13 @@
 // カテゴリ1,2,3をスラッシュを区切りとして連結した文字列をキーにグループ化したオブジェクトを得て、それのエントリ配列を取得
-var entries = Object.entries(_.groupBy(arr, ary => ary.slice(0,3).join('/')));
+var groupedEntries = Object.entries(_.groupBy(arr, ary => ary.slice(0,3).join('/')));
 // 各キーに対して、日付が最新の要素(である配列） を値とするマップを作成
-var keyToNewestDateMap = entries.reduce(
+var keyToNewestDateMap = groupedEntries.reduce(
   (map, [key, arrays]) =>
@@ -204,4 +204,4 @@
-- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/619atrpj/6/](https://jsfiddle.net/jun68ykt/619atrpj/6/)
+- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/619atrpj/8/](https://jsfiddle.net/jun68ykt/619atrpj/8/)

テキスト修正

2019/08/31 06:17

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -38,7 +38,7 @@
-### 追記
+### 追記1

テキスト修正

2019/08/31 05:53

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -73,3 +73,135 @@
 - **動作確認用 jsFiddle：** [https://jsfiddle.net/jun68ykt/ao85qz0k/7/](https://jsfiddle.net/jun68ykt/ao85qz0k/7/)
+### 追記2
+別解を挙げます。ただし、この別解は、ご質問に挙げられているコードの中で、 `filter` する行だけではなく、ソートするところから修正する案なので、ご質問の本題（filterの条件をどう書けばいいか。）とはやや外れますので、あくまで参考に留めて頂ければと思います。
+配列やオブジェクトの操作で、便利なメソッドを提供しているライブラリ [Lodash](https://lodash.com/)に、 [_.groupBy](https://lodash.com/docs/#groupBy) というメソッドがあります。これを使うと配列の要素を何らかの値を基準にグルーピングしたオブジェクトを返してくれます。
+このご質問の場合、カテゴリ1、カテゴリ2、カテゴリ3、それぞれの文字列を、たとえば `/` でjoinした文字列をその基準値に使ってグループ化することが考えられます。これは以下によって実現できます。
+```javascript
+_.groupBy(arr, ary => ary.slice(0,3).join('/'))
+```
+上記の _.groupBy が返すのは、下記のようなオブジェクトです。
+```javascript
+{
+  "a/a/a":[
+    [ "a", "a", "a", 1, "2019/01/01" ],
+    [ "a", "a", "a", 1, "2019/02/02" ]
+  ],
+  "a/b/a":[
+    [ "a", "b", "a", 1, "2019/01/01" ]
+  ],
+  "b/a/a":[
+    [ "b", "a", "a", 1, "2019/01/01" ]
+  ],
+  "a/a/c":[
+    [ "a", "a", "c", 1, "2019/01/01" ]
+  ],
+  "c/a/c":[
+    [ "c", "a", "c", 1, "2019/01/01" ],
+    [ "c", "a", "c", 1, "2019/07/01" ]
+  ],
+  "b/b/b":[
+    [ "b", "b", "b", 1, "2019/01/01" ]
+  ],
+  "b/b/a":[
+    [ "b", "b", "a", 1, "2019/01/01" ]
+  ],
+  "b/a/b":[
+    [ "b", "a", "b", 1, "2019/01/01" ]
+  ]
+}
+```
+上記のように、 各カテゴリの値 `a` や `b` を `/` を区切り文字として連結した文字列が、オブジェクトのキーになり、各キーに該当する要素（である配列）が配列としてまとめられます。なお上記では、`/` を連結時の区切り文字としていますが、各カテゴリの文字列それ自体の中にも `/` が出現する可能性があるのであれば、何か他の、各カテゴリの文字列の中には出現しない文字(列)で連結します。
+以下は、上記の _.groupBy を使って `arr` から `arr2` を得るコード例です。
+```javascript
+// カテゴリ1,2,3をスラッシュを区切りとして連結した文字列をキーにグループ化したオブジェクトを得て、それのエントリ配列を取得
+var entries = Object.entries(_.groupBy(arr, ary => ary.slice(0,3).join('/')));
+// 各キーに対して、日付が最新の要素(である配列） を値とするマップを作成
+var keyToNewestDateMap = entries.reduce(
+  (map, [key, arrays]) =>
+     map.set(
+       key,
+       arrays.sort((ary1, ary2) => ary2[4].localeCompare(ary1[4])).shift()
+     ), new Map());
+// 上記で作成したマップのエントリから、キー（カテゴリを / で連結した文字列）でソートされた、値の配列を取得
+var arr2 = [...keyToNewestDateMap]
+  .sort(([key1], [key2]) => key1.localeCompare(key2))
+  .map(([_, v]) => v);
+```
+- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/619atrpj/6/](https://jsfiddle.net/jun68ykt/619atrpj/6/)

テキスト修正

2019/08/31 05:51

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -73,7 +73,3 @@
 - **動作確認用 jsFiddle：** [https://jsfiddle.net/jun68ykt/ao85qz0k/7/](https://jsfiddle.net/jun68ykt/ao85qz0k/7/)
-###

テキスト修正

2019/08/31 04:56

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -69,3 +69,11 @@
  return x[0] !== y[0] || x[1] !== y[1] || x[2] !== y[2];
 ```
+- **動作確認用 jsFiddle：** [https://jsfiddle.net/jun68ykt/ao85qz0k/7/](https://jsfiddle.net/jun68ykt/ao85qz0k/7/)
+###

テキスト修正

2019/08/31 04:55

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -35,3 +35,37 @@
 以上、参考になれば幸いです。
+### 追記
+質問への追記・修正のほうから、以下のご回答を頂きました。
+> カテゴリ値は二文字以上の文字列もあり得ます。
+上記に対応させるために、先に挙げたコードの `else` の場合の `return`文を、以下のように修正します。
+**修正前：**
+```javascript
+return `${x[0]}${x[1]}${x[2]}` !== `${y[0]}${y[1]}${y[2]}`;
+```
+**修正後：**
+```javascript
+ return x[0] !== y[0] || x[1] !== y[1] || x[2] !== y[2];
+```