JavaScript で配列要素を出力する

JavaScript の配列要素を出力するには、各値を1行ずつ表示する方法、配列全体を表示する方法、書式を整えた文字列を作る方法があります。1行ずつ出力するにはインデックス付きループまたは forEach を使い、配列全体を確認するには console.log() を使います。番号や任意の区切り文字を付ける場合は、map() と join() を組み合わせます。選んだ値には slice()、配列の結合には concat() を使えます。pop() と shift() も値を返しますが、元の配列からその値を取り除きます。

ループと forEach で要素を1行ずつ出力する

インデックス付きの for ループでは、各値とその位置に直接アクセスできます。while ループでも、ループの前にインデックスを初期化し、繰り返すたびに増やせば同じことができます。各値に簡単な処理を行うなら、現在の要素（必要に応じてそのインデックスも）を受け取るコールバックを forEach に渡します。どちらの方法でも、console.log() を呼び出すたびに値を1つずつ出力できます。

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
names.forEach((name) => console.log(name));

mehvish
tahir
aftab
martell

後続の処理でインデックスが必要な場合や、反復方法を細かく制御したい場合は、インデックス付きループを選びましょう。配列の各要素を処理するだけなら、forEach のほうが簡潔です。forEach の戻り値は undefined で、変換後の配列は作成しません。

console.log() で配列全体を出力する

配列そのものを console.log() に渡すと、1回の呼び出しで全要素を確認できます。デバッグには便利ですが、表示されるのは実行環境のコンソールによる表現であり、ブラウザーと Node.js では配列の表示形式が異なることがあります。プログラムの別の箇所で一定の形式の文字列が必要なら、代わりに join() で値を変換してください。

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names);

[ 'mehvish', 'tahir', 'aftab', 'martell' ]

console.log() は console のメソッドです。一方、forEach、map、および後述する変換メソッドは配列のメソッドです。コンソールの表示は、ファイルやネットワークデータに使うシリアライズ形式ではありません。

要素を文字列に整形したり番号を付けたりする

map() でラベルの新しい配列を作り、join() でそれらを1つの文字列にまとめます。コールバックには要素と0から始まるインデックスが渡されるため、インデックスに1を足せば人が読みやすい番号を付けられます。map() は元の配列を変更せず、join() は文字列を返します。

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
const numberedNames = names.map((name, index) => `${index + 1}. ${name}`);
console.log(numberedNames.join(' | '));

1. mehvish | 2. tahir | 3. aftab | 4. martell

カンマ区切りの文字列でよければ、toString() メソッドで配列を文字列に変換できます。要素の間にはカンマが使われ、区切り文字は指定できません。join() メソッドなら、空白や縦棒など、区切り文字を選べます。どちらも文字列を返すだけで、それ自体では出力しません。表示するには戻り値を console.log() に渡します。これら3つのリファレンスページ（toString()、join()、および次の節で紹介する slice()）は、いずれも英語です。

slice() で選んだ要素を出力する

slice(start, end) を呼び出すと、配列の一部分の浅いコピーが作られます。その戻り値を出力してください。開始インデックスは範囲に含まれ、終了インデックスは含まれません。そのため、slice(0, 2) は先頭の2要素を選びます。slice() は元の配列から値を取り除きません。

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names.slice(0, 2));

[ 'mehvish', 'tahir' ]

選んだ値は元の順序のままです。同様のインデックス引数を使う文字列メソッドについては、slice() のリファレンスを参照してください。ここでは配列に対して使っています。

concat() で配列を結合する

concat() を使うと、呼び出し元の配列の要素に、引数で渡した配列の要素を続けた新しい配列を作れます。結果をそのまま出力して確認するか、区切り文字を指定した文字列にしたい場合は join() を呼び出します。どちらの入力配列も変更されません。

const fruitsArrayOne = ['apple', 'banana', 'grapes'];
const fruitsArrayTwo = ['mango', 'water-melon'];
const combined = fruitsArrayOne.concat(fruitsArrayTwo);
console.log(combined.join(', '));

apple, banana, grapes, mango, water-melon

結合順序に注意してください。.concat() の前にある配列の要素が結果の先頭に並びます。このメソッドには、個別の値や複数の配列を引数として渡すこともできます。

配列の端の要素を出力して取り除く

最後の要素を取得して取り除くには pop()、最初の要素には shift() を使います。どちらも元の配列を変更し、取り除いた値を返します。その値を console.log() に渡して出力できます。元の配列を変更してよい場合にだけ使い、変更せずに値を確認したい場合は slice() かインデックスを使いましょう。

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
const lastName = names.pop();
console.log(lastName);
console.log(names.join(', '));

martell
mehvish, tahir, aftab

pop() と shift() は文字列の操作ではなく、配列のメソッドです。上の最初の呼び出しは末尾にあった値を出力し、次の行は残った配列を表示します。先頭の要素を確認しながら取り除くには、pop() を shift() に置き換えてください。