最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

JS リファレンスマニュアル

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScript配列


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"それのを;


それを自分で試してみてください

配列を作成し、それに値を割り当てます。

var cars = ["Saab", "Volvo", "BMW"];
»それを自分で試してみてください

スペースや改行は重要ではありません。 宣言は、複数行にまたがることができます。

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];
»それを自分で試してみてください

(のような最後の要素の後にコンマを置いてはいけません"BMW"
効果は、ブラウザ間で矛盾しています。


配列とは何ですか?

アレイは、一度に複数の値を保持することができる特別な変数です。

あなたが(例えば、車名のリスト、)の項目のリストを持っている場合は、単一の変数に車を格納すると、次のようになります。

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

しかし、あなたはどのような車をループしたいと具体的なものを見つけた場合は? そして、あなたがいない3台が、300を持っていたものか?

解決策は、配列であります!

アレイは、単一の名前の下に多くの値を保持することができ、あなたは、インデックス番号を参照して値にアクセスすることができます。


アレイの作成

配列リテラルを使用すると、JavaScriptの配列を作成する最も簡単な方法です。

構文:

var array-name = [ item1 , item2 , ...];      

例:

var cars = ["Saab", "Volvo", "BMW"];

JavaScriptのキーワードの新しいを使用して、

次の例はまた、配列を作成し、それに値を割り当てます。

var cars = new Array("Saab", "Volvo", "BMW");
»それを自分で試してみてください

上記の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

アレイ:

var person = ["John", "Doe", 46];
»それを自分で試してみてください

オブジェクトは、その「メンバー」にアクセスするために名前を使用しています。 この例では、person.firstNameを返しJohn

オブジェクト:

var person = {firstName:"John", lastName:"Doe", age:46};
»それを自分で試してみてください

配列のプロパティとメソッド

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
»それを自分で試してみてください

練習で自分自身をテスト!

演習1» 演習2» 演習3» 演習4» 演習5»