【Javascript-標準ライブラリ】Filterを使う

Filterとは

filter() メソッドは、この配列の中から、提供された関数で実装されたテストに合格した要素のみを抽出するJSの標準ライブラリになります。

イメージ

配列の中から条件に合うものだけ再代入をします

for文で回す方法

上から判定していき、条件にあったものを代入していく
以下の例は
1.["大谷","松坂","ダルビッシュ","菊池"]
2.カタカナかどうかを判定するための正規表現を作る
3.要素の大谷","松坂","ダルビッシュ","菊池"を１つずつ判定して、trueになったものを
newArrayという別な配列にプッシュしていく

let pitcher = ["大谷","松坂","ダルビッシュ","菊池"]
let newArray = []
let regex = /^[ァ-ヶー ]*$/
for (let i=0;i < pitcher.length;i++){
	console.log(regex.test(pitcher[i]))
	if(regex.test(pitcher[i])){
  	newArray.push(pitcher[i])
  }
}
console.log(newArray)

結果

filterを用いる方法

filterを使えば"大谷","松坂","ダルビッシュ","菊池"を順番に判定することなく
条件に合っている要素のみを、再代入してくれる

let pitcher = ["大谷","松坂","ダルビッシュ","菊池"]
let regex = /^[ァ-ヶー ]*$/

pitcher = pitcher.filter(function(element){
	return regex.test(element)
})
console.log(pitcher)

結果

ここでみていただくと
1.for文を記述することないのでコードが削減できる
2.配列を新たに用意することなく、配列の中身を判定することができる
というメリットがあります

色々なパターン

##　オブジェクトに対して条件に合うキーバリューを再代入
1.同じようにカタカナを抽出する正規表現を作成
2.同じようにfilterで絞るけれども、itemを.nameにするだけ

let a = [
  { name: "大谷", speed: 165, controll: "C" },
  { name: "ダルビッシュ", speed: 155, controll: "B" },
  { name: "佐々木", speed: 165, controll: "B" },
  { name: "山本", speed: 159, controll: "B" },
  { name: "田中", speed: 156, controll: "A" }
];

let katakanaRegex = /^[ァ-ヶー ]*$/; // カタカナの正規表現

let filteredArray = a.filter(item => katakanaRegex.test(item.name));

console.log(filteredArray);

結果

ちなみにforを使うと。。

let a = [{name:"大谷",speed:165,controll:"C"},{name:"ダルビッシュ",speed:155,controll:"B"},{name:"佐々木",speed:165,controll:"B"},{name:"山本",speed:159,controll:"B"},{name:"田中",speed:156,controll:"A"}]

let regex = /^[ァ-ヶー ]*$/

for(let i=0;a.length;i++){
	regex.test(a[i])
}

console.log(a)

結果

パターン1 オブジェクトと配列を比較して、配列に含まれているものがあれば、再代入

let a = [
  { name: "大谷", speed: 165, controll: "C" },
  { name: "ダルビッシュ", speed: 155, controll: "B" },
  { name: "佐々木", speed: 165, controll: "B" },
  { name: "山本", speed: 159, controll: "B" },
  { name: "田中", speed: 156, controll: "A" }
];

let b = ["B", "D", "E"];

a = a.filter(item => b.includes(item.controll));

console.log(a);

パターン2 オブジェクトとオブジェクトを比較して、片方のオブジェクトに含まれているものがあれば、再代入

let a = [
  { name: "大谷", speed: 165, controll: "C" },
  { name: "ダルビッシュ", speed: 155, controll: "B" },
  { name: "佐々木", speed: 165, controll: "B" },
  { name: "山本", speed: 159, controll: "B" },
  { name: "田中", speed: 156, controll: "A" }
];

let b = { controll: "B", speed: 165 };

let filteredArray = a.filter(item => {
  for (let key in b) {
    if (item[key] !== b[key]) {
      return false;
    }
  }
  return true;
});

console.log(filteredArray);

パターン4 オブジェクトに対して存在している配列にあれば再代入

let a = [
  { name: "大谷", speed: 165, controll: "C" },
  { name: "ダルビッシュ", speed: 155, controll: "B" },
  { name: "佐々木", speed: 165, controll: "B" },
  { name: "山本", speed: 159, controll: "B" },
  { name: "田中", speed: 156, controll: "A" }
];

let b = { controll: "B", speed: 165 };

let filteredArray = a.filter(item => {
  for (let key in b) {
    if (item[key] !== b[key]) {
      return false;
    }
  }
  return true;
});

console.log(filteredArray);