JavaScriptでオブジェクト（連想配列）の配列を操作する

<b>JavaScriptで連想配列（関数を取り扱わないオブジェクト）の配列の編集方法をまとめてみました。連想配列の配列の形で受け取ったデータを、編集するための資料です。</b>
# やりたいこと
- <b>[条件に合致するデータを複数（すべて）抽出する](#条件に合致するデータを複数抽出)
  - 条件を1行で記述できる場合<font color="SandyBrown">　_filter_</font>
  - 条件を複数行で記述する場合<font color="SandyBrown">　_filter_</font>
  - 配列の中の配列を条件にする場合<font color="SandyBrown">　_filter+some, filter+every_</font>
- <b>[条件に合致するデータを1件抽出する](#条件に合致するデータを1件抽出)
  - 条件を1行で記述できる場合<font color="SandyBrown">　_find_</font>
  - 条件を複数行で記述する場合<font color="SandyBrown">　_find_</font>
- <b>[連想配列を編集して新しい配列や連想配列を作る](#連想配列を編集して新しい配列や連想配列を作る)
  - 必要な項目を配列で出力<font color="SandyBrown">　_map_</font>
  - 必要な項目を連想配列で出力 <font color="SandyBrown">_map_</font>
- <b>[複数条件（条件が配列）に合致するデータを抽出する](#複数条件に合致するデータを抽出（条件が配列）)
  - 複数条件のいずれかに合致するデータを抽出する<font color="SandyBrown">　_filter + some_</font>
  - 複数条件のいずれかに合致するデータを、条件毎の配列で抽出する。<font color="SandyBrown">　_forEach + filter_</font>
- <b>[その他](#その他)
  - 重複するデータを除いた連想配列を作る<font color="SandyBrown">　_Set + map_</font>
  - 関数をつなげてみる（メソッドチェーン）<font color="SandyBrown">　_.filter.map_</font>


## 使用する連想配列の配列のデータ 
``` js
const persons = [
  { id: 130, name: "Hanako", age: 19, country: "Japan",
    hobys :[ { hoby: "travel" }, { hoby: "fieldwork" } ] },
  { id: 111, name: "Taro", age: 26, country: "Japan",
    hobys :[ { hoby: "anime" } ] },
  { id: 115, name: "Mike", age: 31, country: "America",
    hobys :[ { hoby: "karate" }, { hoby: "soccer" } ] },
  { id: 222, name: "Honfa", age: 26, country: "China",
    hobys :[ { hoby: "anime" }, { hoby: "travel" } ] },
  { id: 201, name: "Janet", age: 23, country: "America",
    hobys :[ { hoby: "piano" }, { hoby: "anime" } ] },
]
``` 
## 条件に合致するデータを複数抽出
filter：条件に合致する（trueになる）データをすべて抽出
some：配列の項目のどれか一つが条件に合致したらtrueを返す
every：配列の項目のすべてが条件に合致したらtrueを返す

   <b> ・条件を1行で記述できる場合<font color="SandyBrown">　_filter_</font></b>
 　例： countryがJapanのデータを抽出する場合
``` js:コード
let test = persons.filter( p => p.country === "Japan")
console.log(test)
```
``` js:実行結果
[
  { id: 130, name: 'Hanako', age: 19, country: 'Japan',
    hobys: [ { hoby: "travel" }, { hoby: "fieldwork" } ]        
  }
  { id: 111, name: 'Taro', age: 26, country: 'Japan',
    hobys: [ { hoby: "anime" } ]
  },
]
// 実際のconsole.logの結果はhobys:[ [Object], [Object] ]のように出力されます。
```
  - <b>条件を複数行で記述する場合<font color="SandyBrown">　_filter_</font></b>
 　例： countryがJapanかつ配列の偶数番目のデータを抽出する場合
``` js:コード
let test = persons.filter((o, index) => { 
//personsのデータが１件ずつoに渡され、ifの条件に合致したらtrueを返す
  if(p.country === "Japan" &&
     index % 2 === 0) {
    return true
  }
})
console.log(test)
```
``` js:実行結果
[
  { id: 130, name: "Hanako", age: 19, country: "Japan",
    hobys :[ { hoby: "travel" }, { hoby: "fieldwork" } ] }
]
// 実際のconsole.logの結果はhobys:[ [Object], [Object] ]のように出力されます。
```
  - <b>連想配列の中の配列を条件にする場合 
　　配列項目のどれか合致　 _<font color="SandyBrown">filter+some</font>_</b>
例：hobyにtravelを含む人を抽出 
``` js:コード
let test = persons.filter( p => p.hobys.some( h => h.hoby === 'travel'))
console.log(test)
```
``` js:実行結果
[
  { id: 130, name: "Hanako", age: 19, country: "Japan",
    hobys :[ { hoby: "travel" }, { hoby: "fieldwork" } ] },
  { id: 222, name: "Honfa", age: 26, country: "China",
    hobys :[ { hoby: "anime" }, { hoby: "travel" } ] }
]
// 実際のconsole.logの結果はhobys:[ [Object], [Object] ]のように出力されます。
```
　　<b>配列の項目とすべて合致 　_<font color="SandyBrown">filter+every</font>_</b>
例：hobyがanimeだけの人を抽出 
``` js:コード
let test = persons.filter( p => p.hobys.every( h => h.hoby === 'anime'))
console.log(test)
```
``` js:実行結果
[
  { id: 111, name: "Taro", age: 26, country: "Japan",
    hobys :[ { hoby: "anime" } ] }
]
// 実際のconsole.logの結果はhobys:[ [Object], [Object] ]のように出力されます。
```
＊filterを実行すると、結果が1件でも配列で返却される事に注意！！
上の結果からnameのデータを出力する場合は[0]が必要
```js:
console.log(test[0].name) //taro
```
## 条件に合致するデータを1件抽出
find：条件に合致する（trueになる）データを１件抽出（条件に合致する最初データ）

  - <b>条件を1行で記述できる場合　<font color="SandyBrown">_find_</font></b>
例：ageが20歳より上の人を１件抽出 
``` js:コード
let test = persons.find( p => p.age > 20)
console.log(test)
```
``` js:実行結果
  { id: 111, name: "Taro", age: 26, country: "Japan",
    hobys :[ { hoby: "anime" } ] }
```
＊findの実行結果は、配列ではないので、[0]は不要
```js:
console.log(test.name) //taro
```
  - <b>条件を複数行で記述する場合<font color="SandyBrown">　_find_</font></b>
例：countryがAmericaで配列の偶数番目のデータを１件抽出する場合
``` js:コード
test = persons.find((o, index) => {  
  if(p.country === "America" &&
     index % 2 === 0) {
    return true
  }
})
console.log(test)
```
``` js:実行結果
{
  id: 115, name: 'Mike', age: 31, country: 'America',
  hobys: [ { hoby: 'karate' }, { hoby: 'soccer' } ]
}
```
## 連想配列を編集して新しい配列や連想配列を作る
  - <b>必要な項目を配列で出力<font color="SandyBrown">　_map_</font></b>
例）nameとcountryの配列を作る

``` js:コード
let test = persons.map(p => [p.name, p.country])
console.log(test)
``` 
``` js:実行結果
[
  [ 'Hanako', 'Japan' ],
  [ 'Taro', 'Japan' ],
  [ 'Mike', 'America' ],
  [ 'Honfa', 'China' ],
  [ 'Janet', 'America' ]
]
``` 

  - <b>必要な項目を連想配列で出力<font color="SandyBrown">　_map_</font></b>
例：nameとcountryの連想配列を作る
``` js:コード
let test = persons.map(p => ({
  name: p.name,
  country: p.country}))
console.log(test)
``` 
``` js:実行結果
[
  { name: 'Hanako', country: 'Japan' },  
  { name: 'Taro', country: 'Japan' },    
  { name: 'Mike', country: 'America' },  
  { name: 'Honfa', country: 'China' },   
  { name: 'Janet', country: 'America' }  
]
``` 
## 複数合致するデータを抽出（条件が配列）
## 条件で使用する配列
```js:
const countries = ['America', 'China', 'Canada']
```
  - <b>複数条件のいずれかに合致するデータを抽出する<font color="SandyBrown">　_filter+some_</font></b>
例：countries(America,China,Canada)のいずれかに合致するcountryをもつデータを抽出する
``` js:コード
let test = persons.filter(p => countries.some(c => p.country === c))
console.log(test)
``` 
```js:実行結果
 [
  { id: 115, name: "Mike", age: 31, country: "America",
    hobys :[ { hoby: "karate" }, { hoby: "soccer" } ] },
  { id: 222, name: "Honfa", age: 26, country: "China",
    hobys :[ { hoby: "anime" }, { hoby: "travel" } ] },
  { id: 201, name: "Janet", age: 23, country: "America",
    hobys :[ { hoby: "piano" }, { hoby: "anime" } ] },
]
// 実際のconsole.logの結果はhobys:[ [Object], [Object] ]のように出力されます。
```
  - <b>複数条件のいずれかに合致するデータを、条件毎の配列で抽出する。<font color="SandyBrown">　_forEach+filter_</font></b>
例：countries(America,China,Canada)のいずれかに合致するcountryをもつデータを、
　国ごとの配列にして抽出する
``` js:コード
let test = []
countries.forEach(c => {
  let person = (persons.filter(p => p.country === c))
  // 対象データが無い場合はpushしない
  person.length ? test.push(person) : ""
}) 
console.log(test)
``` 
```js:実行結果
[[
  { id: 115, name: "Mike", age: 31, country: "America",
    hobys :[ { hoby: "karate" }, { hoby: "soccer" } ] },
  { id: 201, name: "Janet", age: 23, country: "America",
    hobys :[ { hoby: "piano" }, { hoby: "anime" } ] },
]
[
  { id: 222, name: "Honfa", age: 26, country: "China",
    hobys :[ { hoby: "anime" }, { hoby: "travel" } ] },
]]
// 実際のconsole.logの結果はhobys:[Array]のように出力されます。
```
## その他
  - <b>重複するデータを除いた配列を作る<font color="SandyBrown">　_Set + map_</font></b>
例：countryの一覧を配列で出力（重複を除く）
```js:コード
let test= [...new Set(persons.map(p => p.country))]
console.log(test)
```
＜説明＞
　1\. mapでcountryだけの配列を作成　//[ 'Japan', 'Japan', 'America', 'China', 'America' ]
　2. Setで重複した要素を取り除く　//{ 'Japan', 'America', 'China' }
　3. "..."スプレッド演算子で、配列に変換
```js:実行結果
[ 'Japan', 'America', 'China' ]
```
  - <b>関数をつなげてみる（メソッドチェーン<font color="SandyBrown">　_.filter.map_</font></b> 
例：countryがJapanの人の名前を配列で出力
```js:コード
let test= persons.filter(p => p.country === "Japan").map(m => m.name)
console.log(test)
```
＜説明＞
　・filterで対象データを抽出し、抽出したデータを使ってmapで必要なフィールドの配列を作成
```js:実行結果
[ 'Mike', 'Janet' ]
```