概要：このチュートリアルでは、JavaScriptの配列とその基本的な操作について学習します。
JavaScript配列の概要
JavaScriptでは、配列は値の順序付きリストです。各値は、インデックスで指定される要素と呼ばれます。
JavaScript配列には、次の特徴があります。
- まず、配列は混合型の値を保持できます。たとえば、数値、文字列、ブール値、およびnull型の要素を格納する配列を持つことができます。
- 次に、配列のサイズは動的で自動拡張します。言い換えれば、配列のサイズを事前に指定する必要はありません。
JavaScript配列の作成
JavaScriptでは、配列を作成する2つの方法が提供されています。1つ目は、次のようにArrayコンストラクターを使用する方法です。
let scores = new Array();Code language: JavaScript (javascript)scores配列は空で、要素は何も保持していません。
配列が保持する要素の数がわかっている場合は、次の例に示すように、初期サイズを持つ配列を作成できます。
let scores = Array(10);Code language: JavaScript (javascript)配列を作成し、いくつかの要素で初期化するには、要素をカンマ区切りのリストとしてArray()コンストラクターに渡します。
たとえば、以下は5つの要素（または数値）を持つscores配列を作成します。
let scores = new Array(9,10,8,7,6);Code language: JavaScript (javascript)Array()コンストラクターを使用して配列を作成し、数値を渡す場合、初期サイズを持つ配列を作成していることに注意してください。
ただし、stringのような別の型の値をArray()コンストラクターに渡すと、その値の要素を持つ配列が作成されます。例えば
let athletes = new Array(3); // creates an array with initial size 3
let scores = new Array(1, 2, 3); // create an array with three numbers 1,2 3
let signs = new Array('Red'); // creates an array with one element 'Red'Code language: JavaScript (javascript)JavaScriptでは、Array()コンストラクターを使用するときにnew演算子を省略できます。たとえば、次のステートメントはartists配列を作成します。
let artists = Array();Code language: JavaScript (javascript)実際には、配列を作成するためにArray()コンストラクターを使用することはめったにありません。
配列を作成するより推奨される方法は、配列リテラル表記を使用することです。
let arrayName = [element1, element2, element3, ...];Code language: JavaScript (javascript)配列リテラル形式では、角かっこ[]を使用して、要素のカンマ区切りリストを囲みます。
次の例では、文字列要素を保持するcolors配列を作成します。
let colors = ['red', 'green', 'blue'];Code language: JavaScript (javascript)空の配列を作成するには、次のように要素を指定せずに角かっこを使用します。
let emptyArray = [];Code language: JavaScript (javascript)JavaScript配列要素へのアクセス
JavaScript配列はゼロベースのインデックスが付けられています。言い換えれば、配列の最初の要素はインデックス0から始まり、2番目の要素はインデックス1から始まるというようになります。
配列内の要素にアクセスするには、角かっこ[]でインデックスを指定します。
arrayName[index]Code language: CSS (css)以下に、mountains配列の要素にアクセスする方法を示します。
let mountains = ['Everest', 'Fuji', 'Nanga Parbat'];
console.log(mountains[0]); // 'Everest'
console.log(mountains[1]); // 'Fuji'
console.log(mountains[2]); // 'Nanga Parbat'Code language: JavaScript (javascript)要素の値を変更するには、次のようにその値を要素に代入します。
let mountains = ['Everest', 'Fuji', 'Nanga Parbat'];
mountains[2] = 'K2';
console.log(mountains);Code language: JavaScript (javascript)出力
[ 'Everest', 'Fuji', 'K2' ]Code language: JSON / JSON with Comments (json)配列サイズの取得
通常、配列のlengthプロパティは、要素の数を返します。次の例は、lengthプロパティの使用方法を示しています。
let mountains = ['Everest', 'Fuji', 'Nanga Parbat'];
console.log(mountains.length); // 3Code language: JavaScript (javascript)配列の基本的な操作
以下に、配列のいくつかの基本的な操作について説明します。map()、filter()、reduce()などの高度な操作については、次のチュートリアルで学習します。
1）配列の最後に要素を追加する
配列の最後に要素を追加するには、push()メソッドを使用します。
let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
seas.push('Red Sea');
console.log(seas); Code language: JavaScript (javascript)出力
[ 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea', 'Red Sea' ]Code language: JSON / JSON with Comments (json)2）配列の先頭に要素を追加する
配列の先頭に要素を追加するには、unshift()メソッドを使用します。
let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
seas.unshift('Red Sea');
console.log(seas);Code language: JavaScript (javascript)出力
[ 'Red Sea', 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea' ]Code language: JSON / JSON with Comments (json)3）配列の最後から要素を削除する
配列の最後から要素を削除するには、pop()メソッドを使用します。
let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
const lastElement = seas.pop();
console.log(lastElement); Code language: JavaScript (javascript)出力
Baltic Sea4）配列の先頭から要素を削除する
配列の先頭から要素を削除するには、shift()メソッドを使用します。
let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
const firstElement = seas.shift();
console.log(firstElement);Code language: JavaScript (javascript)出力
Black Sea5）配列内の要素のインデックスを見つける
要素のインデックスを見つけるには、indexOf()メソッドを使用します。
let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
let index = seas.indexOf('North Sea');
console.log(index); // 2Code language: JavaScript (javascript)6）値が配列であるかどうかを確認する
値が配列であるかどうかを確認するには、Array.isArray()メソッドを使用します。
console.log(Array.isArray(seas)); // trueCode language: JavaScript (javascript)まとめ
- JavaScriptでは、配列は値の順序付きリストです。各値は、インデックスで指定された要素と呼ばれます。
- 配列は混合型の値を保持できます。
- JavaScript配列は動的であり、必要に応じて拡大または縮小することを意味します。
