JavaScript 配列


配列オブジェクトの役割は、個別の変数名を使用して一連の値を保存することです。

オンラインインスタンス

配列を作成し、値を割り当てます:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
var i;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (i=0;i<mycars.length;i++){
	document.write(mycars[i] + "<br>");
}
</script>

</body>
</html>

インスタンスを実行する»

オンラインインスタンスを表示するには、[インスタンスを実行]ボタンをクリックしてください

さらに見つけることができますページの下部にあるインスタンス。

配列とは何ですか?

配列オブジェクトは、個別の変数名を使用して一連の値を格納します。

一連のデータ (例: 車名) がある場合、次のような別の変数があります:

var car1="サーブ";
var car2="ボルボ";
var car3="BMW";

しかし、特定の車を見つけたい場合はどうすればよいでしょうか?しかも3台じゃなくて300台？これは簡単な作業ではありません。

最良の方法は配列を使用することです。

配列は 1 つの変数名を使用してすべての値を格納でき、変数名を使用して任意の値にアクセスできます。

配列内の各要素には独自の ID があり、簡単にアクセスできます。

配列を作成する

配列を作成するには 3 つの方法があります。

次のコードは、myCars という名前の配列オブジェクトを定義します。

1: 従来の方法:

var myCars=new Array();
myCars[0]="Saab"; myCars[1]="ボルボ";
myCars[2]="BMW";
2: 簡潔な方法:

var myCars=new Array("Saab","Volvo","BMW");
3: リテラル:

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

配列へのアクセス

配列名とインデックス番号を指定することで、特定の要素にアクセスできます。

次のインスタンスは、myCars 配列の最初の値にアクセスできます:

var name=myCars[0];
次の例では、配列 myCars の最初の要素を変更します:

myCars[0]="Opel";

[0] は配列です最初の要素。 [1] は配列の 2 番目の要素です。

配列にはさまざまなオブジェクトを含めることができます

すべての JavaScript 変数はオブジェクトです。配列要素はオブジェクトです。関数はオブジェクトです。

つまり、配列内にさまざまな型の変数を含めることができます。

配列にはオブジェクト要素、関数、配列を含めることができます:

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

array メソッドおよびプロパティ

配列オブジェクトを使用してプロパティとメソッドを事前定義します:

var x=myCars.length //myCars の要素の数
var y=myCars.indexOf("Volvo") //「Volvo」値のインデックス値

完全な配列オブジェクト リファレンス マニュアル

については、このサイトを参照してください。配列に関するすべての情報 プロパティとメソッドの完全なリファレンス マニュアル。

リファレンス マニュアルには、すべてのプロパティとメソッド (およびその他の例) の説明が含まれています。

完全な配列オブジェクト リファレンス マニュアル

新しいメソッドの作成

プロトタイプは JavaScript グローバル コンストラクターです。新しい JavaScript オブジェクトのプロパティとメソッドを構築できます。

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮创建一个数组,调用ucase（）方法, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<script>
Array.prototype.myUcase=function(){
	for (i=0;i<this.length;i++){
		this[i]=this[i].toUpperCase();
	}
}
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.myUcase();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

例の実行 »

オンライン例を表示するには、「例の実行」ボタンをクリックしてください

上記の例は、配列の小文字を大文字に変換するための新しい配列メソッドを作成します。

Examples

その他の例

2 つの配列を結合する - concat()

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
	
<script>
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
document.write(children);
</script>
	
</body>
</html>

インスタンスを実行する»

オンラインの例を表示するには、[インスタンスを実行] ボタンをクリックしてください

3 つを結合する配列- concat()

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);
</script>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

配列の要素を使用して文字列を形成します - join()

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var x=document.getElementById("demo");
	x.innerHTML=fruits.join();
}
</script>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

配列の最後の要素を削除します - Pop()

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.pop();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

走るインスタンス»

「インスタンスの実行」ボタンをクリックします。オンラインの例を見る

配列の最後に新しい要素を追加します - Push()

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.push("Kiwi")
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

例の実行»

「例の実行」ボタンをクリックしてオンライン例を表示します

配列内の要素の順序を逆にする - reverse()

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮将数组反转排序。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.reverse();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

例の実行»

クリックオンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

配列の最初の要素を削除します -shift()

インスタンス 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮删除数组的第一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.shift();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

インスタンスの実行 »

オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックしますインスタンス

From 配列内の要素の選択 - スライス()

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
	var citrus = fruits.slice(1,3);
	var x=document.getElementById("demo");
	x.innerHTML=citrus;
}
</script>

</body>
</html>

例の実行»

オンライン例を表示するには、[例の実行] ボタンをクリックしてください

配列の並べ替え (アルファベットの昇順) order) - sort()

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.sort();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください

数値ソート(数値の昇順) - sort()

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return a-b});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

数値ソート(数値の降順) - sort()

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮降序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return b-a});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>

</body>
</html>

インスタンスを実行する»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

配列の2番目の位置に要素を追加します - splice()

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.splice(2,0,"Lemon","Kiwi");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

例を実行します»

「」をクリックします「例を実行」ボタンをクリックしてオンライン例を表示します

配列を String-toString () に変換

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮将数组转为字符串并返回。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var str = fruits.toString();
	var x=document.getElementById("demo");
	x.innerHTML= str;
}
</script>

</body>
</html>

インスタンスを実行»

「インスタンスを実行」ボタンをクリックしてオンライン インスタンスを表示します

配列の先頭に新しい要素を追加します - unshift()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮在数组中插入元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.unshift("Lemon","Pineapple");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
<p><b>注意:</b> unshift()方法不能用于 Internet Explorer 8 之前的版本，插入的值将被返回成<em>undefined</em>。</p>

</body>
</html>

インスタンスの実行»

[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します


←
→

PHP中国語ウェブサイト

ホームページホームページコースコース記事記事に質問に質問辞書辞書マニュアルマニュアルダウンロードダウンロード検索検索APPダウンロード APPダウンロード
lamp