【JavaScript】「配列」を順に取り出す方法をまとめてみた

こんにちは、さち です。

「JavaScript」を使っているときに、「配列」「連想配列」の中身（「キー」「値」）を順番に取り出したいことがあります。

ただ、取り出す方法にはたくさんの種類があり、それぞれの「使い方」の理解があやふやだったります。

いい機会なので、ちゃんと勉強して記事にまとめてみます。

ループ文「for」

for(初期値; ループ条件; i++)

一番基本的なループ。「インデックス」番号を変えていくことで、「配列」の「値」を順番に取り出します。

サンプルコード

let arr = [
  'スリーズブーケ',
  'DOLLCHESTRA',
  'みらくらぱーく！'
];

for(let i=0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

実行結果

for(値 of 配列)

「配列」の「値」を順番に取り出します。

サンプルコード

let arr = [
  'スリーズブーケ',
  'DOLLCHESTRA',
  'みらくらぱーく！'
];

for(let val of arr) {
  console.log(val);
}

// 「連想配列」に使う場合
let obj = {
  kozue  : 'マーメイドグリーン',
  tsuzuri: 'ボクの赤',
  megumi : 'エンジェルホワイト'
}

for(let [key, val] of Object.entries(obj)) {
  console.log(key, val);
}

実行結果

for(キー in 連想配列)

「連想配列」の「キー」を順番に取り出します。

サンプルコード

let obj = {
  kozue  : 'マーメイドグリーン',
  tsuzuri: 'ボクの赤',
  megumi : 'エンジェルホワイト'
}

for(let key in obj) {
  console.log(key, obj[key]);
}

「配列」にも使用できます。

実行結果

配列の「メソッド」

【forEach】 「値」「インデックス」を取得

「配列」の「値」「インデックス」を順番に取り出します。

サンプルコード

let arr = [
  'スリーズブーケ',
  'DOLLCHESTRA',
  'みらくらぱーく！'
];

arr.forEach((val, i)=> {
  console.log(val, i);
});

「インデックス」が不要な場合は「第2引数 i 」の記述は省略できます。

実行結果

【filter】 「条件」に合う「値」を取得

「配列」の「値」を順番に取り出し、「条件」に合うものをすべて返します。

サンプルコード

let arr = [
  { name: 'Kozue',  age: 18 },
  { name: 'Megumi', age: 18 },
  { name: 'Kaho',   age: 17 }
];

let adult = arr.filter((member)=> member.age >= 18);

console.log(adult);

基本的に、アロー関数の { } は省略して記述します。

省略しない場合は、(member)=> { return member.age >= 18; } のように return が必要です。

実行結果

[
  { name: 'Kozue', age: 18 },
  { name: 'Megumi', age: 18 }
]

【find】 「条件」に合う「最初」の「値」を取得

「配列」の「値」を順番に取り出し、「条件」に合う最初の1個だけを返します。

サンプルコード

let arr = [
  { name: 'Kozue',  age: 18 },
  { name: 'Megumi', age: 18 },
  { name: 'Kaho',   age: 17 }
];

let graduate = arr.find((member)=> member.age >= 18);

console.log(graduate);

基本的に、アロー関数の { } は省略して記述します。

省略しない場合は、(member)=> { return member.age >= 18; } のように return が必要です。

実行結果

【map】 「値」を取得して別の配列を作る

「配列」の「値」を順番に取り出し、処理をした結果を返します。

サンプルコード

let arr = [
  { name: 'Kozue', age: 18 },
  { name: 'Kaho',  age: 17 },
  { name: 'Ginko', age: 16 }
];

let names = arr.map((member)=> member.name);

console.log(names);

基本的に、アロー関数の { } は省略して記述します。

省略しない場合は、(member)=> { return member.name; } のように return が必要です。

実行結果

まとめ

ここまで紹介した「ループ文」「メソッド」の使い方を簡単にまとめました。サクッと一覧で見たいときにどうぞ。

// for
for(let i=0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

// for of（「配列」から「値」を取得）
for(let val of arr) {
  console.log(val);
}
for(let [key, val] of Object.entries(obj)) {
  console.log(key, val);
}

// for in（「連想配列」から「キー」を取得）
for(let key in obj) {
  console.log(key, obj[key]);
}

// forEach（「配列」から「値」「インデックス」を取得）
arr.forEach((val, i)=> {
  console.log(val, i);
});

// filter（「配列」から「条件」に合う「値」を取得）
let new_arr = arr.filter((val)=> val < 100);

// find（「配列」から「条件」に合う「最初」の「値」を取得）
let one_val = arr.find((val)=> val < 100);

// map（「配列」から「値」を取り出して「加工」して取得）
let new_arr = arr.map((val)=> val * 1.1 );