配列 array javascript 入門

      2017/04/12

配列 javascript 入門

配列には配列リテラルとarrayがあります。

配列リテラル

配列リテラルとは[]で配列を作成します。

var 配列名 = [値,値];

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

<script type="text/javascript">
function helloworld(){
var ary = [1,2,3];

alert(ary);
}
</script>
</head>
<body>
<form>

実行結果は123です。

配列の添え字は0から始まります。

アクセスするには

配列名[添え字]

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

<script type="text/javascript">
function helloworld(){
var ary = [1,2,3];

alert(ary[0]);
}
</script>
</head>
<body>
<form>
<input type="button" value="ここをクリック" onClick="helloworld()">
</form>

</body>
<html>

実行結果は1です。

値の変更は

配列名[添え字] = 値;

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

<script type="text/javascript">
function helloworld(){
var ary = [1,2,3];
ary[0] = 7;
alert(ary[0]);
}
</script>
</head>
<body>
<form>
<input type="button" value="ここをクリック" onClick="helloworld()">
</form>

</body>
<html>

二次元配列

結論から言うとjavascriptには二次元配列はありません。
二次元配列みたいなこうぞうにすることはできます。
どういうことかというと配列に配列が格納できるみたいです。

var a = [1, 2, 3, 4];
var b = [1, 2, 3, 4];

var ary = [a, b,];

aとbの配列をaryの配列に代入してます。

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

<script type="text/javascript">
function helloworld(){
var a = [1, 2, 3, 4];
var b = [1, 2, 3, 4];
var ary = [a, b,];
alert(ary);
}
</script>
</head>
<body>
<form>
<input type="button" value="ここをクリック" onClick="helloworld()">
</form>

</body>
<html>

実行結果は1,2,3,4,1,2,3,4です。

 

連想配列

連想配列とは添え字の番号が文字の表現します。

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample1</title>

<script type="text/javascript">
function helloworld(){
var a = [];
a["name"] = "tanaka";
a["age"] = 99;
alert(a["name"] + a["age"] );
}
</script>
</head>
<body>

実行結果はtanaka99です。

lengthプロパティ

配列の要素数です。

変数名.length

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

<script type="text/javascript">
function helloworld(){
var a = [1,2];

alert(a.length );
}
</script>
</head>
<body>
<form>
<input type="button" value="ここをクリック" onClick="helloworld()">
</form>

</body>
<html>

実行結果は2です。

連想配列はインデックス数ではないので使用しないほうがいいでしょう。

popとpush

pushは配列の最後の要素を追加します。

戻り値は要素数です。

配列名.push(値);

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

<script type="text/javascript">
function helloworld(){
var a = [1,2];
a.push(3);
alert(a);
}
</script>
</head>
<body>
<form>
<input type="button" value="ここをクリック" onClick="helloworld()">
</form>

</body>
<html>

実行結果は1,2,3です。

popは配列の最後を削除します。

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

<script type="text/javascript">
function helloworld(){
var a = [1,2];
a.pop();
alert(a);
}
</script>
</head>
<body>
<form>
<input type="button" value="ここをクリック" onClick="helloworld()">
</form>

</body>
<html>

実行結果は1です。

戻り値は削除された要素です。

sort

sortは配列要素を並び替えます。

配列名.sort();

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

<script type="text/javascript">
function helloworld(){
var a = [0, 200, 1];
a.sort();
alert(a);
}
</script>
</head>
<body>
<form>
<input type="button" value="ここをクリック" onClick="helloworld()">
</form>

</body>
<html>

実行結果は0,1,200です。

もしソートしない場合は配列の中身を見直してください。

同じ値を入力モードを意識して再入力することをお勧めします。

join

joinは値の区切りを指定します。

戻り値として文字列を返す。

デフォルトでは,です。

戻り値を格納する変数 = 配列名.join("区切り文字")

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

<script type="text/javascript">
function helloworld(){
var a = [0, 200, 1];
str = a.join('/');
console.log(str);

alert(str);
}
</script>
</head>
<body>
<form>
<input type="button" value="ここをクリック" onClick="helloworld()">
</form>

</body>
<html>

実行結果は0/200/1です。

reverse

reverseは要素を逆に並べ替えます。

数値の順番を逆に並べ替えではありません。

配列名.reverse();

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

<script type="text/javascript">
function helloworld(){
var a = [0, 200, 1];
a.reverse();

alert(a);
}
</script>
</head>
<body>
<form>
<input type="button" value="ここをクリック" onClick="helloworld()">
</form>

</body>
<html>

実行結果は0,200,1です。

Array

ArrayはArrayオブジェクトを使用します。

var 変数名 = new Array;

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

<script type="text/javascript">
function helloworld(){
var ary = new Array(1,2,0);
alert(ary);
}
</script>
</head>
<body>
<form>
<input type="button" value="ここをクリック" onClick="helloworld()">
</form>

</body>
<html>

実行結果は1,2,0です。

PR



 - javascript 入門

Translate »