JavaScript Array メソッド

❮ 前章へ 次章へ ❯

JavaScript 配列の強みは配列メソッドにあります。


配列を文字列に変換する

JavaScript メソッド toString() は、配列値をカンマ区切りの文字列に変換します。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Result

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() を使用して要素を削除する

賢くパラメータを設定すれば、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 »

自動 toString()

 プリミティブ値が必要な場合、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 »


❮ 前章へ 次章へ ❯