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

# Filterとは
filter() メソッドは、この配列の中から、提供された関数で実装されたテストに合格した要素のみを抽出するJSの標準ライブラリになります。
# イメージ
配列の中から条件に合うものだけ再代入をします
#### for文で回す方法
![スクリーンショット 2023-05-29 21.07.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714631/62c20ff8-beb9-7b24-4941-83123f5156b6.png)
上から判定していき、条件にあったものを代入していく
以下の例は
1.["大谷","松坂","ダルビッシュ","菊池"]
2.カタカナかどうかを判定するための正規表現を作る
3.要素の大谷","松坂","ダルビッシュ","菊池"を１つずつ判定して、trueになったものを
newArrayという別な配列にプッシュしていく
```js
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)
```
結果
![スクリーンショット 2023-05-29 21.16.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714631/c61c5828-7b34-c722-02d8-14a795919dc8.png)

#### filterを用いる方法
![スクリーンショット 2023-05-29 21.07.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714631/ca710f01-c7ff-e6db-8513-2119ab5742dd.png)
filterを使えば"大谷","松坂","ダルビッシュ","菊池"を順番に判定することなく
条件に合っている要素のみを、再代入してくれる
```js
let pitcher = ["大谷","松坂","ダルビッシュ","菊池"]
let regex = /^[ァ-ヶー ]*$/

pitcher = pitcher.filter(function(element){
	return regex.test(element)
})
console.log(pitcher)
```
結果
![スクリーンショット 2023-05-29 21.16.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714631/6f738c20-8b17-2253-c106-db50ac2e01a4.png)

ここでみていただくと
1.for文を記述することないのでコードが削減できる
2.配列を新たに用意することなく、配列の中身を判定することができる
というメリットがあります
# 色々なパターン
##　オブジェクトに対して条件に合うキーバリューを再代入
1.同じようにカタカナを抽出する正規表現を作成
2.同じようにfilterで絞るけれども、itemを.nameにするだけ
```js
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);
```
結果
![スクリーンショット 2023-05-29 21.33.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714631/3997751e-c396-1b64-ef79-4d8542856f78.png)
ちなみにforを使うと。。
```js
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)
```
結果
![スクリーンショット 2023-05-29 21.33.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/714631/3997751e-c396-1b64-ef79-4d8542856f78.png)

## パターン1 オブジェクトと配列を比較して、配列に含まれているものがあれば、再代入
```js
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 オブジェクトとオブジェクトを比較して、片方のオブジェクトに含まれているものがあれば、再代入
```js
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 オブジェクトに対して存在している配列にあれば再代入
```js
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);
```