JavaScriptのアレイは、単一の変数に複数の値を格納するために使用されます。
配列を表示します
このチュートリアルでは、内部の配列を表示するためのスクリプトを使用します<p>を持つ要素id="demo" :
例
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
(スクリプト内の)最初の行は、車という名前の配列を作成します。
2行目は持つ要素「見つけた」 id="demo" 、および"displays"の配列"innerHTML"それのを;
それを自分で試してみてください
配列を作成し、それに値を割り当てます。
スペースや改行は重要ではありません。 宣言は、複数行にまたがることができます。
(のような最後の要素の後にコンマを置いてはいけません"BMW"
効果は、ブラウザ間で矛盾しています。
配列とは何ですか?
アレイは、一度に複数の値を保持することができる特別な変数です。
あなたが(例えば、車名のリスト、)の項目のリストを持っている場合は、単一の変数に車を格納すると、次のようになります。
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
しかし、あなたはどのような車をループしたいと具体的なものを見つけた場合は? そして、あなたがいない3台が、300を持っていたものか?
解決策は、配列であります!
アレイは、単一の名前の下に多くの値を保持することができ、あなたは、インデックス番号を参照して値にアクセスすることができます。
アレイの作成
配列リテラルを使用すると、JavaScriptの配列を作成する最も簡単な方法です。
構文:
var array-name = [ item1 , item2 , ...];
例:
var cars = ["Saab", "Volvo", "BMW"];
JavaScriptのキーワードの新しいを使用して、
次の例はまた、配列を作成し、それに値を割り当てます。
上記の2つの例は、正確に同じことを行います。 使用する必要はありませんnew Array() 。
シンプルさ、読みやすさと実行速度の場合、最初の1(配列リテラルメソッド)を使用します。
配列の要素にアクセスします
あなたは、インデックス番号を参照することにより、配列要素を参照してください。
この文は、車の最初の要素の値にアクセスします。
var
name = cars[0];
この文は、車の最初の要素を変更します。
cars[0] = "Opel";
[0]配列の最初の要素である。 [1]秒です。 配列のインデックスは0から始まります。
あなたは一つの配列のさまざまなオブジェクトを持つことができます
JavaScriptの変数は、オブジェクトすることができます。 配列はオブジェクトの特別な種類があります。
このため、同じアレイ内の別の型の変数を持つことができます。
あなたは、配列の中のオブジェクトを持つことができます。 あなたは配列に機能を有することができます。 あなたは、配列の配列を持つことができます。
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
配列はオブジェクトであります
配列はオブジェクトの特殊なタイプです。 typeof JavaScriptで演算子を返します"object"アレイのを。
しかし、JavaScriptの配列は、最良の配列として記載されています。
配列は、使用numbers 、そのアクセスするための"elements" 。 この例では、 person[0]を返しJohn 。
オブジェクトは、その「メンバー」にアクセスするために名前を使用しています。 この例では、person.firstNameを返しJohn :
配列のプロパティとメソッド
JavaScript配列の本当の強さは、内蔵されているアレイのプロパティとメソッド:
例
var x = cars.length;
// The length property returns the number of elements in cars
var y = cars.sort();
// The sort() method sort cars in alphabetical order
アレイ方式は、次の章で覆われています。
lengthプロパティ
length配列のプロパティは、配列(配列要素の数)の長さを返します。
例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is 4
»それを自分で試してみてください lengthプロパティは、常に最高の配列インデックスより1つ多いです。
配列要素を追加します
配列に新しい要素を追加する最も簡単な方法は、プッシュ方式を使用しています:
例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits
»それを自分で試してみてください 新しい要素は、使用して、アレイに添加することができるlengthプロパティ:
例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits
»それを自分で試してみてください 警告!
高いインデックスを持つ要素を追加すると、未定義作成することができ"holes"配列に:
例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon"; // adds a new element (Lemon) to fruits
»それを自分で試してみてください 配列要素をループ
、使用している配列をループ処理する最善の方法"for"ループ:
例
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
»それを自分で試してみてください 連想配列
多くのプログラミング言語は、指定されたインデックスを持つ配列をサポート。
名前のインデックスの配列は連想配列(またはハッシュ)と呼ばれています。
JavaScriptは名前のインデックスの配列をサポートしていません 。
JavaScriptでは、 配列は常に番号のインデックスを使用します。
例
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;
// person.length will return 3
var y = person[0];
// person[0] will return "John"
»それを自分で試してみてください WARNING !!
名前付きインデックスを使用している場合、JavaScriptは標準オブジェクトに配列を再定義します。
その後、 すべての配列のメソッドとプロパティは、誤った結果を生成します 。
例:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will
return 0
var y = person[0];
// person[0] will return undefined
»それを自分で試してみてください 配列とオブジェクトの違い
JavaScriptでは、 配列は 、番号のインデックスを使用しています。
JavaScriptでは、使用という名前のインデックスオブジェクト 。
配列は、番号インデックスを持つ、オブジェクトの特別な種類です。
配列を使用する場合。 オブジェクトを使用するとき。
- JavaScriptは、連想配列をサポートしていません。
- あなたは要素名が文字列(テキスト)にしたいときは、 オブジェクトを使用する必要があります 。
- あなたは要素名が数字になりたいときは、 配列を使用する必要があります。
避けてnew Array()
JavaScriptの組み込みの配列コンストラクターを使用する必要はありませんnew Array() 。
使用[]の代わりに。
これら二つの異なる文がポイントという名前の新しい空の配列を作成し、両方:
var points = new Array();
// Bad
var points = [];
// Good
これら二つの異なる文の両方が6個の数字を含む新しい配列を作成します。
var points = new Array(40, 100, 1, 5, 25, 10) // Bad
var points = [40, 100, 1, 5, 25, 10];
// Good
»それを自分で試してみてください newキーワードは、コードが複雑になります。 また、いくつかの予期しない結果を生成することができます:
var points = new Array(40, 100); // Creates an array with two elements (40 and 100)
私は要素の一つを削除する場合は?
var points = new Array(40); // Creates an array with 40 undefined elements !!!!!
»それを自分で試してみてください 配列を認識する方法
一般的な質問です:変数が配列であるかどうか確認する方法は?
問題は、JavaScriptの演算子のことであるtypeof "オブジェクト"を返します。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits; // returns object
»それを自分で試してみてください JavaScriptの配列はオブジェクトであるため、typeof演算子の戻り値Object。
解決策1:
この問題を解決するためECMAScript 5新しいメソッドを定義Array.isArray() :
Array.isArray(fruits); // returns true
»それを自分で試してみてください この解決策の問題は、ということであるECMAScript 5 古いブラウザではサポートされません 。
解決策2:
この問題を解決するには、あなた自身を作成することができますisArray()関数を:
function isArray(x) {
return
x.constructor.toString().indexOf("Array") > -1;
}
»それを自分で試してみてください 引数が配列の場合、必ず上記の関数はtrueを返します。
より正確に:オブジェクトのプロトタイプは、「Array」という語を含んでいる場合にはtrueを返します。
解決策3:
instanceofオブジェクトが指定されたコンストラクタによって作成された場合はtrueを返します:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array // returns true
»それを自分で試してみてください