最新の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の配列の強度は、アレイ方式です。


文字列に配列を変換します

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

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

結果

Banana,Orange,Apple,Mango
»それを自分で試してみてください

join()メソッドはまた、文字列にすべての配列要素を結合します。

それはちょうどのように振る舞うtoString()それに加えて、あなたは、セパレータを指定することができます。

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

結果

Banana * Orange * Apple * Mango
»それを自分で試してみてください

ポップとプッシュ

あなたは配列を扱うときには、要素を削除し、新しい要素を追加するのは簡単です。

これは、ポップとプッシュが何であるかです:

配列の外にアイテムをポップ、または配列アイテムをプッシュ。


ポッピング

pop()メソッドは、配列から最後の要素を削除します。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // Removes the last element ("Mango") from fruits
»それを自分で試してみてください

pop()メソッドは、「ポップアウト」した値を返します:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // the value of x is "Mango"
»それを自分で試してみてください

プッシング

push()メソッドは、(最後に)配列に新しい要素を追加します。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  Adds a new element ("Kiwi") to fruits
»それを自分で試してみてください

push()メソッドは、新しい配列の長さを返します。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi");   //  the value of x is 5
»それを自分で試してみてください

要素のシフト

シフトではなく、最後の最初の要素に取り組んで、ポップに相当します。

shift()メソッドは、最初の配列要素と「シフト」低い屈折率に他のすべての要素を削除します。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // Removes the first element "Banana" from fruits
»それを自分で試してみてください

unshift()メソッドは、(先頭の)配列に新しい要素を追加し、古い要素を「unshifts」:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // Adds a new element "Lemon" to fruits
»それを自分で試してみてください

shift()メソッドは、「シフトアウト」された文字列を返します。

unshift()メソッドは、新しい配列の長さを返します。


要素を変更します

配列の要素は、そのインデックス番号を使用してアクセスします

配列のインデックスは 0で始まり[0]配列の最初の要素である、[1]、秒である[2]第三のです...

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // Changes the first element of fruits to "Kiwi"
»それを自分で試してみてください

lengthプロパティは配列に新しい要素を追加する簡単な方法を提供します。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // Appends "Kiwi" to fruit
»それを自分で試してみてください

削除要素

JavaScriptの配列はオブジェクトであるため、要素はJavaScriptの演算子を使用して削除することができますdelete

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // Changes the first element in fruits to undefined
»それを自分で試してみてください

使用してdelete 、アレイ内の未定義の穴を残すことがあります。 使用pop()またはshift()を代わりに。


アレイのスプライシング

splice()メソッドは、配列に新しいアイテムを追加するために使用することができます。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
»それを自分で試してみてください

最初のパラメータ(2)は(にスプライシングされた)新しい要素が追加されるべき位置を定義します。

二番目のパラメータ(0)を除去する必要がありますどのように多くの要素を定義します。

残りのパラメータ( "Lemon" , "Kiwi"を追加する新しい要素を定義します。


使用してsplice()の要素を削除します

巧妙なパラメータ設定を使用すると、使用することができますsplice()配列に「穴」を残すことなく、要素を削除するには:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // Removes the first element of fruits
»それを自分で試してみてください

最初のパラメータ(0)(にスプライシングされた)新しい要素が追加されるべき位置を定義します。

二番目のパラメータ(1)は削除する必要があります どのように多くの要素を定義します。

残りのパラメータを省略しています。 いいえ新しい要素が追加されません。


配列のソート

sort()メソッドは、アルファベット順に配列をソートします。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // Sorts the elements of fruits
»それを自分で試してみてください

アレイを逆転

reverse()メソッドは、配列内の要素を反転させます。

あなたは降順で配列をソートするためにそれを使用することができます。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // Sorts the elements of fruits
fruits.reverse();         // Reverses the order of the elements
»それを自分で試してみてください

数値ソート

デフォルトでは、 sort()関数は、値を文字列としてソートします。

これは、文字列に適しています( "Apple"前に来る"Banana" )。

数値が文字列としてソートされる場合は、「2」が「1」よりも大きいので、ただし、「25」、「100」よりも大きいです。

このため、 sort()数字をソートするときの方法は、誤った結果が生成されます。

あなたは比較関数を提供することによって、この問題を解決することができます。

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
»それを自分で試してみてください

または

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a>b});
»それを自分で試してみてください

配列降順のソートに同じトリックを使用します。

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
»それを自分で試してみてください

または

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b>a});
»それを自分で試してみてください

コンペア機能

コンペア機能の目的は、代替ソート順序を定義することです。

比較関数は、引数に応じて、負、ゼロ、または正の値を返す必要があります:

function(a, b){return a-b}

ときにsort()関数は、2つの値を比較し、それは比較関数に値を送信し、返された(負、ゼロ、正の)値に応じて値をソートします。

例:

40と100を比較すると、 sort()メソッドは、比較呼び出しfunction(40,100)

この関数は40-100を計算し、-60(負の値)を返します。

ソート機能は100よりも低い値として40をソートします。


最高の(または最低)値を探します

どのように配列内の最高値を見つけるには?

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
// now points[0] contains the highest value
»それを自分で試してみてください

そして、最低:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
// now points[0] contains the lowest value
»それを自分で試してみてください

配列への参加

concat()メソッドは、2つの配列を連結して新しい配列を作成します。

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias","Linus"];
var myChildren = myGirls.concat(myBoys);     // Concatenates (joins) myGirls and myBoys
»それを自分で試してみてください

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

アレイをスライス

slice()メソッドは、新しい配列に配列の部分をスライスします。

この例では、配列要素1(から始まる配列の一部アウトスライス"Orange" ):

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
»それを自分で試してみてください

slice()メソッドは、新しい配列を作成します。 これは、ソース配列から任意の要素を削除しません。

この例では、配列要素3(から始まる配列の一部アウトスライス"Apple" ):

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);
»それを自分で試してみてください

slice()メソッドは次のように二つの引数取ることができますslice(1,3)

この方法は、エンド引数をstart引数から要素を選択し、最大(は含みません)。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
»それを自分で試してみてください

end引数が省略された場合、最初の例のように、 slice()メソッドは、配列の残りの部分をスライスします。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);
»それを自分で試してみてください

valueOf()メソッド

valueOf()メソッドは、配列のデフォルトの動作です。 これは、プリミティブ値に配列を変換します。

プリミティブな値が予想される場合にはJavaScriptが自動的に文字列に配列を変換します。

このため、 すべてのこれらの例は、同じ結果を生成します

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
»それを自分で試してみてください

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.valueOf();
»それを自分で試してみてください

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
»それを自分で試してみてください

すべてのJavaScriptオブジェクトが持っているvalueOf()toString()メソッドを。


完全な配列参照

完全なリファレンスについては、当社に行く完全なJavaScriptの配列参照

参照は、すべての配列のプロパティとメソッドの説明と例が含まれています。


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

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