jQuery連想配列で、指定した値がある階層から、別の値を取り出したい

Question

###実現したいこと
以下lisから指定条件をクリアする階層のboxの値を取得したいです。

var lis = [
  { width:20, height:20, box:'box20' },
  { width:50, height:50, box:'box50' },
];

###発生している問題
たとえば「widthが30以上」という条件ならbox50がほしいのですが、box50でなく{ width:50, height:50, box:'box50' }がまるごと返ってきてしまいます。

###該当のソースコード
下記のようにreturn elem.box;としているのにまるごとその階層のオブジェクトが返ってきてしまいます。しかもきちんとコンソールでelem.boxは「box50」ですというのは出ているのですが、なぜなのでしょうか。

var result = $.grep(lis,function(elem, i) {
  if(elem.width > 30){
  	console.log('elem.boxは「' + elem.box + '」です');
  	return elem.box;
  }
});
console.log(result); 

###試したこと
上記しましたがコンソールで値を確認してもできないので、いったんgrepはやめて他のを試しました。

しかし以下filterでできす。

var result = lis.filter(function(elem, i){
  if(elem.width > 30){
  	return elem.box;
  }
});
console.log(result); 

さらに以下forEachでもできず。

var result = lis.forEach( function(elem, i){
  if(elem.width > 30){
  	return elem.box;
  }
});
console.log(result); 

打つ手なしといった状況です。

もちろん、resultからresult[0]['box']とすれば取り出せますが、そうでなくresultの時点でbox50を取り出したいのです。

わかる方いらっしゃったら宜しくお願い致します！

###追記
kei344様にご指摘頂きました点を追記させて頂きます。

できれば「30以上で、一番小さいもの」がいいと思っています。例えば以下なら「box31」を取り出すことができましたら！

var lis = [
 { width:20, height:20, box:'box20' },
 { width:50, height:50, box:'box50' },
 { width:31, height:50, box:'box31' },
]; 

Comments

[kei344]

複数合致する場合はどう処理するつもりなのでしょう。先頭だけ？

[tefu-tefu]

たしかにそうですね。不手際すみません。
できれば「30以上で、一番小さいもの」がいいと思っています。例えば以下なら「box31」を取り出すことができましたら！

var lis = [
{ width:20, height:20, box:'box20' },
{ width:50, height:50, box:'box50' },
{ width:31, height:50, box:'box31' },
];

[kei344]

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。

Answer 1

いろいろ方法は在ると思いますが一例。

var lis = [
{ width:20, height:20, box:'box20' },
{ width:50, height:50, box:'box50' },
{ width:31, height:50, box:'box31' },
]; 
var res = ( lis.sort( ( a, b )=>  a.width - b.width ).find( v => v.width > 30 ) || { box: '' } ).box;
console.log( res, lis );

【Array.prototype.sort() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

【Array.prototype.find() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Comments

[tefu-tefu]

どうもありがとうございます。filterはともかくsortは初見で、しかもそれらをつなげるとは画期的でとても勉強になりました。

[kei344]

filterじゃなくfindですよ。

[tefu-tefu]

危なかったです…だからsortが役に立つのですね。filterでどういう仕組みでできるのかと悩んでいましたｗご親切にありがとうございます。