Array javascript 入門

Array

Arrayオブジェクトについて解説します。
宣言
変数名　= new Array(配列の要素数);

代入
変数名[添え字] = 値;

宣言と同時に代入
変数名　= new Array(値1,値2);

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);

alert(Array1);
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は12と34
変数名.プロパティかメソッド
オブジェクトにプロパティとメソッドがあります。

Array constructor プロパティ

constructor プロパティはコンストラクタを参照します。

変数名.constructor

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);

alert(Array1.constructor);
alert(Array2.constructor);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はfunction Array() { [native code] }が二回返します。

Array length プロパティ

Array length プロパティは要素数を参照・設定できます。

要素数を参照
変数名.length

要素数を設定する
変数名.length = 値;

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);

alert(Array1.length);
Array2.length = 5;
alert(Array2.length);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は2と５です。

Array prototype プロパティ

prototype プロパティは配列にプロパティを作成する。
Array.prototype.プロパティ名 = 値；

Array concat メソッド

Array concat メソッドは文字列を連結します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);

alert(Array1.concat(Array1,Array2));
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は1,2,1,2,3,4です。
Array1は初期化されるわけではないので空のオブジェクトを戻り値に使用しましょう。

Array join メソッド

Array join メソッドは要素を指定された値で区切ります。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4”);
Array2　= Array1.join(“/”);
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は1/2です。

Array pop メソッド

Array pop メソッドは要素の末尾を削除する。
戻り値として削除された値が返る。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);

alert(Array2.pop());
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は４です。

Array push メソッド

Array push メソッドは末尾に要素を追加する。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4”);
Array2.push(“5″);
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は3,4,5です。

Array reverse メソッド

Array reverse メソッドは要素を反転されます。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);
Array2.reverse();
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は4,3です。

Array shift メソッド

Array shift メソッドは要素の先頭を削除

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);
Array2.shift();
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は4です。

Array slice メソッド

Array slice メソッドは指定した範囲を抽出する

変数名.slice(開始位置,終了位置);

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“1″,”2″,”3″,”4″);
Array3 = Array2.slice(1,3);

alert(Array3);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は2,3です。

Array sort メソッド

Array sort メソッドは要素を並び替え

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″,”1″);
Array2.sort();
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は1,3,4です。

Array splice メソッド

Array splice メソッドは要素を置き換え

変数名. splice(開始位置,置き換える数,”置き換える値”);

開始位置は0から数えます。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″,”1″);
Array2. splice(1,1,”100″);
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は3,100,1です。

Array toStringメソッド

Array toString メソッドは文字列に変換

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“1″,”2″,”3″);
Array3 = Array2.toString();

alert(Array3);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は1,2,3です。

何も変わらないですね。

配列の参照や文字列を表すときは自動的にtoStringが呼び出されています。

Array unshift メソッド

Array unshift メソッドは先頭に要素を追加

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″,”1”);
Array2.unshift(“7″);
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は7,3,4,1です。

Enter your email Address