jQuery配列ソートで、「ソートした後に値を取得」ではなく「ソートしつつ値も取得」という処理はできませんでしょうか？

###目的と現状
目的は「priceでソートされたnameの取得」という機能です。

現状として、下記コードは次の流れでその機能を実装しています。

priceでソート
ソートされた配列からnameだけ取得

###ご質問
この1と2を一気にやることはできませんでしょうか？

一気にというのは、1と2のようなステップを踏まず、「priceでソートしてそのnameを取得」という処理を一気にやるというイメージです。

妙案がございましたら、皆様のご意見をたまわりたく存じます。

// 配列
var fruits = [
   {name:"apple",price:100},
   {name:"orange",price:98},
   {name:"banana",price:50},
   {name:"melon",price:500},
   {name:"mango",price:398}
]

// 1. priceでソート
fruits.sort(function(a,b){
    if(a.price<b.price) return -1;
    if(a.price > b.price) return 1;
    return 0;
});
console.log(fruits); 

// 2. ソートされた配列からnameだけ取得
var arr=[];
$.each(fruits, function(index, value) {
    arr.push(value.name);
});
console.log(arr);

oikashinoa

2019/08/12 09:12

> この1と2を一気にやることはできませんでしょうか？なんで一度にやりたいのか（または困っている理由）を書くと回答つきやすいです。

Zuishin

2019/08/12 09:43

バブルソートならできますが、遅いですよ。

退会済みユーザー

2019/08/12 10:08

> 一気にというのは、1と2のようなステップを踏まず、「priceでソートしてそのnameを取得」という処理を一気にやるというイメージです。どういう意味でしょうか？

kuroean

2019/08/12 12:11

解決いたしました。情報不足などお詫びいたします。アドバイスどうもありがとうございました。

行動規範の内容に同意します

回答2件

ベストアンサー

こんにちは

ご質問のタイトルにある、

ソートしつつ値も取得

とまではいきませんが、ご質問の本文中にある、

一気に

というのを、一つの文で、と解釈すれば、 fruits.sort(･･･) の後に、 .map を続けて以下のように書けます。

var arr = fruits.sort(
    function(a,b){
        if(a.price<b.price) return -1;
        if(a.price > b.price) return 1;
        return 0;
    }).map(e => e.name);

**動作確認用： ** https://jsfiddle.net/jun68ykt/zk93cfnL/3/

ご質問の本題とは関係ありませんが、 sort に与えている比較関数は、比較対象の２つが異なる場合に、1 か -1 のいずれかを返さなければいけないわけではなく、正か負の数を返せばよい（※追記参照）ので、以下のように書けます。

javascript
1function(a ,b) {
2  return a.price - b.price;
3}

さらに上記はアロー関数を使えば、

javascript
1(a, b) => a.price - b.price

と書けるので、arr を得る処理は以下のように書けます。

javascript
1var arr = fruits.sort((a, b) => a.price - b.price).map(e => e.name);

**動作確認用： ** https://jsfiddle.net/jun68ykt/zk93cfnL/4/

以上、参考になれば幸いです。

追記

MDN の Array.prototype.sort() の説明を読んでいくと、比較関数について、以下のように書かれています。

文字列の代わりに数字を比較する場合、比較関数は単純に a から b を引けばよいでしょう。次のように比較関数を定義すれば昇順に並べることが出来ます(Infinity や NaNがなければですが)。

function compareNumbers(a, b) {
  return a - b;
}

投稿2019/08/12 11:33

編集2019/08/12 11:56

jun68ykt

総合スコア9058

kuroean

2019/08/12 12:09

お世話になってます。今回もまた丁寧なご回答に感謝いたします。ただしく理解していないのでこういうケースでの簡略化がまったくできません。いきなり最後のコードだと焦りましたが、一歩ずつのご説明ほんとうに助かりました。どうもありがとうございます。

jun68ykt

2019/08/12 14:25

どういたしまして。 > ただしく理解していないのでこういうケースでの簡略化がまったくできません。とのことで、 > まったくできません。とおっしゃっている現状から着実に前に進めるよう、以下、お伝え申し上げます。コードを書いていると以下のような状況はよくありますね。・何かある配列 a があって、この a の各要素 e に対して、ある何らかの処理 f を行った結果の値を持つ配列b を得たい。今回の例でいうと、 a と f は以下です。・元の配列 a: price でソートされた fruits ・何らかの処理 f: aの各要素 e の name プロパティの値を取り出す。つまり function (e) { return e.name; } これらによって、配列 b (ご質問のコードでは arr ) を作るということになります。このときに、ご質問のコードに var arr=[]; とあるように、まず　var b = []; と b に空配列を代入しておいて、 a に対するループを for (var i=0; i < a.length; i ++ ) だったり、ご質問に挙げられているコードにあるような $.each だったりで回して、ループが一回、回るごとに、ループの本体で、　b.push( f(e) ); とするのは基本のやり方で、これが悪いというわけではありません。特に基本の for ループがちゃんと間違いなく書けることは前提の基礎ですが、ひとまず、それは出来たとしましょう。それで、次のステップに行こうとするならば、次にこのような状況があったときに、いつものやり方で　var b =[]; と書こうとした手をはたと止めて、「ひょっとして、これ、 map でいけるのでは･･･？」と思いつき、最後まで書き切れるか自信がなくても　var b = a.map(e => まで、とにかく書いてしまって、=> の後に何を書けばいいかは、書いてから悩むようにします。これをやっていると、初めは違和感があるかもしれませんが、練習しているうちに、ご質問のような状況のときに　var arr = fruits.sort(･･･).map( まで自然に書ける（＝指が勝手に走って打ってる的な感じ）ようになります。配列の処理で > こういうケースでの簡略化をするための便利なメソッドは、 map のほかにも forEach , filter, reduce, find , some, every など色々あります。こういったメソッドをなるべく使おうとしてみるとよいのですが、とはいえ、こういったメソッドがあることを知って、ドキュメントを読み、Qiita の関連記事なども目を通し、「使いこなせれば便利そうなのは分かったけれども、実際、使いこなせるようになるにはどうしたらいい？」みたいな疑問で壁にぶつかった場合は、その疑問をそのまま、ここでご質問されてみるとよいでしょう。きっと一家言ある回答者の方々が様々なアドバイスを下さると思いますよ。私見を言わせて頂ければ、もし、kuroean　さんが配列の for ループだったり $.each でループを回すコードを書いている現状から、 map などの先に挙げたメソッドを使って簡略化されたコードがスラスラ出てくる段階に行こうとして、色々試みたけれども、思うように上達しないということになった場合、その原因は、頂いたコメントにある > ただしく理解していないという点が、（今後、発展的なことをやろうとすればするほど）ネックになってくるかもしれませんね。そうすると、「では、正しい理解とは何か？」「正しい理解は何から得られるか？」「逆に何からは得られないか？」みたいなことを考えざるを得なくなります。そのようなことを考えて、（より）正しい理解に到達しようとして試行錯誤することは価値があります。そのようなときに、先達にアドバイスを求めることは、もちろんよいのですが、こういう類いの問題は、人から言われてもピンとこなかったりもするので、まずはご自身が「理解が曖昧なままでは、この先一歩も進めない」ということを実感できるまで、map など先ほどあげたようなメソッドを使い倒して（いわば）イキったコードを書こうと悪戦苦闘するのがよろしいかもしれません。最後はなんだか投げっぱになってしまいましたので、このコメントに対して何かご質問などあれば、コメント頂ければと思います。

kuroean

2019/08/12 15:23

>とにかく書いてしまって、=> の後に何を書けばいいかは、書いてから悩むようにします。なるほどと思いました。いつもその「とりあえずmapと書いてみる」を敬遠していたのですが、一歩進むためのすごく実践的なアドバイスですね。 >便利なメソッドは…色々あります。ありがとうございます。ざっと拝見してきました。「機会っぽいぞ」と思ったときには「とりあえず書いてみる」に挑戦してみたいと思います。 >「使いこなせれば便利そうなのは分かったけれども、実際、使いこなせるようになるにはどうしたらいい？」 >（今後、発展的なことをやろうとすればするほど）ネックになってくるかもしれませんね。 >こういう類いの問題は、人から言われてもピンとこなかったりもするわたしの頭の中みたんですか？ｗほんと仰る通りで、いつもちょっと難しそうなメソッドが必要そうなタイミングで躓いては周囲に聞いています。 >まずはご自身が「理解が曖昧なままでは、この先一歩も進めない」ということを実感できるまで、map など先ほどあげたようなメソッドを使い倒してですね。まず書いてみる。「機会っぽいぞ」と思ったら書いちゃう。書いちゃいます。またもや貴重なお勉強タイムをどうもありがとうございます。今夜はとりあえず教えて頂いたメソッドのうち、今回のmapだけ、とりあえず事例を探して簡単なものを書いて、今後の「機会っぽいぞ」に気づけるようにしておきます。誰に諭されるかって、モチベーションに大きく寄与しますね！いつも親切に、どうもありがとうございます！

jun68ykt

2019/08/13 12:44

ご返信ありがとうございます。 > 今回のmapだけ、とりあえず事例を探して簡単なものを書いて、今後の「機会っぽいぞ」に気づけるようにしておきます。はい。まずはひとつを確実に手に入れるために > 簡単なものを書いて、今後の「機会っぽいぞ」に気づけるようにしておくなど、ご自身でいろいろやってみるとよいでしょう。ちなみに map 使ったサンプルで一番簡単なのは？といえば、コレ [1, 2, 3, 4, 5].map(e => e) ですかね、同じ要素を返すということで。他には [1, 2, 3, 4, 5].map(e => 0) だったりとか。あと、 map に与える関数は、第二引数も取れるので、コレ ['a' ,'a', 'a', 'a'].map( (e, i) => i ) とか。それでは、kuroeanさんのスキルアップに Good Luck をお祈り申し上げます。

行動規範の内容に同意します

初心者マークが付いていることからmapを知らないと
判断しましたので以下のように回答します。

js
1var fruits = [
2  {name:"apple",price:100},
3  {name:"orange",price:98},
4  {name:"banana",price:50},
5  {name:"melon",price:500},
6  {name:"mango",price:398}
7]
8var arr = fruits.sort(function(a,b) {
9  if(a.price<b.price) return -1;
10  if(a.price > b.price) return 1;
11  return 0
12}).map(function(value) {
13  return value.name
14})
15console.log(arr)
16// ["banana", "orange", "apple", "mango", "melon"]