jQueryオブジェクトから、指定キーの値が空であることの判定

Question

###実現したいこと
下記fruitsというオブジェクトの●_priceの値を見て、x_price以外が全て空だ。ということを判定したいです。

###該当のソースコード
こちらになります。a_priceとb_priceの値が空だということを判定したいということになります。

尚、状況によってはc_priceがあったりしますので、●_priceの名前は不定です。x_priceだけはこの名前で変化ありません。

// 対象となるオブジェクト
var fruits = {
	name    : "apple",
	a_price : "",
	b_price : "",
	x_price : ""
};

###試したこと
Object.keysでキーを取得し、.mapを使って●_priceのキーだけを抽出しているつもりでpriceArrという配列を作りましたが、undefinedの値が入るばかりで…ここから先に進めません。

お手伝い頂けましたら宜しくお願い致します。

// 対象となるオブジェクト
var fruits = {
	name    : "apple",
	a_price : "",
	b_price : "",
	x_price : ""
};

// ●_priceの配列を作る
const priceArr = Object.keys(fruits).map(function(value, index) { value.match(/_price$/) } );
console.log(priceArr); // undefinedの配列が作られてしまう

// 空であることを判定したい
if( $.isEmptyObject(priceArr) ) {
	console.log('x_price以外の●_priceが全て空です');
}

Answer 1

こんにちは

このご質問の場合、Object.keys()　よりも、Object.entries() のほうが、キーだけではなく、キーと値のペアを配列で取得できるので、便利かと思います。

たとえば、以下

const result = Object.entries(fruits)
                 .filter(([key]) => key.endsWith('_price') && key !== 'x_price')
                 .every(([_, value]) => !value );

のようにすると、x_price をのぞく、末尾が _priceで終わるプロパティが

• すべて空文字列（などの falsyな値）であった場合に、result に true が入り、
• そうではない場合、すなわち、x_price をのぞく、末尾が _priceで終わるプロパティのうち、ひとつでも空文字列ではない（あるいは何らかの truthy な値である）場合は result に false が入ります。

以下、動作確認用に CodePenに上記のコードを作成しました。

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/yLBRKvm?editors=0011

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

追記

ご質問に書かれている、 Object.keys() から始めるやり方の一例を以下に挙げます。

// ●_priceの配列を作る (x_price はのぞく)
const priceArr = Object.keys(fruits).filter((key) => key.endsWith('_price') && key !== 'x_price');

// 上記で作成したキーの配列の各要素の fruits での値の配列を作成
const priceValues = priceArr.map(key => fruits[key]);

// すべてが空文字列であるかを判定
const result = priceValues.every(price => !price);

• **動作確認用CodePen: ** https://codepen.io/jun68ykt/pen/ZEzqozW?editors=0011

Comments

[kuroean]

こんにちは！いつも大変お世話になっております。

なるほど。『Object.entries() 』ですか。今回も新たなテクニックをどうもありがとうございます。

『endsWith()』というのは、質問にあるような『 .matchの正規表現で最後にドルマークをつけること』のと一緒の意味ですか？便利ですね。

そして『every』も初めてみました。こちらは『map』みたいなものでしょうか。

いつも引出しの豊富さにおどろくばかりです。夜分遅くにどうもありがとうございました。

[kuroean]

追記まで…感謝です（／д≦）

[jun68ykt]

どういたしまして。

> 質問にあるような『 .matchの正規表現で最後にドルマークをつけること』のと一緒の意味ですか？

はい。同じです。対になるメソッドとして「・・・で始まる」のほう、正規表現でいえば ^ と同じことを判定するのは、startsWithです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

> いつも引出しの豊富さにおどろくばかりです。

ありがとうございます。

実はもうひとつありますので、以下ななめ読みで眺めて頂ければと思います。

ご質問に書かれているコードに

　$.isEmptyObject
　が true なら、
　x_price以外の●_priceが全て空です
　を表示する。

という if 文がありましたが、このような判定のために、$.isEmptyObject() の引数に渡すオブジェクトを、
fruitsから作ることを考えます。

それには fruits から、以下のいずれかの条件を満たすエントリ（キーと値の組）を除去すればよいです。

- キーが "_price" で終わっていない。

- キーが "x_price" である。

- 値が空文字列である。

上記３つのいずれかを満たすエントリをfruitsから抜き取っていって、出来上がったオブジェクトを
obj として、 obj が空オブジェクトであれば、つまり
$.isEmptyObject(obj)　が true であれば、x_price以外の●_priceが全て空ということになります。

では、 fruits から上記のいずれかを満たすエントリを抜く、という操作をどのようにやればよいかというと、配列やオブジェクトの操作で便利な ライブラリ lodash の omitBy を使います。

https://lodash.com/docs/#omitBy

以下は、これを使ったサンプルです。

https://codepen.io/jun68ykt/pen/bGbmMgb?editors=0011

lodash はちょっと凝ったことをやろうとするときに色々と便利です。

[jun68ykt]

そういえば前回のご質問で、コメントから
「イキったコードを書こうと悪戦苦闘するのがよろしいかもしれません。」
と、やや投げっぱなコメントを差し上げましたね。その後いかがお過ごしですか？（微笑）

[kuroean]

>lodash の omitBy を使います
引き出しがすごいですｗｗそちらのライブラリひょっとしてかなり便利なのでは。いろいろな処理が『_.』のコードでわかりやすく書けそうですね。ありがとうございます。

>その後いかが
たしかあの翌日は .map と .filter で少し遊んで覚えた気になっていたのですが、カラオケばかりであまりプログラミングの時間がとれず笑、一夜漬けした歴史の年号みたいに忘れてしまっていますｗどうか長い目で…

[jun68ykt]

こんにちは。

> どうか長い目で…

No Problem ですよ〜 ????

> そちらのライブラリひょっとしてかなり便利なのでは。

はい。Lodash は何かと便利です。たくさんのメソッドがありますが、これは便利そうと思ったものから少しずつ使ってみればよいかと思います。Qiita にも 、「Lodash をこんな風に使ってます」という内容の記事が多数あります。

すみません、おせっかいついでに、もう一つだけ。

ご質問に挙げられているコードの中に

value.match(/_price$/)

という正規表現を使ったマッチ検証があります。
上記は "_price" で終わる文字列にマッチするので、除外したい "x_price" にもマッチしてしまいますね。
そこで

"x_price" にはマッチさせず、それ以外の "_price" で終わる文字列にはマッチする

という正規表現を作るには？ということになりますが、それには否定後読み（negative look-behind）というのを使います。以下はこれを使った正規表現です。

/^.*(?<!^x)_price$/

上記の (?<!^x) の部分が否定後読みです。
以下は上記を使ったサンプルです。

https://codepen.io/jun68ykt/pen/vYBVvjb?editors=0011

他にも同種のものとして

・(肯定)先読み（look-ahead）： (?=正規表現)
・否定先読み（negative look-ahead）： (?!正規表現)
・(肯定)後読み（look-behind）： (?<=正規表現)

などがあります。

今回も色々詰め込みすぎてしまいましたので、ぜひカラオケ????へどうぞ

[kuroean]

否定語読み。またすごいの出てきましたね。

「?<!」の部分が、「^x」（先頭がxであること）を否定する感じでしょうか。

そしてその手前に「^.*」（先頭がどんな文字でもOK）があることで、「●_price」を許可する。

と。なるほど。便利そうです。

パンク寸前ですが「こういうものがある」と知っているだけで調べるきっかけや方向性が見えますので、ご指導たいへんありがたく存じます。

どうもありがとうございました！

[jun68ykt]

どういたしまして。また次回、回答させて頂く機会を楽しみにしております。草々