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

JavaScriptで連想配列（関数を取り扱わないオブジェクト）の配列の編集方法をまとめてみました。連想配列の配列の形で受け取ったデータを、編集するための資料です。

やりたいこと

• 条件に合致するデータを複数（すべて）抽出する
  • 条件を1行で記述できる場合　filter
  • 条件を複数行で記述する場合　filter
  • 配列の中の配列を条件にする場合　filter+some, filter+every
• 条件に合致するデータを1件抽出する
  • 条件を1行で記述できる場合　find
  • 条件を複数行で記述する場合　find
• 連想配列を編集して新しい配列や連想配列を作る
  • 必要な項目を配列で出力　map
  • 必要な項目を連想配列で出力 map
• 複数条件（条件が配列）に合致するデータを抽出する
  • 複数条件のいずれかに合致するデータを抽出する　filter + some
  • 複数条件のいずれかに合致するデータを、条件毎の配列で抽出する。　forEach + filter
• その他
  • 重複するデータを除いた連想配列を作る　Set + map
  • 関数をつなげてみる（メソッドチェーン）　.filter.map

使用する連想配列の配列のデータ

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を返す

・条件を1行で記述できる場合　filter
　例： countryがJapanのデータを抽出する場合

コード

let test = persons.filter( p => p.country === "Japan")
console.log(test)

実行結果

[
  { 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] ]のように出力されます。

• 条件を複数行で記述する場合　filter
  　例： countryがJapanかつ配列の偶数番目のデータを抽出する場合

コード

let test = persons.filter((o, index) => { 
//personsのデータが１件ずつoに渡され、ifの条件に合致したらtrueを返す
  if(p.country === "Japan" &&
     index % 2 === 0) {
    return true
  }
})
console.log(test)

実行結果

[
  { id: 130, name: "Hanako", age: 19, country: "Japan",
    hobys :[ { hoby: "travel" }, { hoby: "fieldwork" } ] }
]
// 実際のconsole.logの結果はhobys:[ [Object], [Object] ]のように出力されます。

• 連想配列の中の配列を条件にする場合
  　　配列項目のどれか合致　 filter+some
  例：hobyにtravelを含む人を抽出

コード

let test = persons.filter( p => p.hobys.some( h => h.hoby === 'travel'))
console.log(test)

実行結果

[
  { 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] ]のように出力されます。

　　配列の項目とすべて合致 　filter+every
例：hobyがanimeだけの人を抽出

コード

let test = persons.filter( p => p.hobys.every( h => h.hoby === 'anime'))
console.log(test)

実行結果

[
  { id: 111, name: "Taro", age: 26, country: "Japan",
    hobys :[ { hoby: "anime" } ] }
]
// 実際のconsole.logの結果はhobys:[ [Object], [Object] ]のように出力されます。

＊filterを実行すると、結果が1件でも配列で返却される事に注意！！
上の結果からnameのデータを出力する場合は[0]が必要

console.log(test[0].name) //taro

条件に合致するデータを1件抽出

find：条件に合致する（trueになる）データを１件抽出（条件に合致する最初データ）

• 条件を1行で記述できる場合　find
  例：ageが20歳より上の人を１件抽出

コード

let test = persons.find( p => p.age > 20)
console.log(test)

実行結果

  { id: 111, name: "Taro", age: 26, country: "Japan",
    hobys :[ { hoby: "anime" } ] }

＊findの実行結果は、配列ではないので、[0]は不要

console.log(test.name) //taro

• 条件を複数行で記述する場合　find
  例：countryがAmericaで配列の偶数番目のデータを１件抽出する場合

コード

test = persons.find((o, index) => {  
  if(p.country === "America" &&
     index % 2 === 0) {
    return true
  }
})
console.log(test)

実行結果

{
  id: 115, name: 'Mike', age: 31, country: 'America',
  hobys: [ { hoby: 'karate' }, { hoby: 'soccer' } ]
}

連想配列を編集して新しい配列や連想配列を作る

• 必要な項目を配列で出力　map
  例）nameとcountryの配列を作る

コード

let test = persons.map(p => [p.name, p.country])
console.log(test)

実行結果

[
  [ 'Hanako', 'Japan' ],
  [ 'Taro', 'Japan' ],
  [ 'Mike', 'America' ],
  [ 'Honfa', 'China' ],
  [ 'Janet', 'America' ]
]

• 必要な項目を連想配列で出力　map
  例：nameとcountryの連想配列を作る

コード

let test = persons.map(p => ({
  name: p.name,
  country: p.country}))
console.log(test)

実行結果

[
  { name: 'Hanako', country: 'Japan' },  
  { name: 'Taro', country: 'Japan' },    
  { name: 'Mike', country: 'America' },  
  { name: 'Honfa', country: 'China' },   
  { name: 'Janet', country: 'America' }  
]

複数合致するデータを抽出（条件が配列）

条件で使用する配列

const countries = ['America', 'China', 'Canada']

• 複数条件のいずれかに合致するデータを抽出する　filter+some
  例：countries(America,China,Canada)のいずれかに合致するcountryをもつデータを抽出する

コード

let test = persons.filter(p => countries.some(c => p.country === c))
console.log(test)

実行結果

 [
  { 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] ]のように出力されます。

• 複数条件のいずれかに合致するデータを、条件毎の配列で抽出する。　forEach+filter
  例：countries(America,China,Canada)のいずれかに合致するcountryをもつデータを、
  　国ごとの配列にして抽出する

コード

let test = []
countries.forEach(c => {
  let person = (persons.filter(p => p.country === c))
  // 対象データが無い場合はpushしない
  person.length ? test.push(person) : ""
}) 
console.log(test)

実行結果

[[
  { 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]のように出力されます。

その他

• 重複するデータを除いた配列を作る　Set + map
  例：countryの一覧を配列で出力（重複を除く）

コード

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. "..."スプレッド演算子で、配列に変換

実行結果

[ 'Japan', 'America', 'China' ]

• 関数をつなげてみる（メソッドチェーン　.filter.map
  例：countryがJapanの人の名前を配列で出力

コード

let test= persons.filter(p => p.country === "Japan").map(m => m.name)
console.log(test)

＜説明＞
　・filterで対象データを抽出し、抽出したデータを使ってmapで必要なフィールドの配列を作成

実行結果

[ 'Mike', 'Janet' ]