JavaScript で配列要素を出力する

1. JavaScript で配列要素を出力するさまざまな方法
2. JavaScript で for ループを使用して配列要素を出力する
3. JavaScript で while ループを使用して配列要素を出力する
4. JavaScript で forEach メソッドを使用して配列要素を出力する
5. JavaScript で console.log() 関数を使用して配列要素を出力する
6. JavaScript で map() と join() メソッドを使用して配列要素を出力する
7. JavaScript で toString() 関数を使用して配列要素を出力する
8. JavaScript で join() 関数を使用して配列要素を出力する
9. JavaScript で pop() 関数を使用して配列要素を出力する
10. JavaScript で shift() メソッドを使用して配列要素を出力する
11. JavaScript で concat() メソッドを使用して配列要素を出力する
12. JavaScript で slice() メソッドを使用して配列要素を出力する

このチュートリアルでは、JavaScript 配列要素を出力する方法を示します。また、配列全体を出力するか、特定の数の要素を出力するかなど、プロジェクトのニーズによっても異なります。

または、配列要素を文字列形式などで出力したい場合。JavaScript 配列を出力するさまざまな方法を見てみましょう。

JavaScript で配列要素を出力するさまざまな方法

for ループと while ループは、配列要素を一度に 1つずつ繰り返し、各要素は別々の行に出力されますが、forEach() メソッドを使用して同じ出力を取得できます。

forEach() 関数は、配列要素ごとに 1 回特定のメソッドを実行します。

配列の名前を console.log() 関数に渡すことで、すべての配列要素を出力できます。map() および join() メソッドを使用して、最初に操作してから配列の要素を出力することもできます。

たとえば、出力の各配列要素に番号を付けたいとします。

map() 関数は、要素ごとに 1 回関数を呼び出すことで新しい配列を作成しますが、元の配列は変更しません。空の要素に対しては関数を実行しないことを忘れないでください。

join() 関数は、指定された区切り文字で配列の要素を区切る区切り文字のように機能します。

pop() は最後の要素を返し、shift() は配列の最初の要素を返しますが、どちらも元の配列を変更できるため、これらの要素を文字列から削除する場合に使用するのが最適です。

toString() 関数は、配列を文字列形式に変換します。slice() 関数は、配列の選択された要素を新しい配列として提供しますが、元の配列は変更しません。

また、特定の start および end インデックスに従って機能することもできます（end インデックスはここでは排他的です）。

JavaScript で for ループを使用して配列要素を出力する

単純な for ループを使用して完全な JavaScript 配列を出力することから始めましょう。

var names = ['mehvish', 'tahir', 'aftab', 'martell'];
// for loop
for (var i = 0; i < names.length; i++) {
  console.log(names[i]);
}

出力：

"mehvish"
"tahir"
"aftab"
"martell"

JavaScript で while ループを使用して配列要素を出力する

以下で、while ループがどのように出力を生成するかを見てみましょう。

var names = ['mehvish', 'tahir', 'aftab', 'martell'];
var i = 0;
// while loop
while (i < names.length) {
  console.log(names[i]);
  i++;
}

出力：

"mehvish"
"tahir"
"aftab"
"martell"

JavaScript で forEach メソッドを使用して配列要素を出力する

完全な JavaScript 配列（1 行に 1つの要素）を出力する forEach メソッドについて考えたことはありますか？以下のコードスニペットを参照してください。

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

出力：

"mehvish"
"tahir"
"aftab"
"martell"

JavaScript で console.log() 関数を使用して配列要素を出力する

配列全体を出力する方法を検討しましたが、各行に 1つの要素があります。次のように、すべての配列要素を 1 行に出力できます。

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

出力：

["mehvish", "tahir", "aftab", "martell"]

JavaScript で map() と join() メソッドを使用して配列要素を出力する

次の方法を使用して、すべての要素を 1 行に表示することもできます。

var names = ['mehvish', 'tahir', 'aftab', 'martell'];
var element = names.map((e, i) => (i + 1 + '.' + e)).join(' ');
console.log(element);

出力：

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

JavaScript で toString() 関数を使用して配列要素を出力する

配列を文字列に変換できる toString() という名前の関数があると思いましたか。次のコード例を参照してください。

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

出力：

"mehvish,tahir,aftab,martell"

JavaScript で join() 関数を使用して配列要素を出力する

上記の配列は文字列に変換されていますが、各要素はコンマで区切られています。すべての要素を 1つのスペースに分割したい場合はどうなりますか？そのために、join() 関数が使用されます。

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

出力：

"mehvish tahir aftab martell"

JavaScript で pop() 関数を使用して配列要素を出力する

配列の最後の要素のみを出力することを考えていますか？これは、pop() 関数を使用して行うことができます。

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

出力：

"martell"

JavaScript で shift() メソッドを使用して配列要素を出力する

次のコードでは、shift() メソッドが配列の最初の要素を出力します。

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

出力：

"mehvish"

JavaScript で concat() メソッドを使用して配列要素を出力する

2つの別々の JavaScript 配列があり、両方を 1 行で出力します。最初の配列の要素の後に 2 番目の配列の要素が必要です。

Concat() メソッドを使用して、fruitsArrayTwo を fruitsArrayOne と連結します。

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

出力：

["apple", "banana", "grapes", "mango", "water-melon"]

JavaScript で slice() メソッドを使用して配列要素を出力する

slice() メソッドを使用して、特定の要素の配列を出力することもできます。splice() メソッドを使用して、配列の要素を追加および削除することもできます。詳しくはこのページをご確認ください。

var names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names.slice(0, 2));  // end index is not inclusive here

出力：

["mehvish", "tahir"]