LoginSignup
14
13

More than 1 year has passed since last update.

@na-takedain株式会社永和システムマネジメント

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

Posted at

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

やりたいこと

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

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' ]
14
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
13