JavaScriptでnewキーワードを使って配列を作成する方法
JavaScriptでは、newキーワードとArray()コンストラクタを使用することで、簡単に配列を作成できます。本記事では、実際に動作するサンプルコードとともに、その基本的な使い方を解説します。
サンプルコード
以下は、newキーワードを使用してJavaScriptの配列を作成するコード例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>newキーワードで配列を作成する</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、新しい配列を作成して表示します
</h3>
<script>
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
let arr = new Array(1, 2, 3, 4, "A", "B", "C", "D");
resEle.innerHTML = "arr = " + arr;
});
</script>
</body>
</html>
コードの解説
document.querySelector(".result")… 結果を表示するための要素を取得します。addEventListener("click", ...)… ボタンのクリックイベントを検知し、処理を実行します。new Array(...)… 引数として渡した複数の値（数値や文字列）を要素に持つ、新しい配列を生成します。ここでは数値と文字列が混在した配列を作成しています。
生成された配列は、innerHTMLを使って画面に出力されます。なお、JavaScriptでは通常配列リテラル（[1, 2, 3]）での作成が推奨されますが、new Array(n)のように引数を1つだけ渡せば、指定した長さの空の配列を事前に確保できるという利点もあります。
実行結果
上記のコードを実行すると、次のような画面が表示されます。
「CLICK HERE」ボタンをクリックすると、作成された配列の内容が緑色のテキストで表示されます。
-
JavaScriptでオブジェクトを新しい配列に変換する方法
JavaScriptでは、オブジェクトのプロパティやネストされたデータを取り出し、扱いやすい形で新しい配列にフォーマットできます。本記事では、学校（school）オブジェクトに含まれる生徒情報を、文字列形式の配列へ変換する実践的なコード例を紹介します。 ポイントとなるテクニック このサンプルでは、以下の2つのJavaScript機能を活用しています。 分割代入（Destructuring assignment）：オブジェクトから特定のプロパティを簡潔に取り出す構文です。 for...of ループ：配列内の各要素を順番に処理するために使用します。 コード例 <!DOCTYPE html
-
【JavaScript】filterとjoinを組み合わせて、条件に合う配列要素だけを結合する方法
JavaScriptでは、filter()メソッドとjoin()メソッドを組み合わせることで、条件を満たす要素だけを抽出し、それらを任意の区切り文字で1つの文字列に結合できます。本記事では、配列の中から「2で割り切れる要素（偶数）」だけを取り出して結合する具体例を、動作するサンプルコードとともに解説します。 処理の流れ：filter() と join() の役割 filter()：コールバック関数が true を返した要素だけを集めた新しい配列を作成します。元の配列は変更されません。 join()：配列内のすべての要素を、引数で指定した区切り文字で連結し、1つの文字列として返します。引数