JavaScript 配列の強みは配列メソッドにあります。
JavaScript メソッド toString() は、配列値をカンマ区切りの文字列に変換します。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Banana,Orange,Apple,Mango
Try it Yourself »
また、join() メソッドはすべての配列要素を1つの文字列に結合します。
これは toString() のように動作しますが、加えてセパレータを指定することもできます:
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
Banana * Orange * Apple * Mango
Try it Yourself »
配列の操作において、要素の削除や新規要素の追加は簡単です。
ポップとプッシュとは次のようなものです:
ポップは、配列から項目を外に取出し、プッシュは、配列の中に項目を格納します。
pop() メソッドは、最後の要素を配列から削除します:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
// Removes the last element ("Mango") from fruits
Try it Yourself »
pop() メソッドは、"popped out" した値を返します:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =
fruits.pop();
// the value of x is "Mango"
Try it Yourself »
push() メソッドは、配列(の最後に)に新しい要素を追加します:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); // Adds a new element ("Kiwi") to fruits
Try it Yourself »
push() メソッドは、新しい配列の長さを返します:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =
fruits.push("Kiwi"); // the value of x is 5
Try it Yourself »シフトはポップと同じですが、最後の要素ではなく最初の要素に作用します。
shift() メソッドは、最初の配列要素を削除し、他のすべての要素を低いインデックスの方に(左に)「シフト」します。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
// Removes the first element "Banana" from fruits
Try it Yourself »
shift() メソッドは、「シフトアウト」した文字列を返します:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); //
Returns "Banana"
Try it Yourself »
unshift() メソッドは、配列の先頭に新しい要素を追加し、古い要素を右にシフトします:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
// Adds a new element "Lemon" to fruits
Try it Yourself »
unshift() メソッドは、新しい配列の長さを返します。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
// Returns 5
Try it Yourself »
配列要素には、インデックス番号を使用してアクセスします:
配列インデックスは、0 から開始します。 [0] は最初の配列要素で、[1] は2番目、[2] は3番目の .. 配列要素です。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";
// Changes the first element of fruits to "Kiwi"
Try it Yourself »
length プロパティを使用すると、配列に新しい要素を簡単に追加できます:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";
// Appends "Kiwi" to fruit
Try it Yourself »
JavaScript 配列はオブジェクトなので、JavaScript 演算子 delete を使用すれば要素を削除できます:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
// Changes the first element in fruits to undefined
Try it Yourself »
delete を使用すると、配列に未定義の穴が残ることがあります。代わりに pop() か shift() を使用してください。
splice() メソッドを使用すると、配列に新しい項目を追加できます:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
Try it Yourself »
最初のパラメータ (2) は、新しい要素を追加する(spliced in)位置を定義します。
2 番目のパラメータ (0) は、削除する要素の数を定義します。
残りのパラメータ ("Lemon" , "Kiwi") は、追加する新しい要素を定義します。
賢くパラメータを設定すれば、splice() を使用して配列に「穴」を残すことなく要素を削除できます:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
// Removes the first element of fruits
Try it Yourself »
最初のパラメータ (0) は、新しい要素を追加する(spliced in)位置を定義します。
2 番目のパラメータ (1) は、削除する要素の数を定義します。
残りのパラメータは省略していますので、新しい要素は追加されません。
concat() メソッドは、2つの配列を連結して新しい配列を作成します:
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias","Linus"];
var myChildren = myGirls.concat(myBoys);
// Concatenates (joins) myGirls and myBoys
Try it Yourself »
concat() メソッドには、任意の数の配列引数を指定することができます:
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias","Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);
// Concatenates arr1 with arr2 and arr3
Try it Yourself »
slice() メソッドは、配列の一部を取出し、新しい配列を作成します。
この例では、配列要素 1("Orange")から始まる部分配列を作成します:
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
Try it Yourself »
slice() メソッドは、新しい部分配列を作成するもので、元となる配列の要素は削除しません。
この例では、配列要素 3("Apple")から始まる部分配列を作成します:
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);
Try it Yourself »
slice() メソッドは、slice(1, 3) のように 2 つの引数を指定することができます。
このメソッドは、start 引数から end 引数の前までの要素を選択します。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
Try it Yourself »
最初の例のように、end 引数を省略すると、slice() メソッドは配列の残りの部分をスライスします。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);
Try it Yourself »
プリミティブ値が必要な場合、JavaScript は自動的に配列を文字列に変換します。 次の2つの例では、両方ともに同じ結果が得られます:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Try it Yourself »
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
Try it Yourself »
すべての JavaScript オブジェクトには、toString() メソッドがあります。
配列のソートについては、次の章で説明します。
完全なリファレンスについては、完全な JavaScript 配列リファレンスをご覧ください。
このリファレンスには、すべての Array プロパティとメソッドの説明と例が含まれています。
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »