簡単な配列操作をマスターしよう【JavaScript勉強ログ #18】

※本記事はJavaScriptの勉強がてら、自分達の学んだことを備忘録的に残しておくことが目的です。素人が四苦八苦しながらJavaScriptを学ぶ過程を楽しんでいただければ、そしてそれが、少しでも誰かのためになれば嬉しいです。
また、本記事は備忘録的にまとめていきますので、詳細までは書かないこともあります。ご了承を～

はじめに
配列の作成
要素の取得
要素の追加
要素の削除
最後に
参考書籍・Udemy

はじめに

さて今回は、配列操作についてまとめたいと思います。

色々なメソッドがあるので覚えるのは少し大変ですが、よく使うスキルだと思いますので必ず覚えておくようにしましょう。やってることは簡単なので安心してください。

それでは見ていきましょう～。

配列の作成

まずは配列の作成方法を理解しましょう。以下を実行することで配列を作成できます。

配列変数名 = [要素1, 要素2, 要素3, …];

例も見ながらイメージを膨らませてくださいね。

<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript勉強ログ</title>
	</head>
	<body>
		<script>
			//配列作成＆出力
			var array = [5, 10, 7, 2, 9]; //配列作成
			alert(array);
		</script>
	</body>
</html>

要素の取得

次に要素の取得方法です。

基本的には、取得したい要素番号を添え字として指定するだけでOKです。

配列変数名[要素番号];

例も見ながらイメージを膨らませてくださいね。

<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript勉強ログ</title>
	</head>
	<body>
		<script>
			//配列作成＆出力
			var array = [5, 10, 7, 2, 9]; //配列作成
			alert(array);
			alert(array[2]); //3番目の要素7を出力
		</script>
	</body>
</html>

プログラミングを多少やったことある方なら大丈夫だとは思いますが、配列の要素番号は”0″からスタートするので注意しましょう。

1つ目の要素は”0番”、2つ目の要素は”1番”…と続いていくので注意しましょう。

ちなみに余談ですが、下記を実行すると配列の長さ（要素数）のデータを取得できます。これもよく利用するので覚えておきましょう。

配列変数名.length;

要素の追加

次に要素の追加です。

下記のメソッドを実行しましょう。

★末尾にデータを追加

配列変数名.push(追加するデータ);

★先頭にデータを追加

配列変数名.unshift(追加するデータ);

★要素番号を指定してデータを追加

配列変数名[追加する要素番号] = 追加するデータ;

要素番号を指定してデータを追加する場合、既にその要素番号にデータがある場合は、追加ではなく上書きになるので注意してくださいね。

例も見ながらイメージを膨らませてくださいね。

<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript勉強ログ</title>
	</head>
	<body>
		<script>
			//要素追加
			var array = [5, 10, 7, 2, 9]; //配列作成
			array.push(8); //末尾に要素を追加
			array.unshift(1); //先頭に要素を追加
			array[7] = 3; //新しい添え字を指定して追加
			alert(array);
		</script>
	</body>
</html>

要素の削除

最後に要素の削除です。

下記のメソッドを実行しましょう。

★範囲を指定してデータを削除

配列変数名.splice(削除を開始する位置の要素番号, 削除する要素数);

★末尾のデータを削除

配列変数名.pop;

★先頭のデータを削除

配列変数名.shift;

★全データ削除

配列変数名 = [];

全データ削除は[]（空白）で上書きするだけですね。

例も見ながらイメージを膨らませてくださいね。

<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript勉強ログ</title>
	</head>
	<body>
		<script>
			//要素削除
			var array = [1, 5, 10, 7, 2, 9, 8, 3]; //配列作成
			array.splice(1, 3); //要素1-3を削除
			alert(array);
			
			array.pop(); //末尾削除
			array.shift(); //先頭削除
			alert(array);
			
			array = []; //全削除
			alert(array);
		</script>
	</body>
</html>