JavaScript の配列は、複数の値を 1 つの変数に格納するために使用されるデータ構造です。さまざまなデータ型を保持でき、動的なサイズ変更が可能です。要素には、0 から始まるインデックスによってアクセスされます。
JavaScript 配列
JavaScript 配列を作成するには 2 つの方法があります。 配列コンストラクターを使用する または 配列リテラルの短縮構文 、これは単なる角括弧です。配列のサイズは柔軟であるため、要素を追加または削除すると拡大または縮小できます。
目次
- JavaScriptの配列とは何ですか?
- JavaScript 配列の基本用語
- 配列の宣言
- JavaScript 配列の基本操作
- JavaScript の配列とオブジェクトの違い
- JavaScript の配列とオブジェクトをいつ使用するか?
- JavaScript 配列の認識
- JavaScript 配列の完全なリファレンス
- JavaScript 配列の例
- JavaScript チートシート
JavaScript 配列の基本用語
- 配列： 単一の変数に複数の値を格納できるようにする JavaScript のデータ構造。
- 配列要素: 配列内の各値は要素と呼ばれます。要素にはインデックスによってアクセスします。
- 配列インデックス: 配列内の要素の位置を示す数値表現。 JavaScript 配列のインデックスは 0 です。これは、最初の要素のインデックスが 0 であることを意味します。
- 配列の長さ: 配列内の要素の数。これは、length プロパティを使用して取得できます。
配列の宣言
配列を宣言するには基本的に 2 つの方法、つまり配列リテラルと配列コンストラクターがあります。
1. 配列リテラルを使用した配列の作成
配列リテラルを使用して配列を作成するには、角括弧 [] を使用して配列を定義し、初期化する必要があります。この方法は簡潔であり、その単純さから広く好まれています。
構文：
let arrayName = [value1, value2, ...];>
例：
JavaScript
// Creating an Empty Array let names = []; console.log(names); // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses);>
出力
[] [ 'HTML', 'CSS', 'Javascript', 'React' ]>
2. 配列コンストラクターを使用した配列の作成 (JavaScript new キーワード)
配列コンストラクターは、配列コンストラクター関数を呼び出して配列を作成するメソッドを指します。このアプローチでは動的な初期化が可能であり、指定された長さまたは要素を持つ配列の作成に使用できます。
構文：
let arrayName = new Array();>
例：
JavaScript // Declaration of an empty array // using Array constructor let names = new Array(); console.log(names); // Creating and Initializing an array with values let courses = new Array('HTML', 'CSS', 'Javascript', 'React'); console.log(courses); // Initializing Array while declaring let arr = new Array(3); arr[0] = 10; arr[1] = 20; arr[2] = 30; console.log(arr);> 出力
[] [ 'HTML', 'CSS', 'Javascript', 'React' ] [ 10, 20, 30 ]>
注記： 上記の両方の方法はまったく同じことを行います。効率、読みやすさ、速度を高めるために、配列リテラル方式を使用してください。
JavaScript 配列の基本操作
1. 配列の要素へのアクセス
インデックス番号を使用して、配列内の任意の要素にアクセスできます。配列内のインデックスは 0 から始まります。
JavaScript // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Accessing Array Elements console.log(courses[0]); console.log(courses[1]); console.log(courses[2]); console.log(courses[3]);>
出力
HTML CSS Javascript React>
2. 配列の最初の要素へのアクセス
配列のインデックスは 0 から始まるため、インデックス番号を使用して配列の最初の要素にアクセスできます。
JavaScript // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing First Array Elements let firstItem = courses[0]; console.log('First Item: ', firstItem);> 出力
First Item: HTML>
3. 配列の最後の要素へのアクセス
[array.length – 1] インデックス番号を使用して、最後の配列要素にアクセスできます。
JavaScript // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing Last Array Elements let lastItem = courses[courses.length - 1]; console.log('First Item: ', lastItem);> 出力
First Item: React>
4. 配列要素の変更
配列内の要素は、対応するインデックスに新しい値を割り当てることで変更できます。
JavaScript // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses); courses[1]= 'Bootstrap'; console.log(courses);>
出力
[ 'HTML', 'CSS', 'Javascript', 'React' ] [ 'HTML', 'Bootstrap', 'Javascript', 'React' ]>
5. 配列への要素の追加
要素は、push() や unshift() などのメソッドを使用して配列に追加できます。
JavaScript // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Add Element to the end of Array courses.push('Node.js'); // Add Element to the beginning courses.unshift('Web Development'); console.log(courses);> 出力
[ 'Web Development', 'HTML', 'CSS', 'Javascript', 'React', 'Node.js' ]>
6. 配列からの要素の削除
要素を削除するには、pop()、shift()、splice() などのメソッドを使用します。
JavaScript // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; console.log('Original Array: ' + courses); // Removes and returns the last element let lastElement = courses.pop(); console.log('After Removed the last elements: ' + courses); // Removes and returns the first element let firstElement = courses.shift(); console.log('After Removed the First elements: ' + courses); // Removes 2 elements starting from index 1 courses.splice(1, 2); console.log('After Removed 2 elements starting from index 1: ' + courses);> 出力
Original Array: HTML,CSS,Javascript,React,Node.js After Removed the last elements: HTML,CSS,Javascript,React After Removed the First elements: CSS,Javascript,React After Removed 2 elements starting from index 1: CSS>
7. 配列の長さ
length プロパティを使用して配列の長さを取得します。
JavaScript // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; let len = courses.length; console.log('Array Length: ' + len);> 出力
Array Length: 5>
8. 配列の長さを増減する
JavaScript の長さプロパティを使用して、配列の長さを増減できます。
JavaScript // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; // Increase the array length to 7 courses.length = 7; console.log('Array After Increase the Length: ', courses); // Decrease the array length to 2 courses.length = 2; console.log('Array After Decrease the Length: ', courses)> 出力
Array After Increase the Length: [ 'HTML', 'CSS', 'Javascript', 'React', 'Node.js', ] Array After Decrease the Length: [ 'HTML', 'CSS' ]>
9. 配列要素の反復処理
for および forEach ループを使用して配列を反復し、配列要素にアクセスできます。
例： forループの例です。
JavaScript // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through for loop for (let i = 0; i < courses.length; i++) { console.log(courses[i]) }> 出力
HTML CSS JavaScript React>
例： の例です Array.forEach() ループ。
JavaScript // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through forEach loop courses.forEach(function myfunc(elements) { console.log(elements); });> 出力
HTML CSS JavaScript React>
10. 配列の連結
concat() メソッドを使用して、2 つ以上の配列を結合します。 Ir は、結合された配列要素を含む新しい配列を返します。
JavaScript // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; let otherCourses = ['Node.js', 'Expess.js']; // Concatenate both arrays let concateArray = courses.concat(otherCourses); console.log('Concatenated Array: ', concateArray);> 出力
Concatenated Array: [ 'HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Expess.js' ]>
11. 配列から文字列への変換
組み込みメソッドがあります toString() to は配列を文字列に変換します。
JavaScript // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Convert array ot String console.log(courses.toString());>
出力
HTML,CSS,JavaScript,React>
12. 配列のタイプを確認する
JavaScript の種類 演算子は配列の型をチェックするために使用されます。配列のオブジェクトを返します。
JavaScript // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Check type of array console.log(typeof courses);>
出力
object>
JavaScript の配列とオブジェクトの違い
- JavaScript 配列はインデックスを数値として使用します。
- オブジェクトはインデックスを名前として使用します。
JavaScript の配列とオブジェクトをいつ使用するか?
- 配列は、要素名を数値にしたい場合に使用されます。
- オブジェクトは、要素名を文字列にしたい場合に使用されます。
JavaScript 配列の認識
JavaScript 配列を認識するには 2 つの方法があります。
- を使用することで Array.isArray() 方法
- を使用することで インスタンスの 方法
以下は両方のアプローチを示す例です。
JavaScript const courses = ['HTML', 'CSS', 'Javascript']; console.log('Using Array.isArray() method: ', Array.isArray(courses)) console.log('Using instanceof method: ', courses instanceof Array)> 出力
Using Array.isArray() method: true Using instanceof method: true>
注記： 配列の書き込み中によくあるエラーが発生します。
const numbers = [5] // and const numbers = new Array(5)>JavaScript
const numbers = [5] console.log(numbers)>
上記 2 つのステートメントは同じではありません。
マージソートアルゴリズム
出力： このステートメントは、要素 [5] を含む配列を作成します。
[5]>JavaScript
const numbers = new Array(5) console.log(numbers)>
出力
[ ]>
JavaScript 配列の完全なリファレンス
Javascript 配列の完全なリストがあります。確認するには、これを参照してください。 JavaScript 配列リファレンス 記事。すべての配列プロパティとメソッドの詳細な説明と例が含まれています。
JavaScript 配列の例
JavaScript 配列の例には、面接で主に尋ねられる質問のリストが含まれています。この記事をチェックしてください JavaScript 配列の例 詳細については。
JavaScript チートシート
Javascript の重要なトピックをすべて網羅した Javascript のチートシートを用意していますので、確認してください。 JavaScript チートシート - JavaScript の基本ガイド 。