Javaスクリプト配列メソッド: 例を使用して作成する
ジェームズ・ハートマン
⚡ スマートサマリー
Javaスクリプト配列メソッドを使用すると、開発者は単一のオブジェクトを通して、順序付けられた値のコレクションを保存、取得、変換できます。この記事では、配列の作成、インデックスアクセス、組み込みメソッド群、反復処理、多次元構造、および実行可能な例と期待される出力について説明します。
配列とは何か Javaスクリプト？
配列は、 アイテムの集まり配列は、同じ型の大量のデータを格納する必要がある場合に非常に便利です。たとえば、500人の従業員の詳細を格納したいとします。変数を使用する場合は、500個の変数を作成する必要がありますが、配列を使用すれば同じことができます。配列内の項目には、その配列の要素を参照することでアクセスできます。 インデックス番号、そして配列の最初の要素のインデックスはゼロです。
厳密な型付け言語の配列とは異なり、 Javaスクリプト配列は動的です。新しい要素が追加されると自動的に長さが拡張され、1つの配列に文字列、数値、ブール値、オブジェクト、さらには他の配列を同時に格納できます。この柔軟性により、配列はブラウザスクリプトとサーバーサイドコードの両方でリストデータのデフォルトのコンテナとして使用されています。
配列を作成する方法 Javaスクリプト
で配列を作成できます Javaスクリプト 以下のように。
var students = ["John", "Ann", "Kevin"];
ここでは、配列の作成時に値「John」、「Ann」、「Kevin」を使用して配列を初期化しています。 「ジョン」、「アン」、「ケビン」のインデックスはそれぞれ 0、1、2 です。 Student 配列にさらに要素を追加したい場合は、次のように行うことができます。
students[3] = "Emma"; students[4] = "Rose";
配列コンストラクタを使用して配列を作成することもできます。例：
var students = new Array("John", "Ann", "Kevin");
OR
var students = new Array(); students[0] = "John"; students[1] = "Ann"; students[2] = "Kevin";
配列要素へのアクセスと変更方法
すべての要素は番号付きの位置に配置されます。角括弧表記は、インデックスが現在の長さと等しい場合に、値を読み取り、新しい値を割り当て、または新しいエントリを追加します。
let students = ["John", "Ann", "Kevin"]; console.log(students[0]); // John - first element console.log(students[students.length - 1]); // Kevin - last element students[1] = "Anna"; // replace an existing value students[3] = "Emma"; // append a new value console.log(students); // ["John", "Anna", "Kevin", "Emma"] console.log(students.length); // 4 console.log(students[9]); // undefined - index does not exist
⚠️ 警告: 現在の長さをはるかに超えるインデックスに値を割り当てると、空のスロットで埋め尽くされた疎な配列が作成されます。 push() インデックスをジャンプさせる代わりに、配列が密で予測可能な状態を維持するようにします。
Javaスクリプト配列メソッド
Array オブジェクトには、開発者が配列を簡単かつ効率的に処理するのに役立つ多くのプロパティとメソッドがあります。 arrayname.property を指定するとプロパティの値を取得でき、arrayname.method() を指定するとメソッドの出力を取得できます。
- 長さプロパティ –> 配列内の要素の数を知りたい場合は、length プロパティを使用できます。
- プロトタイプのプロパティ –> 新しいプロパティとメソッドを追加する場合は、プロトタイプ プロパティを使用できます。
- 逆の方法 –> reverse メソッドを使用して、配列内の項目の順序を逆にすることができます。
- ソート方法 → 配列内の項目は、sort メソッドを使用して並べ替えることができます。
- ポップメソッド –> Pop メソッドを使用して配列の最後の項目を削除できます。
- シフト方式 → 配列の最初の要素は、shift メソッドを使用して削除できます。
- プッシュ方式 –> 配列の最後の項目として値を追加できます。
以下の参照表では、最もよく使用されるメソッドをグループ化して示しています。これにより、元の配列を変更するメソッドと新しい値を返すメソッドが一目でわかります。
| 方法 | 目的 | 返品 | 変更元の配列 |
|---|---|---|---|
| 押す（） | 末尾に1つ以上の項目を追加する | 新しい長さ | はい |
| ポップ（） | 最後のアイテムを削除 | 削除されたアイテム | はい |
| unshift（） | 前面に1つ以上のアイテムを追加する | 新しい長さ | はい |
| シフト（） | 最初のアイテムを削除する | 削除されたアイテム | はい |
| スプライス（） | 任意の位置に項目を挿入または削除します。 | 削除されたアイテムの配列 | はい |
| ソート（） | 商品を注文する | ソートされた配列 | はい |
| 逆行する （） | アイテムの順序を反転する | 逆配列 | はい |
| スライス（） | 配列の一部をコピーする | 新しい配列 | いいえ |
| concat（） | 2つ以上の配列を結合する | 新しい配列 | いいえ |
| join（） | アイテムを文字列に結合する | String | いいえ |
| の指標（） | 値の位置を見つける | インデックスまたは-1 | いいえ |
| include（） | 値が存在するかどうかをテストする | true または false | いいえ |
要素の追加と削除
let fruits = ["apple", "banana"]; fruits.push("cherry"); // ["apple", "banana", "cherry"] fruits.unshift("mango"); // ["mango", "apple", "banana", "cherry"] fruits.pop(); // ["mango", "apple", "banana"] fruits.shift(); // ["apple", "banana"] // splice(startIndex, deleteCount, ...itemsToInsert) fruits.splice(1, 0, "kiwi"); // ["apple", "kiwi", "banana"] console.log(fruits);
検索、コピー、結合
let colors = ["red", "green", "blue", "green"]; console.log(colors.indexOf("green")); // 1 - first match only console.log(colors.lastIndexOf("green")); // 3 console.log(colors.includes("pink")); // false console.log(colors.slice(1, 3)); // ["green", "blue"] console.log(colors.join(" | ")); // red | green | blue | green console.log(colors.concat(["black"])); // new array, colors unchanged
反復処理方法：forEach、map、filter、reduce
モダン Javaスクリプトは、操作の意図がメソッド名に直接示されているため、手動のインデックスループよりもコールバック駆動型のメソッドを優先します。
const scores = [45, 72, 88, 31, 95]; scores.forEach(s => console.log(s)); // prints each score const doubled = scores.map(s => s * 2); // [90, 144, 176, 62, 190] const passed = scores.filter(s => s >= 50); // [72, 88, 95] const total = scores.reduce((sum, s) => sum + s, 0); // 331 const first = scores.find(s => s > 80); // 88 console.log(doubled, passed, total, first);
💡ヒント: デフォルト sort() 要素を文字列に変換するので [10, 9, 100].sort() 収益 [10, 100, 9]比較器を渡す例： sort((a, b) => a - b) 数字を正しく並べ替える。
Javaスクリプト配列の例（ソース付き） Code
以下のスクリプトは、学生の配列を作成し、プロトタイププロパティを介してカスタム表示メソッドを追加した後、長さ、ソート、反転、ポップ、プッシュを順に実行します。ぜひご自身でお試しください。
<html>
<head>
<title>Arrays!!!</title>
<script type="text/javascript">
var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
Array.prototype.displayItems=function(){
for (i=0;i<this.length;i++){
document.write(this[i] + "<br />");
}
}
document.write("students array<br />");
students.displayItems();
document.write("<br />The number of items in students array is " + students.length + "<br />");
document.write("<br />The SORTED students array<br />");
students.sort();
students.displayItems();
document.write("<br />The REVERSED students array<br />");
students.reverse();
students.displayItems();
document.write("<br />THE students array after REMOVING the LAST item<br />");
students.pop();
students.displayItems();
document.write("<br />THE students array after PUSH<br />");
students.push("New Stuff");
students.displayItems();
</script>
</head>
<body>
</body>
</html>
期待される出力：
students array John Ann Aaron Edwin Elizabeth The number of items in students array is 5 The SORTED students array Aaron Ann Edwin Elizabeth John The REVERSED students array John Elizabeth Edwin Ann Aaron THE students array after REMOVING the LAST item John Elizabeth Edwin Ann THE students array after PUSH John Elizabeth Edwin Ann New Stuff
ソート操作では、大文字と小文字が文字コードで比較されるため、「Aaron」が「Ann」より前に配置されることに注目してください。また、ポップ操作では、反転された配列から「Aaron」が削除されていることにも注目してください。これは、ソート操作と反転操作の両方が元の配列をその場で変更したことを示しています。
ループする方法 Javaスクリプト配列
4つのトイレping 様々なスタイルが用意されており、それぞれ異なる状況に適しています。古典的な for ループはインデックスを完全に制御でき、for…of は値を直接読み取り、forEach は意図を明確に表現し、for…in はオブジェクトのプロパティのために予約しておくべきです。
const cities = ["Paris", "Tokyo", "Cairo"]; // 1. Classic for loop - index is available for (let i = 0; i < cities.length; i++) { console.log(i + ": " + cities[i]); } // 2. for...of loop - value is available for (const city of cities) { console.log(city); } // 3. forEach with index parameter cities.forEach((city, index) => console.log(index, city)); // 4. entries() when both index and value are needed for (const [index, city] of cities.entries()) { console.log(index, city); }
while や do…while を含むループ構文のより詳細な解説は、次の記事に掲載されています。 ループの使い方 Javaスクリプト.
多次元配列 Javaスクリプト
JavaScriptには専用の行列型はありません。グリッドは単に配列であり、その要素自体が配列です。単一のセルにアクセスするには、2つのインデックス式を使用します。
const matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; console.log(matrix[1][2]); // 6 - row index 1, column index 2 for (const row of matrix) { console.log(row.join(" ")); } // flatten a nested array into a single level console.log(matrix.flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
出力：
6 1 2 3 4 5 6 7 8 9 [1, 2, 3, 4, 5, 6, 7, 8, 9]
配列は、フォーム検証からデータレンダリングまで、ほとんどすべての実用的なスクリプトに登場します。 実用的 Javaスクリプトコードの例、 レビュー Javaスクリプト文字列 テキスト処理については、以下をお読みください。 内部と外部 Javaスクリプト これらのスクリプトがページ内のどこに属するかを決定する。配列の内容に対して静的な型チェックを行いたい開発者は、 TypeScript チュートリアル.
