javascript filterの使い方

Question

###前提・実現したいこと
filterを使って配列の中身から、適した要素を抽出したいのですが、うまくいきません。
初歩的な質問で失礼しますが、どなたかご教示をお願いします。

let boxs = {
	a:"aaa",
	b:"bbb",
	c:"ccc",
	d:"ddd",
	e:"eee"	
};

//console.log(boxs.a);

var result = boxs.filter(function(value,index,array){
	return boxs[value] === "ccc";
})

console.log(result);

###達成したいこと
boxs配列の中の”ccc”の文字列を持つものだけを　var resultに格納したい。
つまり、

results = {
    c:"ccc",
};

にしたいのですが、どうすれば良いのでしょうか。

Answer 1

boxsがそもそも配列ではなくオブジェクトだからです。

Comments

[think49]

いわんとすることは分かりますが、配列もObject型の一つなので、その説明では誤解を生むかも知れません。
「new Array ではなく、new Object だから」といったところでしょうか。

Answer 2

cccに合致するのは一つとは限らない
たとえばこう

var boxs = {
a:"aaa",
b:"bbb",
c:"ccc",
c2:"ccc",
d:"ddd",
e:"eee",
};
var res={};
Array.prototype.map.call(Object.keys(boxs),function(x){
  if(boxs[x]=="ccc") res[x]=boxs[x];
});

console.log(res);

追記

上記ロジックを利用してObjectを拡張して汎用的に結果を得る
ただしprototypeの拡張は推奨されないことが多い

var boxs = {
a:"aaa",
b:"bbb",
c:"ccc",
c2:"ccc",
d:"ddd",
e:"eee",
};

Object.prototype.myfilter=function(val){
  var res={};
  var self=this;
  Array.prototype.map.call(Object.keys(this),function(x){
    if(self[x]==val) res[x]=self[x];
  });
  return res;
};
console.log(boxs.myfilter("ccc"));

Comments

[think49]

> Array.prototype.map.call(Object.keys(boxs),function(x){
Object.keysの返り値は配列なので、Function#callは不要な気がします。
また、mapはforEach相当の用途で使われていますが、reduceに変更すると洗練されるかもしれません。

[yambejp]

think49さん、ありがとうございます
確かにそうですね
途中で仕様を調整したので無駄が多くなっています。
あとで推敲してみます

Answer 3

プロパティの名前と値

期待通りに動作しない原因は、既に指摘があるように「配列ではないから(Array.prototypeを継承していないから)」ですが、下記コードを読むに

var result = boxs.filter(function(value,index,array){
    return boxs[value] === "ccc";
})

プロパティ名とプロパティ値の関係性を理解しておられない実感があります。
オブジェクトの「プロパティ名」に対して、「プロパティ値」を指定してしまっています。

Object.keys

一つの解決法としては、Object.keys を使う方法があります。

1. Object.keys を使用して配列化
2. Array.prototype.filter でキーを抽出
3. Array.prototype.map で配列の要素に戻す

for 文、while文、for-of文でも同様の動作を実現出来ます。

new Map

new Map には Map.prototype.forEach がありますので、オブジェクト初期化子よりは配列よりとして扱いやすいと思います。
残念ながら、 Map.prototype.filter は存在しないので、コードを自作する必要はありますが。

Re: ho_ri さん

Comments

[holic]

'プロパティ名とプロパティ値の関係性を理解しておられない実感があります。'
ご指摘のとおりでございます、
基礎的な部分ですが、指摘していただき、理解が出来ました。ありがとうございます。