【JavaScript】配列から条件に合う要素を取り出す

Tweet

Category JavaScript 2021/11/15

問題

オブジェクトの配列Aとオブジェクトの配列Bがあって、配列Aの要素のオブジェクトの中であるプロパティが配列Bのいずれかの要素のあるプロパティと一致しているものだけを取り出したいです。

例えば、配列Aは授業の一覧で、配列Bが履修している授業のコードの一覧で、配列Bを利用して配列Aから履修している授業だけの一覧を取り出したい　という感じです。

答え

泥臭くというか、素直にforを使うと以下のようになる。

let A = [{id:"1", name:"数学"}, {id:"2", name:"国語"}, {id:"3", name:"英語"}, {id:"4", name:"理科"}, {id:"5", name:"社会"}]
let B = [{id:2}, {id:3}, {id:5}]

let a = [];
for (let i = 0; i < A.length; ++i) {
	for (let j = 0; j < B.length; ++j) {
		if (A[i].id == B[j].id) {
			a.push(A[i]);
		}
	}
}
console.log(a)

// Array(3) [ {…}, {…}, {…} ]
​// 0: Object { id: "2", name: "国語" }
​// 1: Object { id: "3", name: "英語" }
​// 2: Object { id: "5", name: "社会" }

Aから条件に合うものを取り出したいのでfilter()、Bの中に条件を満たしているものが1つ以上あるか知りたいのでsome()を使うと以下のようになる。

let A = [{id:"1", name:"数学"}, {id:"2", name:"国語"}, {id:"3", name:"英語"}, {id:"4", name:"理科"}, {id:"5", name:"社会"}]
let B = [{id:2}, {id:3}, {id:5}]

let a = A.filter(function(x){
	return B.some(function(y){
		return x.id == y.id
	})
})
console.log(a)

// Array(3) [ {…}, {…}, {…} ]
​// 0: Object { id: "2", name: "国語" }
​// 1: Object { id: "3", name: "英語" }
​// 2: Object { id: "5", name: "社会" }

vueのcomputedなどで使うとコンパクトに書けて処理も高速でよい。

メモ

filter() も some() もIE9以降で対応している。ある程度古い環境に配慮が必要な場合でも使って大丈夫。